Coffeediction

A specialty Indian coffee e-commerce platform showcasing premium coffees with subscription options and seamless Google authentication.

Features

• 🌍 Browse specialty coffees from across India
• 🛒 Add items to cart and checkout
• ☕ Create personalized coffee subscriptions with periodic delivery
• 🔐 Google Sign-in authentication
• 📱 Responsive design
• 🎨 Modern UI with TailwindCSS
• 📚 Content-driven experience with Contentstack CMS

Tech Stack

• Framework: React Router v7 with Server-Side Rendering (SSR)
• Build Tool: Vite
• Styling: TailwindCSS v4
• CMS: Contentstack (Headless CMS for content delivery)
• Authentication: Firebase with Google Sign-in
• Database: Cloud Firestore for user subscriptions
• Language: TypeScript

Getting Started

Prerequisites

• Node.js 22+
• npm or yarn

Installation

npm install

Environment Setup

Create a .env file in the root directory with the following variables:

# Contentstack CMS
CONTENTSTACK_API_KEY=your_contentstack_api_key
CONTENTSTACK_DELIVERY_TOKEN=your_contentstack_delivery_token
CONTENTSTACK_MANAGEMENT_TOKEN=your_contentstack_management_token
CONTENTSTACK_PREVIEW_TOKEN=your_contentstack_preview_token
CONTENTSTACK_ENVIRONMENT=your_contentstack_environment

# Firebase Configuration (client-side, prefixed with VITE_)
VITE_FIREBASE_API_KEY=your_firebase_api_key
VITE_FIREBASE_AUTH_DOMAIN=your_project.firebaseapp.com
VITE_FIREBASE_PROJECT_ID=your_project_id
VITE_FIREBASE_APP_ID=your_firebase_app_id
VITE_FIREBASE_STORAGE_BUCKET=your_project.appspot.com
VITE_FIREBASE_MESSAGING_SENDER_ID=your_messaging_sender_id
VITE_FIREBASE_MEASUREMENT_ID=your_measurement_id

# Contentstack Personalize
VITE_PERSONALIZE_PROJECT_UID=your_personalize_project_uid

Firebase Setup

1. Go to Firebase Console and select your project
2. Go to Project Settings (gear icon) → General tab
3. Copy your web app's Firebase SDK config to .env (VITE_* variables)
4. Enable Cloud Firestore in the console
5. Set Firestore security rules:

   rules_version = '2';
   service cloud.firestore {
     match /databases/{database}/documents {
       match /subscriptions/{userId} {
         allow read, write: if request.auth.uid == userId;
       }
       match /{document=**} {
         allow read, write: if false;
       }
     }
   }
   

Development

Start the development server with HMR:

npm run dev

Your application will be available at http://localhost:5173.

Other Commands

# Type check TypeScript and generate types
npm run typecheck

# Production build
npm run build

# Start production server
npm start

# Initialize Contentstack CMS
npm run init-contentstack

# Initialize roasteries in CMS
npm run init-roasteries

# Initialize coffee products in CMS
npm run init-coffee-products

Project Structure

app/
├── routes/              # React Router pages (file-based routing)
│   ├── home.tsx        # Homepage
│   ├── browse.tsx      # Product browse page
│   ├── browse.$uid.tsx # Product detail page
│   └── login.tsx       # Google login page
├── components/         # Reusable React components
├── lib/               # Utilities and helpers
│   ├── contentstack.ts # CMS integration
│   ├── firebase.ts    # Firebase initialization
│   └── auth.ts        # Authentication utilities
├── entry.server.tsx   # Server entry point for SSR
├── root.tsx          # Root layout component
└── app.css           # Global styles

public/               # Static assets
build/               # Production output (generated)

Code Style & Conventions

• Language: TypeScript (strict mode)
• Imports: ES modules with path alias ~/* for app directory
• Components: Functional React components with hooks
• Types: Full TypeScript type annotations
• Naming: camelCase for functions/variables, PascalCase for components
• Formatting: Clean, readable code (consider adding Prettier)

Authentication

The app uses Firebase with Google Sign-in. Users can:

1. Click the "Login" button in the header
2. Sign in with their Google account
3. Automatically create/link their account
4. Use their authenticated session throughout the app

Building for Production

Create a production build:

npm run build

Deployment

Deploy the output of npm run build:

├── package.json
├── build/
│   ├── client/    # Static assets
│   └── server/    # Server-side code

Repository

• GitHub: vishy1618/coffeediction