# Create an empty multi-age app

I want to create "Recipes" app to publish cooking recipes online.
  - Use multi-page structure: each app screen is a separate page with a different URL.
  - Use modular design to enhance maintainability: the app is composed of modular components, each with a well-defined responsibility and minimal dependencies.
  - Technologies: TypeScript, React, Vite, Tailwind, Supabase.

I want to build the app step-by-step. Let's start with the first step:
  - Create an empty multi-page app with modular component structure: header, home page, footer.
  - Keep the home page empty at the start.


# Connect to Supabase

Connect the app to Supabase.


# Implement auth: users, register, login, logout, profile

Implement authentication in Supabase.
  - Implement users, registration, login, logout.
  - Implement edit profile + change password.
  - Users should have full name + email + password.
  - Keep user profile data in `user_metadata` field. Don't create separate user profiles table!
  - Use separate pages for login / register / profile.


# Implement admins

Implement admins users.
  - Users can be either normal users or admin users.
  - Visitors and normal users see the default home page after login.
  - Admins see the admin dashboard page after login (keep it empty as the start).
  - Keep `is_admin` flag in `app_metadata` in Supabase. Don't create additional tables!


# App setup: create the initial admin

Implement creating the first admin user initially in Supabase.
  - This is a one-time action: should be invoked only once in the app lifetime.
  - Show "Create Admin User" button at the home page.
    - When the button is clicked, ask for email + password and register the admin.
    - Hide permanently the button after the admin is successfully registered.
  - Use an edge function to register the admin, only if no admins already exist in Supabase.


# Visitors view / search recipes

Implement view / search recipes.
  - Visitors (without login) can view all published recipes, search by keyword, and view recipe details.
  - Display the recipes directly at the front page (front page and browse recipes should be the same page).
  - Use a separate page to display recipe details (not a popup). Recipes should be shareable by URL.
  - A recipe should keep in the database: title, ingredients, instructions.
  - Initially insert into the DB a few sample recipes.
  - Keep modular app structure: split appropriately the above logic into components.


# Submit and publish recipes

Implement the recipe publishing process: users submit new recipes for review, admins approve / reject them later.
  - Recipes should have an author (owner): existing user (non-required).
  - Recipes should have a state: for review / published / rejected (required).
  - Users submit new recipes for review.
    - Create a separate page "Add Recipe" to submit a recipe.
    - Create a separate page "My Recipes" to view user's own recipes.
    - Add menu links for these pages.
  - Admins publish / reject submitted recipes.
    - Create a separate page to administer recipes: waiting for review (first section), published (second section), rejected (third section).
    - Add a link to the recipe administration page in the Admin dashboard.


# Fix bug: incorrect is_admin check in RLS

Fix `is_admin` check in the RLS policies in Supabase.
  - The correct way to check for admin role in RLS is like this:
  auth.jwt() -> 'app_metadata' ->> 'is_admin'
  - Don't select from `auth.users` in the RLS policy --> it needs permissions


# Users view / edit / delete their own recipes

Implement add / edit / delete recipe in the "My Recipes" page.
  - After edit, a recipe should go for review (one more time).
    - To implement this, use a database trigger after recipe add / edit to change the state to "for review", unless current user is admin.
    - The trigger ensures that when normal users create / edit a recipe, it goes for review.
    - The trigger ensures that users cannot self-approve their recipes.
    - In the same time admins will be allowed to freely edit recipes and change their state.
  - Implement the delete confirmation with popup.


# Admins manage recipes

Implement edit / delete recipes in the admin panel.
  - Admins should be able to view / edit / delete all recipes.
  - Admins should be able to approve / reject pending recipes.


# Implement photos

Add photos to recipes.
  - Users can view / upload / delete photos for their own recipes.
  - Admins can view / upload / delete recipe photos.
  - Use tabs [Details | Photos] in the recipe add / edit component
  - Support common image formats for the web: PNG, JPG, WebP
  - Limit upload file size to 1 MB
  - Display the first (main) photo as cover image when browsing the recipe catalog.
  - Visualize all recipe photos in the recipe details page.
  - Photos should be stored in Supabase storage.
