You are an expert full-stack developer. Your task is to build a comprehensive, multi-page web application MVP named "Youth Wealth Manager" using Next.js 14 App Router, TypeScript, Tailwind CSS for styling, and Drizzle ORM with a PostgreSQL database. The application should provide young adults with personalized financial planning, investment guidance, career path analysis, and housing resources.Here's a detailed breakdown of the required features and implementation:
1. Project Setup:
* Initialize a new Next.js 14 project with TypeScript, ESLint, and Tailwind CSS.
* Configure Drizzle ORM for PostgreSQL. Include environment variables for database connection.
2. Database Schema (Drizzle ORM):
Define the following Drizzle schema in `db/schema.ts`:
* User:
* `id`: Primary key, UUID.
* `email`: String, unique, required.
* `hashedPassword`: String, required.
* `fullName`: String.
* `currentSavings`: Numeric, default 0.
* `location`: String (e.g., "HCOL", "LCOL" or a specific city/state).
* `majorPreference`: String (e.g., "Psychology", "Social Work").
* `housingStatus`: String (e.g., "Student Housing", "Renting", "Homeless").
* `createdAt`: Timestamp, default now.
* `updatedAt`: Timestamp, default now (on update).
* FinancialGoal:
* `id`: Primary key, UUID.
* `userId`: UUID, foreign key referencing User.id.
* `goalName`: String, required.
* `targetAmount`: Numeric, required.
* `currentAmount`: Numeric, default 0.
* `deadline`: Date.
* `type`: Enum ('Emergency Fund', 'Housing Down Payment', 'Investment', 'Education', 'Other'), required.
* `status`: Enum ('Pending', 'In Progress', 'Achieved'), default 'Pending'.
* `createdAt`: Timestamp, default now.
* `updatedAt`: Timestamp, default now (on update).
* InvestmentAccount:
* `id`: Primary key, UUID.
* `userId`: UUID, foreign key referencing User.id.
* `accountName`: String (e.g., "HYSA - Bank A", "Brokerage - XYZ").
* `accountType`: String (e.g., "HYSA", "CD", "Brokerage", "401k").
* `institutionName`: String.
* `balance`: Numeric, default 0.
* `interestRate`: Numeric, nullable.
* `lastUpdated`: Timestamp, default now (on update).
* CareerPathData (Pre-seeded/Admin managed):
* `id`: Primary key, UUID.
* `major`: String, unique, required.
* `location`: String (e.g., "California", "USA Average").
* `minSalary`: Numeric.
* `maxSalary`: Numeric.
* `jobOutlook`: String (e.g., "Good", "Average", "Excellent").
* `requiredEducation`: String.
* `description`: Text.
* HousingResource:
* `id`: Primary key, UUID.
* `title`: String, required.
* `description`: Text.
* `link`: String, URL.
* `resourceType`: String (e.g., "Affordable Housing Program", "Roommate Finder", "Rental Market Data").
* `locationTag`: String (e.g., "Los Angeles", "HCOL Region").
* `addedByUserId`: UUID, foreign key referencing User.id (for admin/curator).
* `createdAt`: Timestamp, default now.
3. Authentication:
* Implement basic email/password authentication (registration and login).
* Use `bcrypt` for password hashing.
* Use a secure session management library (e.g., `next-auth` for simple setup, or implement a custom JWT-based solution if `next-auth` is not directly compatible with the desired granular control, otherwise just focus on server-side session cookies with `iron-session` or similar if simpler). For MVP, let's assume `next-auth` or a robust custom solution using server actions.
* Protect routes that require authentication.
4. API Routes (Next.js App Router API Routes):
Implement RESTful API routes for full CRUD operations where applicable.
* `api/auth`:
* `POST /api/auth/register`: User registration.
* `POST /api/auth/login`: User login.
* `GET /api/auth/session`: Get current user session.
* `POST /api/auth/logout`: User logout.
* `api/users`:
* `GET /api/users/[id]`: Get user profile.
* `PUT /api/users/[id]`: Update user profile.
* `api/financial-goals`:
* `GET /api/financial-goals`: Get all goals for the authenticated user.
* `POST /api/financial-goals`: Create a new financial goal.
* `GET /api/financial-goals/[id]`: Get a specific goal.
* `PUT /api/financial-goals/[id]`: Update a financial goal.
* `DELETE /api/financial-goals/[id]`: Delete a financial goal.
* `api/investment-accounts`:
* `GET /api/investment-accounts`: Get all investment accounts for the user.
* `POST /api/investment-accounts`: Add a new investment account.
* `PUT /api/investment-accounts/[id]`: Update an investment account.
* `DELETE /api/investment-accounts/[id]`: Delete an investment account.
* `api/career-paths`:
* `GET /api/career-paths`: Get all available career path data (potentially filtered by location).
* `GET /api/career-paths/[id]`: Get specific career path data.
* `api/housing-resources`:
* `GET /api/housing-resources`: Get all housing resources (potentially filtered by location/type).
5. Frontend Pages (Next.js App Router Pages):
Create the following pages with appropriate UI and data fetching/display. Use React Server Components and Client Components as appropriate.
* `/` (Landing Page):
* Publicly accessible.
* Brief introduction to Youth Wealth Manager, its benefits, and call-to-action for registration/login.
* `/register`:
* User registration form.
* `/login`:
* User login form.
* `/dashboard` (Protected):
* Overview of the user's financial status: total savings, progress towards nearest goals, a summary of investment accounts.
* Quick links to other sections.
* `/financial-planning` (Protected):
* Display a list of user's financial goals.
* Form to create new goals.
* Ability to edit/delete existing goals.