🍬 Sweet Shop Management System

A full-stack Sweet Shop Management System built with modern technologies following Test-Driven Development (TDD) practices.

🌐 Live Demo

Service	URL
Frontend	https://sweet-shop-ten.vercel.app
Backend API	https://sweet-shop-api-1fxc.onrender.com

Note: The backend is hosted on Render's free tier, so it may take ~30 seconds to wake up on first request.

📋 Table of Contents

• Live Demo
• Features
• Tech Stack
• Project Structure
• Getting Started
• API Documentation
• Testing
• My AI Usage
• Screenshots

✨ Features

User Features

• 🔐 User registration and login with JWT authentication
• 🛒 Browse all available sweets
• 🔍 Search and filter sweets by name, category, and price range
• 💰 Purchase sweets (quantity decreases on purchase)
• 📱 Responsive design for all devices

Admin Features

• ➕ Add new sweets to inventory
• ✏️ Edit existing sweet details
• 🗑️ Delete sweets from catalog
• 📦 Restock sweets (increase quantity)
• 👑 Admin-only access controls

🛠️ Tech Stack

Backend

• Runtime: Node.js
• Framework: Express.js
• Language: TypeScript
• Database: SQLite (using better-sqlite3)
• Authentication: JWT (jsonwebtoken)
• Password Hashing: bcryptjs
• Validation: express-validator
• Testing: Jest + Supertest

Frontend

• Framework: React 18
• Language: TypeScript
• Build Tool: Vite
• Routing: React Router DOM
• HTTP Client: Axios
• Styling: CSS (custom)

📁 Project Structure

incubytevs/
├── backend/
│   ├── src/
│   │   ├── config/
│   │   │   └── database.ts      # SQLite database configuration
│   │   ├── middleware/
│   │   │   └── auth.middleware.ts # JWT authentication middleware
│   │   ├── models/
│   │   │   ├── user.model.ts    # User model and operations
│   │   │   └── sweet.model.ts   # Sweet model and operations
│   │   ├── routes/
│   │   │   ├── auth.routes.ts   # Auth endpoints
│   │   │   └── sweets.routes.ts # Sweets CRUD + inventory endpoints
│   │   ├── tests/
│   │   │   ├── setup.ts         # Test configuration
│   │   │   ├── auth.test.ts     # Auth endpoint tests
│   │   │   ├── sweets.test.ts   # Sweets CRUD tests
│   │   │   └── inventory.test.ts # Purchase/restock tests
│   │   ├── utils/
│   │   │   └── jwt.ts           # JWT utilities
│   │   ├── app.ts               # Express app configuration
│   │   └── index.ts             # Server entry point
│   ├── data/                    # SQLite database files
│   ├── coverage/                # Test coverage reports
│   ├── package.json
│   └── tsconfig.json
│
├── frontend/
│   ├── src/
│   │   ├── components/
│   │   │   ├── Navbar.tsx       # Navigation component
│   │   │   ├── SweetCard.tsx    # Sweet display card
│   │   │   └── SearchFilter.tsx # Search and filter component
│   │   ├── context/
│   │   │   └── AuthContext.tsx  # Authentication context
│   │   ├── pages/
│   │   │   ├── LoginPage.tsx    # Login page
│   │   │   ├── RegisterPage.tsx # Registration page
│   │   │   ├── DashboardPage.tsx # Main sweet listing
│   │   │   └── AdminPage.tsx    # Admin management panel
│   │   ├── services/
│   │   │   ├── api.ts           # Axios configuration
│   │   │   └── sweets.ts        # Sweets API service
│   │   ├── types/
│   │   │   └── index.ts         # TypeScript type definitions
│   │   └── config/
│   │       └── api.ts           # API configuration
│   ├── package.json
│   └── vite.config.ts
│
└── README.md

🚀 Getting Started

Prerequisites

• Node.js (v18 or higher)
• npm (v9 or higher)

Backend Setup

1. Navigate to the backend directory:

   cd backend

2. Install dependencies:

   npm install

3. Create environment file (optional - uses defaults):

   # .env file
   PORT=3001
   NODE_ENV=development
   JWT_SECRET=your-super-secret-jwt-key
   DATABASE_PATH=./data/sweetshop.db

4. Run tests to verify setup:

   npm test

5. Start the development server:

   npm run dev

The backend will be running at http://localhost:3001

Frontend Setup

1. Navigate to the frontend directory:

   cd frontend

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

The frontend will be running at http://localhost:5173

Running Both Together

1. Open two terminal windows
2. In terminal 1: cd backend && npm run dev
3. In terminal 2: cd frontend && npm run dev

