🍳 FlixCooks – Premium Culinary Experience

Welcome to FlixCooks, a high-end, immersive recipe web application built on vanilla technologies. Drawing aesthetic inspiration from state-of-the-art luxury design concepts (such as Floema, Capitolium, and fromanother), FlixCooks marries gorgeous visual design with swift, lightweight performance.

---

🏛️ Codebase Architecture

The project is architected to remain extremely lightweight and fast, intentionally bypassing heavy frameworks in favor of a clean, optimized vanilla stack.

Core Structure

• Root Pages:
  • index.php: The atmospheric landing page showcasing featured recipe selections, introducing the brand, and housing the Sleek Swipe Discovery Carousel.
  • recipe.php: The immersive recipe detail page, featuring floating macro-nutrition widgets, interactive ingredients lists, and the fullscreen Step-by-Step Cooking Mode.
  • admin.php: A custom, lightweight CMS/admin dashboard allowing full CRUD capabilities over the recipe database, dynamic ingredient line parsing, cooking timers, and video URL associations.
  • login.php & register.php: Fully responsive, glassmorphic auth portals powered by Firebase.
• Support & Layouts:
  • partials/: Contains modular templates (head.php, header.php, footer.php) to maintain a clean DRY structure.
  • helpers.php: Core PHP utilities containing data formatting helpers and the data access layer for the flat-file database.
  • config.php: Environment-independent configuration loader which reads runtime secrets from .env.
  • api/: Lightweight, stateless backend endpoints supporting AJAX operations (e.g., newsletter subscriptions, bookmarks, recommendation queries).
  • data/: Houses recipes.json, our flat-file recipe database.

---

💻 Tech-Stack

FlixCooks uses a modern, carefully curated vanilla tech-stack focused on lightning-fast speed, dynamic transitions, and pristine responsive aesthetics.

🎨 Frontend & Design Systems

• Core Structure: Semantic HTML5 & Vanilla PHP layout templates.
• Styling: Vanilla CSS leveraging custom properties (CSS variables), clamp() functions for seamless fluid typography and spacing, asymmetric layouts (FloemaLayoutGrid 24-column grid), and modern glassmorphism overlay styles.
• Smooth Scrolling: Lenis Smooth Scroll for premium, inertia-driven page physics.
• Animations: GSAP (GreenSock Animation Platform) and ScrollTrigger for advanced storytelling, pinned sequences, and micro-interactions.
• Fonts: Elegantly paired fonts (Playfair Display for headings and modern, geometric Manrope for high-readability body copy).

⚙️ Backend & Data

• Engine: Vanilla PHP.
• Database: Flat-file JSON database (data/recipes.json), allowing lightning-quick load times and simple structural schemas without heavy overhead.
• Environment: Custom .env variable parser integrated into PHP bootstrap.

🔒 Integrations & Cloud Services

• Firebase Authentication: Client and server-side synchronized user sessions for profile management.
• Firebase Firestore: Real-time database managing newsletter subscribers and user bookmarks/favorites lists.

---

🚀 Local Development Setup

Follow these simple steps to spin up the local development environment.

Prerequisites

Make sure you have the following installed on your local machine:

• PHP (v7.4 or higher recommended)
• A modern web browser

1. Set Up Environment Variables

1. Duplicate the template environment file:

   cp .env.example .env
   

2. Open .env and fill in your actual Firebase project settings (API keys, project identifier, authentication domain, etc.):

   FIREBASE_API_KEY="AIzaSyYourApiKeyHere"
   FIREBASE_AUTH_DOMAIN="flixcooks-your-project-id.firebaseapp.com"
   ...
   

2. Start the Development Server

Option A: PHP Built-in Web Server (Recommended & Easiest)

You do not need to install complex local servers like Apache or Nginx. Simply run the following command in the root folder of the project:

php -S localhost:8000

Then, open your browser and navigate to:

http://localhost:8000

Option B: Local Apache Environments (XAMPP / MAMP / WAMP)

If you prefer running a full local stack:

1. Move or link the project directory inside your local server's document root (e.g., htdocs or www).
2. Ensure URL rewriting is enabled (the included .htaccess file handles caching and custom redirections).
3. Access the site via your custom local virtual host (e.g., http://localhost/flixcooks-website).

---

📈 Development Tracking & Progress

All current development tasks, features, and roadmaps are actively tracked and updated in the project’s .agents/TODO.md file. Architectural learnings, conventions, and configuration updates are maintained in the central knowledge base: .agents/brain.md.