Your task is to develop a comprehensive, full-stack MVP for a personal finance application called 'Meal Budget Buddy'. The application helps users track their food spending, plan meals, manage grocery lists, and stick to a budget, specifically focusing on reducing reliance on delivery services and increasing home cooking. The application must be built using Next.js 14 with the App Router, a multi-page architecture, Tailwind CSS for styling, Drizzle ORM for database interactions, and a robust API layer for all CRUD operations. Implement secure user authentication.
1. Project Setup:
* Initialize a Next.js 14 project with TypeScript.
* Configure Tailwind CSS.
* Set up Drizzle ORM with a PostgreSQL database adapter (use a local development setup or simulate if full connection not possible for AI).
* Integrate NextAuth.js for authentication (email/password provider is sufficient for MVP).
2. Database Schema (Drizzle ORM):
Define the following tables with appropriate fields, primary keys, foreign keys, and indices.
* `users`: id (uuid), email (unique), passwordHash, name, subscriptionStatus (enum: 'free', 'premium'), createdAt, updatedAt.
* `transactions`: id (uuid), userId (FK to users.id), amount (numeric), category (enum: 'groceries', 'restaurant', 'delivery', 'other_food'), description, date (date), createdAt.
* `mealPlans`: id (uuid), userId (FK to users.id), planDate (date, e.g., start of week), mealsJson (jsonb for {day: string, breakfast: string, lunch: string, dinner: string, snacks: string}), createdAt.
* `recipes`: id (uuid), userId (FK to users.id, nullable for public recipes), name, ingredientsJson (jsonb for [{item: string, quantity: string, unit: string}]), instructions (text), imageUrl (nullable), prepTimeMinutes (int), cookTimeMinutes (int), category (enum: 'breakfast', 'lunch', 'dinner', 'dessert', 'snack', 'other'), createdAt.
* `groceryLists`: id (uuid), userId (FK to users.id), mealPlanId (FK to mealPlans.id, nullable), itemsJson (jsonb for [{recipeId: uuid (nullable), ingredientName: string, quantity: string, unit: string, isBought: boolean}]), createdAt, updatedAt.
* `budgets`: id (uuid), userId (FK to users.id), month (int), year (int), category (enum: 'food', 'housing', 'transportation'), allocatedAmount (numeric), spentAmount (numeric, calculated), createdAt, updatedAt.
3. API Routes (App Router - `/app/api`):
Implement RESTful API endpoints for each major entity, ensuring full CRUD (Create, Read, Update, Delete) functionality.
* `/api/auth/[...nextauth]` for authentication.
* `/api/users`: GET (get current user), PUT (update user profile).
* `/api/transactions`: GET (list transactions for user, with filters), POST (add transaction), GET `/:id` (get single transaction), PUT `/:id` (update transaction), DELETE `/:id` (delete transaction).
* `/api/meal-plans`: GET (list meal plans), POST (create meal plan), GET `/:id`, PUT `/:id`, DELETE `/:id`.
* `/api/recipes`: GET (list recipes, public + user's), POST (add recipe), GET `/:id`, PUT `/:id`, DELETE `/:id`.
* `/api/grocery-lists`: GET (list grocery lists), POST (create grocery list, optionally from meal plan), GET `/:id`, PUT `/:id`, DELETE `/:id`.
* `/api/budgets`: GET (list budgets for user), POST (create/update budget for a month/category), GET `/:id`, PUT `/:id`, DELETE `/:id`.
4. UI Pages (App Router - `/app`):
Create dedicated pages for each main section, ensuring a multi-page application feel.
* `/`: Landing page (marketing style, call to action to sign up/login).
* `/auth/login`, `/auth/register`: Authentication pages.
* `/dashboard`: User's main dashboard showing spending summaries, budget overview, quick links to meal plans.
* `/transactions`: Page to view, filter, and manage all financial transactions.
* Implement a form for adding new transactions.
* Display transactions in a sortable/filterable table.
* `/meal-plans`: Page to view, create, and manage weekly meal plans.
* Calendar-like view for meal plans.
* Form for creating/editing a meal plan.
* `/recipes`: Page to browse recipes, add new recipes.
* Recipe list with search/filter.
* Detailed recipe view.
* Form for creating/editing a recipe.
* `/grocery-lists`: Page to view and manage grocery lists.
* List display with checkboxes for items.
* Functionality to generate list from a meal plan.
* Form for adding/editing items manually.
* `/budgets`: Page to set and track budgets for different categories, especially food.
* Form for setting monthly budgets.
* Visual representation of budget vs. actual spending.
* `/settings/profile`: User profile management.
5. State Management:
Utilize React's `useState` and `useContext` (if needed for global auth state) for client-side state, and server actions/API calls for data fetching and mutation.
6. User Experience & Design:
* Employ Tailwind CSS for a clean, modern, and responsive design.
* Ensure intuitive navigation.
* Provide clear feedback on user actions (e.g., success messages, error handling).
7. Key Functionality Details:
* Transaction Categorization: On new transaction, categorize based on keywords or user input. Allow users to re-categorize.
* Meal Plan to Grocery List: A button on the meal plan page should generate a new grocery list based on the ingredients from the selected recipes, consolidating quantities for the same items.
* Budget Tracking: Automatically update `spentAmount` in `budgets` table based on `transactions` for the relevant month/category.
Focus on creating a functional, full-stack MVP with well-defined database interactions, API routes, and a multi-page user interface, ready for a production environment. Do not just create a landing page or a single-page application. Provide the full code structure including `app` directory, Drizzle schema, API routes, and example UI components.