📡 API Documentation

Authentication Endpoints

Method	Endpoint	Description	Auth Required
POST	/api/auth/register	Register a new user	No
POST	/api/auth/login	Login and get token	No

Register Request Body

{
  "email": "user@example.com",
  "password": "password123",
  "name": "John Doe",
  "role": "user"  // or "admin"
}

Login Request Body

{
  "email": "user@example.com",
  "password": "password123"
}

Sweets Endpoints (Protected)

Method	Endpoint	Description	Admin Only
GET	/api/sweets	Get all sweets	No
GET	/api/sweets/search	Search sweets	No
POST	/api/sweets	Create a new sweet	No
PUT	/api/sweets/:id	Update a sweet	No
DELETE	/api/sweets/:id	Delete a sweet	Yes

Sweet Object

{
  "id": "uuid",
  "name": "Chocolate Cake",
  "category": "Cakes",
  "price": 25.99,
  "quantity": 10,
  "description": "Delicious chocolate cake",
  "image_url": "https://example.com/cake.jpg"
}

Search Query Parameters

• name - Search by name (partial match)
• category - Filter by category
• minPrice - Minimum price
• maxPrice - Maximum price

Inventory Endpoints (Protected)

Method	Endpoint	Description	Admin Only
POST	/api/sweets/:id/purchase	Purchase a sweet	No
POST	/api/sweets/:id/restock	Restock a sweet	Yes

Purchase Request Body

{
  "quantity": 2  // optional, defaults to 1
}

Restock Request Body

{
  "quantity": 50  // required
}

🧪 Testing

Run All Tests

cd backend
npm test

Run Tests with Watch Mode

npm run test:watch

Test Coverage Report

npm run test:coverage

Current Test Results

• Total Tests: 47
• All Passing: ✅
• Coverage: ~86%

Test Suites: 3 passed, 3 total
Tests:       47 passed, 47 total
Snapshots:   0 total

Test Categories

• Auth Tests (12): Registration and login validation
• Sweets Tests (20): CRUD operations and search
• Inventory Tests (15): Purchase and restock operations

🤖 My AI Usage

AI Tools Used

• GitHub Copilot (Claude Opus 4.5): Primary AI assistant for code generation and development

How AI Was Used

1. Project Architecture & Planning

   • I used AI to help design the project structure and determine the best technology stack for the requirements
   • The AI helped outline the TDD approach and test categories

2. Boilerplate Generation

   • Initial Express.js setup with TypeScript configuration
   • Database schema design and SQLite integration
   • JWT authentication middleware structure
   • React component scaffolding

3. Test Writing (TDD Red Phase)

   • AI helped generate comprehensive test cases following TDD principles
   • Tests were written BEFORE implementation to define expected behavior
   • Coverage includes edge cases like validation errors, authentication failures, and insufficient stock scenarios

4. Implementation (TDD Green Phase)

   • Routes and controllers were implemented to make tests pass
   • Model layer with SQLite operations
   • Frontend React components with proper TypeScript types

5. Code Review & Refactoring

   • AI suggested improvements for code organization
   • Helped identify and fix bugs (e.g., the purchase route bug with undefined body)
   • TypeScript type safety improvements

AI Impact on Workflow

Positive Impacts:

• Significantly accelerated boilerplate code generation
• Helped maintain consistency across the codebase
• Provided comprehensive test coverage suggestions
• Reduced time spent on syntax and configuration issues

Learning Experience:

• AI is excellent for repetitive patterns but requires human oversight for edge cases
• The TDD process was enhanced by AI generating test scenarios I might have missed
• AI suggestions needed validation against project requirements

Responsible AI Usage:

• All AI-generated code was reviewed and understood before inclusion
• Business logic and architectural decisions were made by me
• AI was used as a productivity tool, not a replacement for understanding

Commit Co-authorship

All commits in this project where AI was used include the co-author trailer:

Co-authored-by: GitHub Copilot <copilot@github.com>

📸 Screenshots

Login Page

User authentication with email and password

Register Page

New user registration with admin option

Dashboard

Browse, search, and purchase sweets

For user

For admin

Search & Filter

Filter sweets by category, name, and price range

Admin Panel - Add New Sweet

Add new sweets to inventory

Admin Panel - Edit Sweet

Edit existing sweet details

Mobile Responsive

Optimized for all screen sizes

---

📄 License

This project is licensed under the ISC License.

👤 Author

Built as part of the Sweet Shop Management System TDD Kata assignment.

---

Made with ❤️ and 🍬