🍰 Fufu Atelier

Fufu Atelier is a production-grade, mobile-first e-commerce PWA built for a real-world local bakery in London, Ontario. It transforms complex custom cake ordering into an intuitive, Awwwards-style interactive experience, backed by React, Framer Motion, and a Supabase headless architecture.

Note: To comply with strict PII protection and PIPEDA regulations, the full repository is kept private. This showcase contains selected view and logic layers to demonstrate architectural decisions.

---

📖 The Problem & Solution

Context: The client (a local home bakery) struggled with high communication costs. Customers needed guidance on sizing, flavors, and design constraints, leading to endless back-and-forth messaging on WeChat.

The Solution: Fufu Atelier is not just a storefront; it's a digital concierge.

• For Customers: A gamified, step-by-step customization flow that feels like a native app.
• For the Business: An admin dashboard to manage inventory, track orders, and enforce business rules (e.g., "Soft flavors cannot be double-stacked").

---

✨ Key Technical Highlights

1. Mobile-First "Fixed Body" Strategy

To replicate a native iOS app feel on the web, standard scrolling wasn't enough. I implemented a custom Fixed Body Strategy to solve the notorious "scroll chaining" and "overscroll" issues on Safari.

• Logic: When a modal opens, the window scroll position is frozen and calculated dynamically to prevent the background from jumping to the top.
• Result: A rock-solid, app-like modal experience.

2. Awwwards-Level Micro-Interactions

Every tap provides feedback. I utilized Framer Motion to create "Delightful UX":

• Delayed Satisfaction: Selection inputs have a calculated 600ms delay with a "drawing underline" animation to let the user visually confirm their choice before auto-advancing.
• Long-Press Mechanics: The Hero section uses a "Charge & Teleport" interaction (long-press to enter) to prevent accidental clicks and add playfulness.

3. Smart Business Logic Integration

The app acts as a gatekeeper for production constraints:

• Constraint Injection: The StepLayers component dynamically disables the "Double Height" option if a structurally soft flavor (e.g., Taro Paste) is selected.
• Silent Validation: The StepDateTime component uses silent haptic feedback (Vibration API) instead of annoying alert boxes when users pick invalid dates.

4. High-Precision Shipping Engine

Implemented a custom algorithm (shippingUtils.js) specifically for the London, Ontario geography.

• Logic: Parses Canadian Postal Codes (FSA + LDU) to calculate distance-based fees with sector-level precision (e.g., distinguishing N6G 5 from standard N6G).

---

🛠️ Tech Stack

• Frontend: React 18, Vite, Tailwind CSS
• Animation: Framer Motion (Complex gestures, shared layout animations)
• State Management: React Context API + Custom Hooks (Logic separated from UI)
• Backend / DB: Supabase (PostgreSQL, Realtime subscriptions)
• Internationalization: i18next (English / Chinese support)
• Deployment: Vercel

---

🚀 Running Locally

This project uses Vite for lightning-fast development.

1. Clone the repo

   git clone [https://github.com/your-DesmondL-dev/fufu-cake-studio.git](https://github.com/your-DesmondL-dev/fufu-cake-studio.git)

2. Install dependencies

   npm install

3. Set up Environment Variables Set up Environment Variables Create a .env file in the root directory:

   VITE_SUPABASE_URL=your_supabase_url
   VITE_SUPABASE_ANON_KEY=your_supabase_anon_key
   

4. Start the dev server

   npm run dev

📂 Project Structure

I follow a strict Domain-Driven and Logic/View Separation architecture:

src/
├── components/
│   ├── ui/              # Dumb UI components (Buttons, Titles)
│   ├── layout/          # Layout wrappers (Navbar, Footer, CartDrawer)
│   ├── customize_steps/ # The core customization wizard logic
│   └── ...
├── hooks/               # Custom hooks (All business logic lives here)
│   ├── useAdminLogic.js
│   ├── useCartLogic.js
│   └── ...
├── services/            # API calls and external utilities
└── context/             # Global state providers

<p align="center">
Made with ❤️ in London, Ontario.
</p>