Skip to content

README.md

Latest commit

 

History

History
103 lines (75 loc) · 2.7 KB

README.md

File metadata and controls

103 lines (75 loc) · 2.7 KB

SuperSimpleMarket

SuperSimpleMarket is a full-stack ecommerce demo with a React + TypeScript frontend and an Express/Sequelize backend. It includes product browsing, search, cart management, checkout, order history, package tracking, and a small test suite.

The project started from a SuperSimpleDev ecommerce tutorial and was extended with a cleaner repo structure, TypeScript cleanup, a custom backend flow, tests, improved UI polish, empty states, working search, buy-again behavior, tracking routes, and an order success page.

Screenshots

Homepage

Checkout

Orders

Project Structure

react-ecommerce-web/
  frontend/             React, TypeScript, Vite, Vitest
  backend/              Express API, Sequelize models, seed data, product assets
  tutorial-js-version/  Original/older JavaScript tutorial version kept for reference
  docs/screenshots/     README preview images
  README.md

Tech Stack

  • React 19
  • TypeScript
  • Vite
  • React Router
  • Axios
  • Vitest + Testing Library
  • Node.js + Express
  • Sequelize
  • sql.js-backed local database setup

Features

  • Product grid with real API data
  • Product search by name and keywords
  • Add to cart and buy again
  • Cart quantity count in the header and checkout
  • Delivery option selection
  • Editable cart item quantity
  • Payment summary and order creation
  • Order success page
  • Order history with tracking links
  • Dynamic package tracking page
  • Empty cart, empty orders, and empty search states
  • Responsive layout and improved card/button styling

Run Locally

Install and start the backend:

cd backend
npm install
npm start

The backend runs on http://localhost:3000.

Install and start the frontend in a second terminal:

cd frontend
npm install
npm run dev

Open the Vite URL shown in the terminal, usually http://localhost:5173.

Scripts

Frontend:

cd frontend
npm run dev
npm run build
npm run lint
npm test

Backend:

cd backend
npm start
npm run dev

Notes

  • The Vite dev server proxies /api requests to http://localhost:3000.
  • npm run build in frontend/ outputs the production frontend into backend/dist.
  • tutorial-js-version/ is intentionally kept as a labeled reference folder, not the main app.

Acknowledgments

This project is based on the ecommerce project tutorial by SuperSimpleDev / SuperSimpleDiv. I used the tutorial as the foundation and extended it with a cleaner full-stack structure, TypeScript-focused frontend work, backend integration, testing, UI polish, search, checkout updates, tracking, empty states, and README documentation.