Skip to content

Personal project · full stack

ShopLite

ShopLite, a small online store: a React frontend, an Express API and a MongoDB database, with search, category filters, product pages and a cart.

194 products in 24 categories, with search, filters and a cart

  • React.js
  • Node.js
  • Express.js
  • MongoDB
  • Tailwind CSS

Problem

A small online store where a visitor can browse, search, filter and sort products, open one for its photos, reviews and stock, and keep a cart.

Approach

  • Three parts: a React frontend in the browser, an Express API in Node.js, and MongoDB, which only the API talks to.
  • The API serves the products through Mongoose with paging, search, category filters and sorting. Search text is escaped, title sorting ignores case, and ties are broken by id so paging never repeats a product.
  • The 194 products are a snapshot of DummyJSON's free catalogue, and the API copies its URLs and JSON shape, so moving the frontend onto it changed one line, the base URL.
  • Search, category and sort live in the URL, so a filtered view survives a reload and can be shared, and old requests are cancelled so a slow answer cannot overwrite a newer one.
  • The cart is a React context and reducer saved to localStorage, with totals worked out in cents.
  • Light and dark themes come from design tokens, and every list handles loading, error and empty states.

Result

  • Runs locally with its own database; it is not deployed.
  • Checked with scripts kept outside the repository: a crawl of 468 pages, 30 behaviour checks and accessibility audits in both themes.

Trade-offs

  • The cart lives in the browser, not the database, because there are no accounts to attach it to. There is no checkout, payment or order history.
  • The API is read-only, since the site only needs to read products and a smaller surface is easier to secure.
  • A product is either in the cart or not: there are no quantities.

Hiring a backend or founding engineer? Let’s talk.

↑ ↓ to moveEnter to runCtrl K anywhere