An open-source platform that replaces scattered searching with an intelligent, explainable matching ecosystem for student creators, innovators, and collaborators.
- Title: Student Innovation-Ideas focused on the intelligent use of resources for transforming and advancements of technology with combining artificial intelligence to explore more various sources and get valuable insights.
- Theme: Smart Automation
- Category: Software
Students building technical projects face a fragmented ecosystem:
- Scattered Discovery: Searching across disconnected platforms (job boards, Discord servers, WhatsApp groups, and campus forums) to recruit teammates.
- Hidden Skill Gaps: Creators struggle to analyze which competencies are actually missing from their technical stack.
- Trial & Error Outreach: Random messaging with no structured context or mutual compatibility.
- Disconnected Learning: Learning materials and tutorials are buried across the internet without connection to project goals.
DevSnapz provides a unified, intelligent layer that extracts project requirements, detects missing technical skills, and matches students with compatible collaborators and learning guides — with transparent, explainable reasoning.
- Project Showcase Gallery:
Discover active student creations, filter by technology tags, and search by help needed (Sponsors, Collaborators, Mentoring, Contributors). - AI-Assisted Skill-Gap Analysis:
AI analyzes project descriptions to extract required competencies and highlights gaps between what the creator knows and what the project needs. - Explainable Collaborator Matchmaking:
Surfaces compatible student developers with clear explanations for why they match (e.g. "Matches your gap in Database & UI/UX"). - Interactive Project Hub & Role Applications:
Detailed modal view for projects featuring open roles, mentorship Q&A threads, milestone sponsorship tiers, and beginner-friendly issues. - Creator Management Dashboard:
A unified workspace for project owners to review incoming collaborator applications (Approve / Decline), answer technical guidance questions, and track project status. - Dark & Light Mode:
Theme-aware user interface powered by CSS variables and Tailwind CSS.
DevSnapz is engineered with a modern, high-performance, and lightweight architecture:
| Component | Selected Technology | Technical Highlights |
|---|---|---|
| Frontend Framework | React 18 + TypeScript + Vite | Component-driven SPA with sub-second hot reload |
| Styling & Design | Tailwind CSS 3.4 + CSS Variables | Theme-aware responsive UI with zero runtime overhead |
| Deployment / Hosting | Cloudflare Pages / Netlify | Edge-optimized global CDN with automatic git CI/CD |
| Backend & Database | Supabase (PostgreSQL) | Scalable relational database with Row Level Security (RLS) |
| Vector Similarity | Supabase pgvector |
Native cosine similarity search inside PostgreSQL |
| AI Requirement Inference | Groq Cloud API (llama-3.1-8b) |
Ultra-fast inference for automated skill extraction |
| Offline Fallback | PostgreSQL Full-Text Search (tsvector) |
Robust SQL-based tag and keyword matching |
| CI / CD & Testing | GitHub Actions & Vitest | Automated testing, linting, and regression verification |
web/
├── docs/ # Architectural documentation & phase reports
│ └── phases/
│ └── phase-00-audit-and-requirements.md
├── public/ # Static public assets (logo, icons)
├── src/
│ ├── components/ # UI components & platform modules
│ │ ├── Capabilities.tsx # Landing: Core capabilities
│ │ ├── Community.tsx # Landing: Community links
│ │ ├── CreateProjectWizard.tsx # Multi-step project creation wizard
│ │ ├── CreatorDashboard.tsx # Multi-project creator management hub
│ │ ├── Ecosystem.tsx # Landing: Featured ecosystem project
│ │ ├── Footer.tsx # Brand footer
│ │ ├── Hero.tsx # Landing: Terminal hero banner
│ │ ├── Nav.tsx # Sticky navigation with theme toggle
│ │ ├── ProjectDetailModal.tsx # Project modal with 5 sub-tabs
│ │ ├── ShowcaseFeed.tsx # Showcase gallery with search & filters
│ │ ├── Stack.tsx # Landing: Architecture stack display
│ │ └── ThemeToggle.tsx # Light/dark theme toggle
│ ├── data/ # Seed data and mock fixtures
│ ├── hooks/ # Custom React hooks
│ ├── types/ # TypeScript domain models and interfaces
│ ├── App.tsx # Root application coordinator
│ ├── index.css # Theme variables & base Tailwind styles
│ └── main.tsx # React DOM entry point
├── CONTRIBUTING.md # Guide for student contributors
├── LICENSE # MIT License
├── package.json # Project dependencies and npm scripts
├── tailwind.config.cjs # Tailwind CSS configuration
├── tsconfig.json # TypeScript compiler settings
└── vite.config.ts # Vite bundler configuration
git clone https://github.com/DevSnapz/web.git
cd webnpm installnpm run devOpen your browser at http://localhost:5173.
npm run buildBuild output is saved to the dist/ directory.
- Phase 0 — Project Audit & Requirement Analysis (Report)
- Phase 1 — Architecture & Open-Source Setup (Repository organization, community guides, licensing)
- Phase 2 — Landing Page Alignment (Refining copy and student value proposition)
- Phase 3 — Product UI/UX & Routing (Client-side routing with deep-linkable URLs)
- Phase 4 — Core Platform Backend (Supabase Auth, PostgreSQL schema, Row Level Security)
- Phase 5 — AI & Matching Engine (Groq skill extraction, skill-gap analysis, explainability)
- Phase 6 — Security, Accessibility & Testing (Vitest test suite, RLS policies, WCAG audit)
- Phase 7 — Production Launch & Pilot (Cloudflare Pages deployment, campus onboarding)
We welcome contributions from students and developers of all skill levels! Please see our CONTRIBUTING.md for details on setting up your environment, code standards, and submitting pull requests.
This project is licensed under the MIT License — free to use, modify, and distribute.