🍝 FLAVR — Interactive Culinary Experience Platform

A high-end, full-stack recipe finder with 3D animations, GSAP parallax, and a complete Admin CRUD dashboard.

---

🚀 Quick Start

Prerequisites

• Node.js v18+ (https://nodejs.org)
• npm v9+

1. Install dependencies

npm install

2. Run in development (Frontend + Backend together)

npm run dev

This starts:

• React (Vite) at → http://localhost:5173
• Express API at → http://localhost:3001

3. Run separately (optional)

# Frontend only
npm run dev:client

# Backend only
npm run dev:server

---

📁 Project Structure

flavr/
├── index.html                  # Root HTML
├── vite.config.js              # Vite + API proxy config
├── tailwind.config.js          # Tailwind theme (custom colors/fonts)
├── src/
│   ├── App.jsx                 # Router + page transitions + loader
│   ├── main.jsx                # React entry point
│   ├── index.css               # Global styles + keyframes
│   ├── components/
│   │   ├── CustomCursor.jsx    # Framer Motion lagging-ring cursor
│   │   ├── Loader.jsx          # Animated loading screen
│   │   ├── Navbar.jsx          # Fixed nav with scroll detection
│   │   ├── RecipeCard.jsx      # 3D Tilt card (Framer Motion)
│   │   ├── Marquee.jsx         # Infinite scrolling strip with food photos
│   │   └── Stats.jsx           # Animated counter stats section
│   ├── context/
│   │   └── RecipeContext.jsx   # Global state (search, filters, CRUD)
│   ├── data/
│   │   └── recipes.js          # 18 seed recipes with full metadata
│   ├── hooks/
│   │   ├── useMousePosition.js # Mouse position tracking hook
│   │   └── useScrollReveal.js  # IntersectionObserver scroll reveals
│   ├── pages/
│   │   ├── Home.jsx            # Hero + Search + Featured + Categories
│   │   ├── Gallery.jsx         # Filterable recipe library
│   │   └── AdminDashboard.jsx  # CRUD admin panel
│   └── server/
│       └── index.js            # Express REST API (CRUD + search)

---

🎨 Features

Visual & Animations

• 3D Floating Hero Cards — 6 food photos that float and respond to mouse via GSAP
• Custom Cursor — Framer Motion lagging-ring that expands on hover
• Loader Screen — Animated progress bar with staggered text
• 3D Card Tilt — Every recipe card tilts in 3D with a light shine effect (Framer Motion)
• Scroll Reveals — Elements fade/slide in via IntersectionObserver
• Marquee Strip — Infinite auto-scroll with real food photos; pauses on hover
• Animated Counters — Stats count up when scrolled into view
• Parallax — GSAP-driven hero depth scrolling
• Page Transitions — Smooth fade/slide between routes (Framer Motion)

Frontend Functionality

• Live Search — Instant keyword filtering across all 18 recipes
• Filter Chips — Cuisine, diet, time filters that stack as removable chips
• Sort Options — Sort by rating, price, or cook time
• Responsive — Mobile-first, works on all screen sizes

Backend / Admin

• REST API — Express server with full CRUD
• Admin Table — View all 18 recipes with inline edit/delete
• Create Form — Add new recipes with full metadata + live image preview
• Edit Form — Update any field with pre-filled form
• Delete Confirmation — Modal confirmation before deletion
• Toast Notifications — Success/error feedback after actions

---

🔌 API Endpoints

Method	Path	Description
GET	/api/recipes	List all recipes
GET	/api/recipes/:id	Get single recipe
POST	/api/recipes	Create new recipe
PUT	/api/recipes/:id	Update recipe
DELETE	/api/recipes/:id	Delete recipe
GET	/api/health	Server health check

Query params for GET /api/recipes:

• ?q=pasta — search by name/cuisine/tag
• ?cuisine=Italian — filter by cuisine
• ?diet=Vegan — filter by diet

---

🧱 Tech Stack

Layer	Technology
Frontend	React 18 + Vite
Styling	Tailwind CSS v3
Animations	Framer Motion + GSAP
Routing	React Router v6
State	React Context API + useReducer
Backend	Node.js + Express
Photos	Unsplash (free, no API key)

---

🎯 Pages

Route	Description
/	Home — Hero, Search, Featured, Categories
/gallery	All 18 recipes with filters and sort
/admin	Admin CRUD dashboard (no auth required)

---

💡 Customization Tips

• Add auth to admin: Wrap /admin route with a <ProtectedRoute> component checking a JWT/session
• Persist data: Replace the in-memory array in server/index.js with MongoDB/Prisma
• More recipes: Add items to src/data/recipes.js following the same schema
• Image uploads: Integrate Cloudinary for real image hosting instead of Unsplash URLs

---