RoohVeere: Production-Grade E-Commerce Architecture

RoohVeere by Sirishti Chhabria is a high-performance, live e-commerce platform engineered for a lifestyle brand. This project marks my first full-stack deployment, transitioning from a conceptual build to a stable, user-facing product supporting real-world marketing and sales cycles.

Engineering Decisions

• Astro Framework (SSR via Vercel): I chose Astro for its "Islands Architecture" — pages render on the server and only the interactive parts (cart drawer, product gallery, review form) hydrate on the client via Alpine.js. The result is a server-rendered storefront with predictable SEO and fast first paint, while keeping interactive surfaces snappy.
• Firebase Firestore (Backend & DB): I use Firestore through two SDKs — the Web SDK for client-side reads and the Admin SDK (server-only, behind Astro API routes) for privileged writes like order creation and coupon redemption. Firestore's managed scaling absorbs traffic spikes from marketing launches without ops overhead.
• Collaborative Development: Built in partnership with Sirishti Chhabria, this project involved more than just coding; it required coordinating technical requirements with brand identity and marketing strategies.

---

The "First Deployment" Challenge

The most significant learning curve in this project wasn't the code, but the Production Lifecycle.

Transitioning RoohVeere to a live environment taught me the importance of:

1. Environment Configuration: Managing sensitive API keys (Firebase Admin service account, EmailJS) and Firestore security rules across development and production environments.
2. Asset Delivery: Serving high-resolution lifestyle imagery from public/ over Vercel's CDN — a deliberate trade-off for shipping speed, with image optimization (Astro <Image> / responsive srcset) flagged as the next perf win.
3. Real-User Feedback: Monitoring the live application for edge-case UI bugs and database latency, teaching me that "done" only happens after the first user successfully navigates the site.

---

Engineering Audit & Roadmap

While the current architecture is stable and performing well, a technical audit reveals the following growth paths as the platform scales:

1. Headless CMS Integration: Product data currently lives in a static src/data/products.json checked into the repo, which is fine for a small catalog but becomes a bottleneck as the brand grows. I can migrate the catalog to a Headless CMS (Sanity or Contentful) so non-technical partners can manage inventory without a code deploy.
2. Payment Gateway Integration: Today the checkout flow persists the order to Firestore and then deep-links the customer into WhatsApp with a pre-filled order summary for manual confirmation and Cash-on-Delivery. We can layer Stripe or a local processor on top, with webhook-driven order status transitions, so payment can complete inside the site.
3. Server-side Order Validation: The current /api/save-complete-order route trusts client-supplied prices and totals. To fix this, the system would recompute item prices and totals on the server from the canonical product catalog before persisting the order, eliminating a class of tampering vectors.

---

Tech stack

• Framework: Astro 5 (server output, deployed on Vercel)
• Styling: Tailwind CSS + container queries plugin
• Interactivity: Alpine.js (loaded via CDN)
• Backend: Firebase Firestore — client SDK for reads, Admin SDK for writes via Astro API routes
• Email: EmailJS
• Validation: Zod

---

Impact

• Live Deployment: Successfully launched and maintained with real-world user traffic.
• Portfolio Integration: Serves as the primary evidence of my "Ship-First" engineering mindset.

Project structure

src/
├── components/    # Astro components (Header, Footer, ReviewForm, ReviewList)
├── data/          # Static product catalog (products.json)
├── layouts/       # Layout.astro — shared <head>, scripts, meta
├── lib/           # Firebase client + admin initialization
├── pages/
│   ├── api/       # SSR endpoints: submit-review, save-complete-order
│   ├── product/   # Dynamic [id].astro product detail page
│   └── index.astro
├── styles/        # Tailwind entry + global CSS
└── utils/         # Review schema, helpers
public/
├── js/            # Cart, product page, lightbox, image-fade scripts (vanilla + Alpine)
└── images/        # Brand and product photography

Getting started

Prerequisites

• Node.js 18+
• A Firebase project with Firestore enabled
• (Optional) A Vercel account for deployment

Setup

# 1. Install dependencies
npm install

# 2. Copy env template and fill in your Firebase credentials
cp .env.example .env

# 3. Run the dev server
npm run dev

The dev server starts on http://localhost:4321.

Environment variables

See .env.example. Two sets of credentials are required:

• PUBLIC_FIREBASE_* — Web SDK config, safe to ship to the browser. Get these from Firebase Console → Project Settings → Your apps.
• FIREBASE_PROJECT_ID / FIREBASE_CLIENT_EMAIL / FIREBASE_PRIVATE_KEY — Admin SDK service account, server-only. Generate from Firebase Console → Project Settings → Service Accounts → Generate new private key. Paste the whole key (with \n escapes) into the .env value.

Scripts

Command	Description
npm run dev	Start the Astro dev server
npm run build	Build for production
npm run preview	Preview the production build locally
npm run check	Type-check the project (astro check)
npm run format	Format all source files with Prettier

Deployment

The project is configured for Vercel via @astrojs/vercel. Push to the connected branch and Vercel handles the build. Set the same env vars from .env.example in the Vercel dashboard.

License

MIT — see LICENSE.