Create a full-stack web application using Next.js App Router, Drizzle ORM with PostgreSQL, and Tailwind CSS. The application will be a personal investment tracker focusing on retirement funds.
**Core Features:**
1. **User Authentication:** Implement secure user registration and login using NextAuth.js.
2. **Fund Management:** Users can add, edit, and delete their investment funds. Each fund should have fields for: fund name, ticker symbol (optional), initial investment amount, investment date, and current value.
3. **Performance Tracking:** Display a dashboard showing all user funds. Each fund should show its current value, initial investment, total gain/loss (absolute and percentage), and investment duration. Implement interactive charts (e.g., using Chart.js or Recharts) to visualize fund performance over time.
4. **Alerts System:** Implement a backend service that periodically checks fund performance. If a fund experiences a significant unrealized loss (e.g., >10% within a month) or unusually high expense ratios (needs a way to input/estimate these), trigger an in-app notification for the user. Also, flag any withdrawal activities detected in statements (requires a field to input detected withdrawals).
5. **Withdrawal Tracking:** Allow users to manually input withdrawal transactions (date, amount, type like 'normal distribution' or 'early withdrawal') for each fund to accurately reflect the net performance.
6. **Basic Financial Education:** Include a dedicated section with articles explaining common investment terms, types of retirement funds, and risks associated with them.
7. **Estimated Return Calculator:** A simple tool where users can input initial investment, investment date, and current value to see an estimated annualized return/loss.
**Technical Stack & Implementation Details:**
* **Frontend:** Next.js 13+ with the App Router (`app/` directory). Use React Server Components where appropriate. Employ Tailwind CSS for styling.
* **Backend:** Next.js API Routes (`app/api/`).
* **Database:** PostgreSQL with Drizzle ORM for schema definition and migrations. Define schemas for `users`, `funds`, and `transactions` (for withdrawals).
* `users`: `id`, `name`, `email`, `password` (hashed).
* `funds`: `id`, `userId`, `name`, `ticker`, `initialInvestment`, `investmentDate`, `currentValue`, `createdAt`, `updatedAt`.
* `transactions`: `id`, `fundId`, `date`, `amount`, `type` (e.g., 'deposit', 'withdrawal', 'distribution'), `createdAt`.
* **Authentication:** NextAuth.js with PostgreSQL adapter.
* **Data Fetching:** Utilize server-side data fetching in Next.js App Router. Implement client-side fetching for interactive elements like charts and forms using SWR or React Query.
* **CRUD Operations:** Implement full CRUD for Funds and Transactions via API routes.
* **Alerts Logic:** A scheduled job (could be simulated or use a cron service later) that queries the database for funds and checks conditions. Store triggered alerts in a separate table or directly as notifications for users.
* **Error Handling:** Implement robust error handling on both frontend and backend.
* **Deployment:** Prepare for deployment on platforms like Vercel.
**Development Workflow:**
1. Set up the Next.js project with Tailwind CSS and Drizzle ORM configured for PostgreSQL.
2. Implement user authentication (signup, login, logout).
3. Develop the database schema and migrations for users, funds, and transactions.
4. Build the API routes for CRUD operations on funds and transactions.
5. Create the frontend components for fund management (add, view, edit, delete).
6. Develop the dashboard view with fund summaries and performance charts.
7. Implement the withdrawal transaction input form and logic.
8. Build the alerts system backend logic and frontend notification display.
9. Create the static pages for financial education content.
10. Develop the estimated return calculator component.
11. Ensure responsive design and thorough testing.