oshogbian/234farmersmarket

234 Farmers Market — premium African essentials e-commerce # 234 Farmers Market A 3D-animated e-commerce frontend for **234 Farmers Market** — premium African dry goods delivered worldwide. ## Features - **3D Hero** — Floating branded delivery box with product packages (React Three Fiber) - **Build Your Own Box** — Interactive three-panel builder with live cart, weight/price tracking, and 3D drop animations - **Product Catalog** — 5 core products across proteins, staples, and spices with search and filters - **Mobile Support** — Tabbed builder layout, 2D fallback when WebGL unavailable - **Accessibility** — Reduced motion support, semantic HTML, aria-live cart updates ## Tech Stack - Vite + React 18 + TypeScript - Three.js + React Three Fiber + Drei - Zustand (cart state) - React Router v6 - Tailwind CSS v4 ## Getting Started ```bash npm install npm run dev ``` Open localhost. ## Build ```bash npm run build npm run preview ``` ## Firebase Backend The app uses **Firebase** for products, authentication, and orders. See firebase/README.md for full setup instructions. ```bash cp .env.example .env # Add your Firebase web app credentials, then: npm run dev ``` **Firestore collections:** `products`, `orders`, `users` **Features when connected:** - Product catalog loaded from Firestore (falls back to mock data if empty/unconfigured) - Email/password sign up & sign in - Place orders at checkout (saved to Firestore) - View order history at `/orders` Payment (Paystack/Stripe) can be added later via Firebase Cloud Functions. ## Project Structure ``` src/ ├── components/ │ ├── auth/ # AuthModal │ ├── builder/ # BoxSummary sidebar │ ├── layout/ # Header, Footer, Layout │ ├── three/ # HeroScene, BuilderScene, 3D models │ └── ui/ # Button, Pill, ProductCard ├── context/ # AuthProvider ├── data/ # Mock product fallback ├── hooks/ # Media query, WebGL, reduced motion ├── lib/ # Firebase initialization ├── pages/ # Home, …