GlassCart — Full Project Overview

This is the master reference for the GlassCart e-commerce project. Read this first, then dive into the specific guides.

---

What is GlassCart?

GlassCart is a glassmorphism-themed e-commerce storefront built with React 19 + TanStack Start + Tailwind CSS. It features:

• Frosted-glass UI with backdrop blur and neon violet/cyan accents
• Product catalog with 8 seeded demo items
• Shopping cart with quantity controls
• User authentication (email/password + Google OAuth ready)
• Admin dashboard for product CRUD and stock management
• Order history and checkout flow
• Swappable API layer — runs on mock data or connects to your own backend

---

Project Architecture

┌─────────────────────────────────────────┐
│           Frontend (React)              │
│     TanStack Start + Tailwind CSS       │
│              localhost:5173               │
└──────────────────┬──────────────────────┘
                   │
      ┌────────────┴────────────┐
      │     API Seam Layer      │
      │  src/lib/api/client.ts  │
      │    Mock  ← →  HTTP      │
      └────────────┬────────────┘
                   │
      ┌────────────┴────────────┐
      │     Your Backend        │
      │  Express/MongoDB OR     │
      │  Django/DRF/PostgreSQL  │
      └─────────────────────────┘

The frontend is backend-agnostic. It ships with a complete mock implementation that stores data in localStorage, so you can develop the UI without any backend running. When you're ready, flip two environment variables and it talks to your real API.

---

Documentation Index

Document	What You'll Learn
BACKEND_INTEGRATION.md	Complete backend API contract, Express + MongoDB setup, Django + DRF setup, Google OAuth wiring, and the exact data types your backend must implement.
LOCAL_DEVELOPMENT.md	How to clone, install dependencies, run the dev server in mock mode, run with a real backend, IDE setup (VS Code extensions, settings, debug config), and common development tasks.
DEPLOYMENT.md	How to deploy the frontend (Lovable Cloud, Vercel, Netlify) and backend (Railway, Render, Heroku, PythonAnywhere), database hosting options, environment variable configuration, custom domains, and a post-deployment checklist.

---

Quick Start (3 Minutes)

1. Run Frontend Only (Mock Mode)

cd CodeAlpha_GlassCart/frontend
bun install
bun dev
# Open http://localhost:5173

2. Run With Your Backend

# Terminal 1 — Backend
cd CodeAlpha_GlassCart/backend
npm install && npm run dev        # Express on :5000
# OR
python manage.py runserver       # Django on :8000

# Terminal 2 — Frontend
cd CodeAlpha_GlassCart/frontend
echo "VITE_API_MODE=http\nVITE_API_BASE_URL=http://localhost:5000" > .env
bun dev

3. Deploy to Production

1. Deploy backend → get URL (e.g., https://glasscart-api.up.railway.app)
2. Deploy frontend → set VITE_API_BASE_URL to backend URL
3. Done! See DEPLOYMENT.md for platform-specific steps.

---

Tech Stack

Layer	Technology
Framework	TanStack Start v1 (React 19 + file-based routing + SSR)
Styling	Tailwind CSS v4 + custom glassmorphism utilities
Components	shadcn/ui primitives (Dialog, Button, Input, etc.)
State	React useSyncExternalStore (no Redux/Zustand needed)
Icons	Lucide React
Build	Vite 7
Backend Options	Express + MongoDB OR Django + DRF + PostgreSQL

---

Key Design Decisions

1. Mock-first development — The entire app works without a backend. This lets you iterate on UI/UX independently.
2. Single switch to real API — One env var (VITE_API_MODE=http) swaps all mock calls to HTTP.
3. JWT via localStorage — The frontend stores the JWT token in localStorage and sends it as Authorization: Bearer <token> on every authenticated request.
4. Client-side cart — Cart state lives in the browser (no backend calls until checkout). This keeps the app snappy.
5. File-based routing — TanStack Start automatically registers routes from files in src/routes/. No route config file to maintain.

---

Folder Structure (At a Glance)

CodeAlpha_GlassCart/
├── docs/
│   ├── BACKEND_INTEGRATION.md   ← Build your backend
│   ├── LOCAL_DEVELOPMENT.md     ← Work in your IDE
│   ├── DEPLOYMENT.md            ← Ship to production
│   └── README.md                ← This file
│
├── backend/                     ← YOUR backend (Express or Django)
│   └── (see BACKEND_INTEGRATION.md for full structure)
│
└── frontend/                    ← The Lovable/TanStack Start frontend
    ├── src/
    │   ├── components/            # Header, ProductCard, CartDrawer
    │   ├── lib/api/               # API seam — the backend bridge
    │   ├── routes/                # Pages (TanStack file-based routing)
    │   └── styles.css             # Glassmorphism design system
    ├── .env                       # API mode + base URL (not in git)
    └── package.json

---

Contributing / Extending

Want to add payment processing?

1. Install Stripe:

   bun add @stripe/stripe-js

2. Create a checkout route: src/routes/checkout.tsx
3. In your backend, add a Stripe webhook handler
4. See DEPLOYMENT.md for webhook endpoint setup

Want to add search/filter?

1. Add a search input to src/routes/index.tsx
2. Filter the listProducts() result client-side (mock) or add query params to /api/products?search=... (HTTP)
3. Backend: add ?search= handling to the product list controller

Want to add reviews?

1. Add a Review model to your backend
2. Add GET /api/products/:id/reviews and POST /api/products/:id/reviews
3. Create src/components/Reviews.tsx
4. Add it to src/routes/product.$id.tsx

---

License

This project was built as part of the CodeAlpha internship task. You are free to use, modify, and deploy it for your submission.

---

Need Help?

1. Check the specific guide for your question:
   • Backend code → BACKEND_INTEGRATION.md
   • Local dev setup → LOCAL_DEVELOPMENT.md
   • Deploying live → DEPLOYMENT.md
2. Check browser DevTools → Network tab for API errors
3. Check backend logs for server-side errors
4. Verify environment variables match between frontend and backend