Developer project discovery and progress tracking application. Helps developers explore curated projects, track their learning journey, and build their portfolio.
A high-contrast, responsive web application designed to guide developers through curated project-based learning paths.
Features:
- Project Discovery - Browse curated projects with filtering and search
- Progress Tracking - Monitor your learning journey across different paths
- Dark Theme - Accessibility-first design with high-contrast color scheme
- PWA Ready - Installable app with offline capabilities
- Authentication - Secure user management via Supabase
- Modern Stack - React 19, Vite, TypeScript, Tailwind CSS v4
# Install dependencies
npm install
# Start development server
npm run dev
# Run tests
npm test
# Build for production
npm run build| Category | Technology |
|---|---|
| Framework | React 19 + Vite 7 |
| Language | TypeScript 5.9 |
| Styling | Tailwind CSS 4 + styled-jsx |
| State | Zustand |
| Auth & DB | Supabase |
| Animation | Framer Motion |
| Testing | Vitest + Testing Library |
skills-track/
├── src/
│ ├── components/ # React components
│ │ ├── ui/ # Reusable UI primitives
│ │ └── *.tsx # Feature components
│ ├── pages/ # Route pages
│ ├── services/ # API & external services
│ ├── store/ # Zustand stores
│ ├── styles/ # Global styles
│ ├── test/ # Test utilities
│ └── utils/ # Helper functions
├── supabase/ # Database migrations
├── scripts/ # CLI utilities
├── public/ # Static assets
└── tests/ # E2E & integration tests
| Command | Description |
|---|---|
npm run dev |
Start Vite dev server (port 3000) |
npm run build |
Production build with type checking |
npm run preview |
Preview production build |
npm test |
Run Vitest unit tests |
npm run test:ui |
Run tests with Vitest UI |
npm run lint |
ESLint code checking |
npm run format |
Prettier code formatting |
| Command | Description |
|---|---|
npm run create-user |
Create a new user |
npm run list-users |
List all users |
npm run delete-user |
Delete a user |
npm run test-auth |
Test authentication flow |
npm run signup-test-user |
Signup test user |
npm run reset-and-seed |
Reset DB and seed data |
- Modern Navigation - Responsive navbar with mobile hamburger menu
- Contextual Sidebar - Collapsible sidebar with page-specific content
- Authentication - Modal-based auth with Supabase
- Search - Project search with modal overlay
- Sync Status - Real-time connection indicator
- Toast Notifications - User feedback system
- Error Boundaries - Graceful error handling
- Skeleton Loaders - Loading state components
- Background:
#0F172A(slate-900) - Surface:
#1E293B(slate-800) - Primary Text:
#F8FAFC(slate-50) - Accent:
#60A5FA(blue-400) - Active:
#3B82F6(blue-500)
- WCAG 2.1 AA compliant (4.5:1 contrast ratio)
- Keyboard navigation support
- ARIA labels throughout
- Focus visible indicators
Configured for Vercel deployment:
- Build command:
npm run build - Output directory:
dist - SPA routing enabled
Create a .env file:
VITE_SUPABASE_URL=your_supabase_url
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key
ISC
Built with care by the skills-track team