🛒 TechStore — CodeAlpha E-Commerce Platform

A full-stack electronics e-commerce web application with JWT authentication, persistent cart management, and complete order processing.

CodeAlpha Internship — Full Stack Web Development | Task 1

📦 GitHub Repository

📖 Overview

TechStore is a full-stack electronics e-commerce platform built with React + Vite on the frontend and Node.js + Express + SQLite on the backend.

The application delivers a complete shopping experience — product browsing, authentication, persistent shopping carts, secure checkout, order history, responsive layouts, and light/dark theme support.

This project was developed as Task 1 of the CodeAlpha Full Stack Web Development Internship, with a focus on building, testing, and deploying a complete, production-ready full-stack web application.

✨ Key Features

🛍️ Product Catalog

25+ realistic consumer technology products
Multiple categories: Audio, Computer Accessories, Workspace, Mobile Accessories, Wearables, Gaming, and Networking
Category filtering chips with keyboard-accessible navigation
Horizontal scroll snapping for category navigation
Interactive product cards with whole-card navigation and dedicated CTA buttons

📦 Product Details

High-resolution product images
Real-time stock indicators
Quantity selectors
Detailed product information and pricing
Warranty and free-shipping value propositions
Add-to-cart feedback banners with direct navigation to the cart

🔐 Authentication & Security

User registration and login
JSON Web Token (JWT) authentication
Password hashing with bcryptjs
Security-question setup during registration
Three-step password recovery flow (email verification → security-question verification → password reset)
Protected cart and order routes

🛒 Shopping Cart

Persistent shopping cart
Real-time stock validation preventing over-ordering
Quantity controls and individual line-item removal
Full cart clearing and total calculation
Empty-cart state with clear calls-to-action
Support for authenticated and guest shopping experiences

💳 Checkout & Order Processing

Shipping-address form with validation
Atomic order creation using SQLite transactions
Product prices captured at time of checkout
Automatic cart clearing after successful order creation
User-isolated order history with individual order receipt/detail views

🎨 Design System & UX

Light and dark theme support, persisted via localStorage
Zero flash-of-unformatted-content (FOUC) during theme loading
Custom UI built with CSS Modules
Consistent design tokens with a 4px/8px spacing rhythm
Three-level elevation system
lucide-react iconography
Responsive layouts for mobile, tablet, and desktop

🛠️ Tech Stack

Layer	Technologies
Frontend	React 19, Vite 8, React Router 7, Lucide React, CSS Modules
Backend	Node.js, Express.js, CORS, Dotenv
Database	SQLite via `better-sqlite3` (WAL mode)
Authentication	JSON Web Tokens (`jsonwebtoken`), `bcryptjs`
Version Control	Git & GitHub
Frontend Deployment	Vercel
Backend Deployment	Render

🏗️ Architecture

                 ┌──────────────────────┐
                 │        USER          │
                 └──────────┬───────────┘
                            │
                            ▼
                 ┌──────────────────────┐
                 │   React + Vite       │
                 │      Frontend        │
                 │      (Vercel)        │
                 └──────────┬───────────┘
                            │
                      HTTP / REST API
                            │
                            ▼
                 ┌──────────────────────┐
                 │  Node.js + Express   │
                 │       Backend        │
                 │       (Render)       │
                 └──────────┬───────────┘
                            │
                            ▼
                 ┌──────────────────────┐
                 │       SQLite         │
                 │    better-sqlite3    │
                 └──────────────────────┘

📁 Project Structure

CodeAlpha_Ecommerce/
├── backend/
│   ├── data/
│   │   └── store.db              # Auto-generated SQLite database (gitignored)
│   ├── src/
│   │   ├── controllers/          # Auth, cart, order & product controllers
│   │   ├── database/             # Database initialization & seed data
│   │   ├── middleware/           # JWT authentication middleware
│   │   ├── models/               # User, Product, Cart & Order data models
│   │   ├── routes/                # Express API route definitions
│   │   └── server.js             # API entry point & health check
│   ├── .env.example              # Backend environment template
│   └── package.json
├── frontend/
│   ├── public/                   # Static assets & favicons
│   ├── src/
│   │   ├── components/           # Reusable UI components
│   │   ├── context/               # Auth, Cart & Theme contexts
│   │   ├── hooks/                 # Product-related custom hooks
│   │   ├── pages/                 # Application pages
│   │   ├── App.jsx               # Application routing & layout
│   │   ├── index.css              # Global styles & design tokens
│   │   └── main.jsx               # React DOM entry point
│   ├── .env.example              # Frontend environment template
│   ├── index.html                 # HTML shell & theme initialization
│   └── package.json
├── .gitignore                    # Git ignore rules
├── README.md                     # Project documentation
└── LICENSE                       # MIT License

