Develop a full-stack MVP for an application named 'Divorce Finance Guide' using Next.js 14 (App Router), Drizzle ORM, PostgreSQL, and Clerk for authentication. The application's goal is to assist individuals navigating the financial complexities and potential debt issues post-divorce or separation.
Key features for the MVP include:
1. **User Authentication**: Implement secure sign-up, sign-in, and protected routes using Clerk for user management.
2. **Dashboard**: A personalized dashboard for authenticated users to see an overview of their financial situation and quick access to key features.
3. **Debt Management (CRUD)**: Allow users to add, view, edit, and delete various types of debts (e.g., credit card, personal loans). Each debt entry should include fields for `debtType` (e.g., 'credit_card', 'loan'), `amount`, `creditorName`, `status` (e.g., 'pending', 'disputed', 'resolved'), `associatedParty` (e.g., 'ex-husband', 'joint'), `notes`, and `dueDate`.
4. **Document Management (CRUD)**: Enable users to upload, store, and categorize important documents such as divorce decrees, credit card statements, bank records, and legal correspondence. For the MVP, implement a mock file upload (storing file names/URLs in DB) rather than actual cloud storage.
5. **Legal & Financial Guidance**: A read-only section providing general information, FAQs, and articles on divorce finance law, debt resolution strategies, and legal processes. This content can be hardcoded for the MVP or fetched from a simple data source.
6. **Expert Contact Module**: A simple form where users can submit inquiries to be connected with a legal or financial expert. Store these inquiries in the database with user details and a status.
**Technical Stack & Requirements:**
* **Framework**: Next.js 14 (App Router).
* **UI**: Tailwind CSS for styling.
* **Database**: PostgreSQL.
* **ORM**: Drizzle ORM for database interactions.
* **Authentication**: Clerk for user authentication and authorization.
* **Validation**: Zod for form and API input validation.
**Project Structure:**
* `app/`: Main application pages and layouts.
* `app/page.tsx`: Public landing page.
* `app/(auth)/sign-in/page.tsx`, `app/(auth)/sign-up/page.tsx`: Authentication routes with Clerk components.
* `app/(dashboard)/layout.tsx`: Layout for authenticated dashboard pages.
* `app/(dashboard)/dashboard/page.tsx`: User's main dashboard.
* `app/(dashboard)/debts/page.tsx`: List and add new debts.
* `app/(dashboard)/debts/[id]/edit/page.tsx`: Edit individual debt.
* `app/(dashboard)/documents/page.tsx`: List and upload documents.
* `app/(dashboard)/guidance/page.tsx`: Static content/FAQ section.
* `app/(dashboard)/experts/contact/page.tsx`: Expert contact form.
* `components/`: Reusable React components.
* `lib/db.ts`: Drizzle database connection setup.
* `lib/schema.ts`: Drizzle schema definitions.
* `lib/actions/`: Server actions or utility functions for data manipulation.
* `app/api/`: RESTful API routes for CRUD operations.
**Database Schema (Drizzle):**
* `users`: `id` (serial), `clerkId` (string, unique), `email` (string), `createdAt` (timestamp), `updatedAt` (timestamp).
* `debts`: `id` (serial), `userId` (references `users.id`), `debtType` (string), `amount` (numeric), `creditorName` (string), `status` (string), `associatedParty` (string, nullable), `notes` (text, nullable), `dueDate` (date, nullable), `createdAt` (timestamp), `updatedAt` (timestamp).
* `documents`: `id` (serial), `userId` (references `users.id`), `fileName` (string), `fileType` (string), `fileUrl` (string, mock/local path for MVP), `createdAt` (timestamp), `updatedAt` (timestamp).
* `expertInquiries`: `id` (serial), `userId` (references `users.id`), `message` (text), `status` (string, e.g., 'new', 'contacted'), `createdAt` (timestamp), `updatedAt` (timestamp).
**API Routes (Next.js API Routes):**
* `GET /api/debts`: Fetch all debts for the authenticated user.
* `POST /api/debts`: Create a new debt entry.
* `GET /api/debts/[id]`: Fetch a single debt by ID.
* `PUT /api/debts/[id]`: Update an existing debt entry.
* `DELETE /api/debts/[id]`: Delete a debt entry.
* `GET /api/documents`: Fetch all documents for the authenticated user.
* `POST /api/documents`: Upload a new document (mock upload for MVP).
* `DELETE /api/documents/[id]`: Delete a document entry.
* `POST /api/expert-inquiries`: Submit a new expert contact request.
**Implementation Details:**
* Utilize Next.js Server Components for initial data fetching and Client Components for interactive UI elements.
* Implement robust form handling and validation using Zod for all user inputs.
* Ensure proper Clerk middleware integration to protect dashboard routes.
* Provide a basic but functional UI for all CRUD operations, including forms and data display tables.
* Include instructions for setting up the PostgreSQL database (e.g., using Docker or a hosted service) and configuring Clerk environment variables.
* The output should be a complete Next.js project structure with example code for each core functionality (schema, API, pages, components).