92 lines
5.0 KiB
Markdown
92 lines
5.0 KiB
Markdown
|
# 🍳 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](https://github.com/darkroomengineering/lenis) for premium, inertia-driven page physics.
|
|||
|
|
- **Animations**: [GSAP (GreenSock Animation Platform)](https://greensock.com/gsap/) 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:
|
|||
|
|
```bash
|
|||
|
|
cp .env.example .env
|
|||
|
|
```
|
|||
|
|
2. Open `.env` and fill in your actual **Firebase project settings** (API keys, project identifier, authentication domain, etc.):
|
|||
|
|
```env
|
|||
|
|
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:
|
|||
|
|
```bash
|
|||
|
|
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:///.agents/TODO.md) file.
|
|||
|
|
Architectural learnings, conventions, and configuration updates are maintained in the central knowledge base: [.agents/brain.md](file:///.agents/brain.md).
|