🚀 Getting Started

Prerequisites

Node.js v18.0.0 or higher
npm v9.0.0 or higher
Git

Verify your installation:

node --version
npm --version
git --version

1. Clone the Repository

git clone YOUR_GITHUB_REPOSITORY_URL
cd CodeAlpha_Ecommerce

2. Backend Setup

Navigate to the backend directory:

cd backend

Install dependencies:

npm install

Create the environment file:

macOS / Linux:

cp .env.example .env

Windows PowerShell:

Copy-Item .env.example .env

Configure .env:

PORT=5000
NODE_ENV=development
FRONTEND_URL=http://localhost:5173
JWT_SECRET=your_jwt_secret_key_here
JWT_EXPIRES=7d

Start the backend:

npm run dev

Backend API: http://localhost:5000 Health check: http://localhost:5000/api/health

3. Frontend Setup

Open a new terminal and navigate to the frontend directory:

cd frontend

Install dependencies:

npm install

Create the environment file:

macOS / Linux:

cp .env.example .env

Windows PowerShell:

Copy-Item .env.example .env

Configure the frontend environment according to the backend API URL.

Start the frontend:

npm run dev

The application will normally be available at: http://localhost:5173

💾 Database Setup & Auto-Seeding

TechStore uses an embedded SQLite database through better-sqlite3. No external database server is required for local development.

When the backend starts for the first time:

The SQLite database is automatically created.
The database schema is initialized.
Required tables are created.
Seed data is inserted when the product catalog is empty.

The database includes the following tables:

products
users
cart_items
orders
order_items

The generated database is stored at backend/data/store.db and is excluded from Git version control via .gitignore.

📡 API Reference

Health Check

Method	Endpoint	Description	Authentication
`GET`	`/api/health`	Returns server status and environment information	❌

Products

Method	Endpoint	Description	Authentication
`GET`	`/api/products`	Retrieve all products	❌
`GET`	`/api/products/:id`	Retrieve a specific product	❌

Authentication

Method	Endpoint	Description	Authentication
`POST`	`/api/auth/register`	Register a new user	❌
`POST`	`/api/auth/login`	Authenticate user and receive JWT	❌
`POST`	`/api/auth/security-question`	Retrieve security question	❌
`POST`	`/api/auth/verify-security-answer`	Verify security answer	❌
`POST`	`/api/auth/reset-password`	Reset password using reset token	❌

Shopping Cart

Method	Endpoint	Description	Authentication
`GET`	`/api/cart`	Retrieve current user's cart	🔒 JWT
`POST`	`/api/cart`	Add product to cart	🔒 JWT
`PUT`	`/api/cart/:productId`	Update cart item quantity	🔒 JWT
`DELETE`	`/api/cart/:productId`	Remove an item from cart	🔒 JWT
`DELETE`	`/api/cart`	Clear the current user's cart	🔒 JWT

Orders & Checkout

Method	Endpoint	Description	Authentication
`POST`	`/api/orders`	Create order from current cart	🔒 JWT
`GET`	`/api/orders`	Retrieve authenticated user's orders	🔒 JWT
`GET`	`/api/orders/:id`	Retrieve individual order details	🔒 JWT

🔒 Security Best Practices

Zero Hardcoded Secrets — sensitive configuration is managed through environment variables
Password Hashing — passwords and security answers are hashed using bcryptjs
JWT Authentication — protected API requests require a valid JWT token
Route Protection — cart and order endpoints are protected by authentication middleware
Git Protection — .env, SQLite database files, node_modules, and build artifacts are excluded from version control

🌍 Deployment

The application uses a separate frontend and backend deployment architecture:

                       GitHub
                          │
             ┌────────────┴────────────┐
             │                         │
             ▼                         ▼
          Vercel                    Render
             │                         │
             ▼                         ▼
     React Frontend             Express Backend
             │                         │
             └────────────┬────────────┘
                           │
                           ▼
                          API

Frontend — Vercel

The React + Vite frontend is deployed on Vercel. 🌐 Live Application: Open TechStore

