Build a full-stack web application using Next.js App Router. The application should be designed to help users learn practical skills within 30 days and start earning money. The core functionality includes structured learning modules, project-based learning, and resources for finding clients.
**Technology Stack:**
- Next.js 14 (App Router)
- React
- TypeScript
- Drizzle ORM
- PostgreSQL
- Tailwind CSS
**Project Structure:**
- Use the `app/` directory for routing.
- Separate concerns into `components/`, `lib/`, `styles/`, `types/`, `db/` directories.
**Database Schema (Drizzle ORM):**
Define the following tables:
1. `users`:
- `id` (UUID, primary key)
- `email` (unique, not null)
- `username` (unique, not null)
- `password` (hashed, not null)
- `createdAt` (timestamp, default now())
- `updatedAt` (timestamp, default now())
2. `skills`:
- `id` (UUID, primary key)
- `name` (string, not null)
- `description` (text)
- `category` (string)
- `estimatedLearningTimeDays` (integer, default 30)
- `earningPotential` (string, e.g., 'low', 'medium', 'high')
3. `courses`:
- `id` (UUID, primary key)
- `skillId` (foreign key to `skills.id`, not null)
- `title` (string, not null)
- `content` (text, markdown format)
- `order` (integer, for module sequence)
- `createdAt` (timestamp, default now())
- `updatedAt` (timestamp, default now())
4. `projects`:
- `id` (UUID, primary key)
- `skillId` (foreign key to `skills.id`, not null)
- `title` (string, not null)
- `description` (text)
- `templateUrl` (string, link to a template, e.g., GitHub repo)
- `clientFindingGuide` (text, markdown format)
- `createdAt` (timestamp, default now())
- `updatedAt` (timestamp, default now())
5. `userProgress`:
- `userId` (foreign key to `users.id`, not null)
- `courseId` (foreign key to `courses.id`, not null)
- `isCompleted` (boolean, default false)
- `completedAt` (timestamp)
- `PRIMARY KEY (userId, courseId)`
**API Routes (app/api/):**
Implement CRUD operations for each entity. Ensure proper error handling and input validation.
- `users`:
- `POST /api/users` (Register new user)
- `POST /api/auth/login` (Login user, return JWT or session token)
- `GET /api/users/me` (Get current logged-in user details)
- `skills`:
- `GET /api/skills` (Get all skills)
- `GET /api/skills/:id` (Get a specific skill)
- `courses`:
- `GET /api/skills/:skillId/courses` (Get courses for a specific skill)
- `GET /api/courses/:courseId` (Get a specific course)
- `projects`:
- `GET /api/skills/:skillId/projects` (Get projects for a specific skill)
- `userProgress`:
- `POST /api/userProgress` (Mark a course as complete)
- `GET /api/userProgress` (Get user's progress)
**Frontend (app/ directory):**
Create multiple pages:
1. **Homepage (`app/page.tsx`):**
- Hero section explaining the value proposition.
- Featured skills and courses.
- Call to action (Sign Up).
2. **Skills List Page (`app/skills/page.tsx`):**
- Display all available skills with brief descriptions and earning potential.
- Filtering and searching capabilities.
3. **Skill Detail Page (`app/skills/[skillId]/page.tsx`):**
- Show detailed skill information.
- List of associated courses.
- List of associated projects.
4. **Course Detail Page (`app/courses/[courseId]/page.tsx`):**
- Display course content (using Markdown rendering).
- Navigation for previous/next modules.
- Button to mark as complete.
- User progress tracking.
5. **Project Detail Page (`app/projects/[projectId]/page.tsx`):**
- Show project description and template links.
- Display client-finding guide.
6. **Authentication Pages (`app/auth/register/page.tsx`, `app/auth/login/page.tsx`):**
- User registration and login forms.
7. **User Dashboard (`app/dashboard/page.tsx`):**
- Display user's learning progress.
- Recommended next steps.
- Links to their enrolled courses and projects.
**Authentication:**
Implement server-side authentication using NextAuth.js or a custom JWT-based approach. Protect relevant API routes and pages.
**Styling:**
Use Tailwind CSS for a clean and responsive UI.
**Error Handling & Edge Cases:**
- Implement robust error handling for API calls and data fetching.
- Handle cases where data might be missing or invalid.
- Ensure responsiveness across different devices.
**Deployment:**
Ensure the application is structured for easy deployment on platforms like Vercel or Netlify.
**Do NOT generate:**
- Only a landing page or a simple SPA.
- Incomplete CRUD operations.
- Hardcoded data that doesn't use the database.
- Missing authentication logic.
- UI without backend integration.