Project Details

Overview

This project is a single-vendor e-commerce SPA with two main parts: a customer-facing storefront and an admin dashboard. Customers can browse products, view product details, place orders, and track their order history. Admins can manage products and update order statuses.

Core Features

• Product browsing and search
• Product detail pages
• User registration and login
• Protected order history page
• Admin-only product management
• Admin-only order management
• Image upload and storage for products
• Role-based access control

Tech Stack

• React 19
• TypeScript
• Vite
• Tailwind CSS v4
• shadcn/ui with Base UI primitives
• Firebase Auth
• Firestore
• Firebase Storage
• React Router
• React Hook Form + Zod
• Sonner for toasts

App Structure

• Storefront pages for customers
• Admin pages for product and order management
• Shared layout components for navigation and footer
• Reusable UI components and feature-based component folders
• Service layer for all Firebase interactions

Data Model

• users: user profile and role
• products: product catalog items
• orders: order records with denormalized user and product data

Setup

1. Copy the Firebase environment values into .env
2. Enable Email/Password auth in Firebase
3. Create Firestore and Storage in the Firebase project
4. Run the app with the Vite dev server

Notes

• The app talks directly to Firebase from the browser
• Admin access depends on a Firestore user role of admin
• The project is already wired and buildable, but it needs valid Firebase credentials to work with a real backend

Built With

• firebase
• react