Backend — Render

The Node.js + Express backend is deployed on Render. The production frontend communicates with the deployed backend through the configured API URL.

📸 Screenshots

Store screenshots inside a screenshots/ folder in the repository so the images below render correctly on GitHub.

🏠 Home / Product Catalog

📦 Product Details

🛒 Shopping Cart

🔐 Authentication

💳 Checkout

🧪 Testing

The application was tested across the major user workflows.

Functional Testing

Responsive Testing

📱 Mobile
📟 Tablet
💻 Desktop

Deployment Testing

Frontend availability
Backend availability
API communication
Product loading
Authentication flow
Cart functionality
Checkout functionality

🧑‍💻 Development Workflow

Local Development
       │
       ▼
Feature Development
       │
       ▼
Local Testing
       │
       ▼
Git Commit
       │
       ▼
GitHub
       │
       ├──────────────► Vercel ──► Frontend Deploy
       │
       └──────────────► Render ──► Backend Deploy

This workflow keeps the project version-controlled while supporting deployment of both the frontend and backend.

🎯 Learning Outcomes

This project provided practical, hands-on experience with:

Full-stack web development and component-based architecture
React 19, Vite configuration, React Router, and the Context API
Custom React hooks
REST API development with Express.js
SQLite integration and database transactions
JWT authentication, password hashing, and middleware
CORS and environment variable management
Git and GitHub workflows
Responsive web design and production debugging
Vercel and Render deployment
Frontend/backend integration

🔮 Future Improvements

The following are potential enhancements and are not yet implemented:

💳 Online payment gateway integration
❤️ Wishlist functionality
🔎 Advanced product search
🏷️ Advanced filtering and sorting
⭐ Product reviews and ratings
👤 User profile management
📊 Admin dashboard
📈 Sales analytics
📦 Advanced order tracking
📧 Email notifications
🔔 Order-status notifications
🖼️ Advanced product image management
🌐 Internationalization and multiple currencies
♿ Further accessibility improvements

🤝 Contributing

Contributions and suggestions are welcome.

Fork the repository
Create a feature branch:

   git checkout -b feature/your-feature

Make your changes
Commit your changes:

   git commit -m "feat: add your feature"

Push your branch:

   git push origin feature/your-feature

Open a Pull Request

📄 License

This project is licensed under the MIT License. You are free to use, modify, and distribute this project according to the terms of the license.

See the LICENSE file for the complete license text.

👨‍💻 Author

YOUR NAME B.E. Information Technology Student

🐙 GitHub: GITHUB_PROFILE
💼 LinkedIn: LINKEDIN_PROFILE

🏆 CodeAlpha Internship

CodeAlpha Internship Program — Task 1: Full Stack E-Commerce Website

This project demonstrates the development, testing, and deployment of a complete full-stack e-commerce application using modern JavaScript technologies.

⭐ Support

If you found this project useful or interesting, consider giving the repository a ⭐ on GitHub.

Built with ❤️ using React, Node.js, Express, SQLite and modern web technologies.

CodeAlpha Internship • Task 1 • Full Stack Web Development

Name		Name	Last commit message	Last commit date
backend		backend
frontend		frontend
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md

Latest commit

History

Folders and files

Repository files navigation

🛒 TechStore — CodeAlpha E-Commerce Platform

📖 Overview

✨ Key Features

🛍️ Product Catalog

📦 Product Details

🔐 Authentication & Security

🛒 Shopping Cart

💳 Checkout & Order Processing

🎨 Design System & UX

🛠️ Tech Stack

🏗️ Architecture

📁 Project Structure

🚀 Getting Started

Prerequisites

1. Clone the Repository

2. Backend Setup

3. Frontend Setup

💾 Database Setup & Auto-Seeding

📡 API Reference

Health Check

Products

Authentication

Shopping Cart

Orders & Checkout

🔒 Security Best Practices

🌍 Deployment

Frontend — Vercel

Backend — Render

📸 Screenshots

🏠 Home / Product Catalog

📦 Product Details

🛒 Shopping Cart

🔐 Authentication

💳 Checkout

🧪 Testing

🧑‍💻 Development Workflow

🎯 Learning Outcomes

🔮 Future Improvements

🤝 Contributing

📄 License

👨‍💻 Author

🏆 CodeAlpha Internship

⭐ Support

About

Topics

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages