ByteForge Webshop

A full-stack e-commerce webshop built for a web development course. Browse, filter, and purchase gaming gear with user authentication, reviews, and admin controls.

Tech Stack

Frontend:

• React 18+ with TypeScript
• Vite (build tool)
• SCSS (styling)
• Context API (state management)
• React Router (navigation)

Backend:

• Node.js with Express
• Supabase (PostgreSQL database)
• JWT authentication

Deployment:

• Vercel (frontend)
• Supabase (database)
• Git (version control)

Features

• Product catalog with category filtering
• Shopping cart with checkout
• User authentication & account management
• Product reviews and ratings
• Admin dashboard (product/promo/discount management)
• Responsive design (mobile, tablet, desktop)
• Toast notifications
• Order history tracking

Project Structure

byteForge/
├── src/
│   ├── components/      # Organized by feature (category, product, shop, etc.)
│   ├── pages/           # Route pages
│   ├── context/         # State management
│   ├── styles/          # SCSS organized by feature
│   ├── api/             # API helpers
│   ├── utils/           # Utility functions
│   └── App.tsx
├── public/              # Static assets
└── index.html

byteForge-backend/
├── routes/              # API endpoints
├── api/                 # Vercel serverless functions
└── server.js            # Express server

Setup

Prerequisites

• Node.js 16+
• npm or yarn

Installation

Frontend:

cd byteForge
npm install

Backend:

cd byteForge-backend
npm install

Environment Variables

Create .env.local in byteForge/:

VITE_API_URL=http://localhost:5000

Create .env in byteForge-backend/:

SUPABASE_URL=your_supabase_url
SUPABASE_KEY=your_supabase_key
ADMIN_PASSWORD=your_admin_password

Build & Run

Development

Frontend (with Vite):

cd byteForge
npm run dev

Backend (Express):

cd byteForge-backend
npm start

Production

Build frontend:

cd byteForge
npm run build

Deploy:

• Frontend: Push to GitHub → Vercel auto-deploys
• Backend: Deploy to Vercel or your hosting platform

Notes

• Components and styles are organized by feature (category, product, shop, etc.)
• All 5 context providers handle state: Cart, Product, User, Toast, Review
• Admin dashboard protected with password

Images & Assets

Local Development:

• Product images are stored locally in byteForge-backend/images/product_images/
• Used for development and testing purposes

Production:

• Product images are hosted on Supabase Storage in the product_images bucket
• Images are served from the Supabase CDN (https://ljspsrjfvannbfvwoiyy.supabase.co/storage/v1/object/public/product_images/)
• This keeps the repository clean and uses cloud storage best practices

Note: The images/ folder is excluded from Git (gitignore) to keep the repository lightweight, but the images remain available locally for development and testing.

---

Built for learning purposes as part of a web development course.