FULL-STACK E-COMMERCE
SHOPERA
Shop More. Live Better.
A full-stack marketplace built for browsing products across categories, comparing options, and moving from product discovery into a connected shopping flow.
- React
- Node.js
- Express
- MySQL
- REST APIs
- ROLE
- Full-stack development
- DELIVERABLE
- Responsive commerce marketplace
- STACK
- React · Node.js · MySQL
Project overview
A considered journey from discovery to cart
SHOPERA is a multi-category online marketplace built around a complete product-browsing and shopping experience.
Who it serves
Shoppers exploring products across departments, comparing options, and managing a shopping cart.
What it brings together
The project brings category discovery, product details, and core shopping actions together in one responsive storefront.
Product experience
A storefront built around product discovery
Explore the live catalogue and the cart’s designed empty state. Each image below is an unaltered capture of the public SHOPERA application.
Core features
The commerce flows behind the interface
- 01
Product discovery: the public API supports search, category, brand, price and stock filters, sorting, and pagination; the storefront also presents product details and related items.
- 02
Shopping cart: guest cart items persist in local storage, while signed-in cart actions use API endpoints and can synchronize guest items after sign-in.
- 03
Customer tools: the app includes wishlist, product comparison, registration, login, and protected profile and order routes.
- 04
Order flow: checkout and order routes are implemented in the app; payment processing and completed live purchases are not claimed here.
Technical architecture
A layered application with clear boundaries
Request response
- 01
Storefront
React 18 · React Router · Bootstrap
Pages and responsive UI
- 02
Client state
Context · Axios
Auth, cart, wishlist, compare
- 03
REST API
Node.js · Express
Routes, controllers, JWT
- 04
Data
MySQL · mysql2
Persistent application records
The browser UI calls the configured API through the shared Axios client. Authenticated requests attach a JWT; the Express service reads and writes application data through mysql2.
Engineering decisions
Keep state, API, and persistence in sync
Keep guest shopping useful
CartContext stores guest items in local storage, calculates their totals locally, and synchronizes them through the cart API after sign-in.
Centralize API communication
A shared Axios client exposes product, category, cart, wishlist, and order methods. Its interceptors attach the stored JWT and clear expired session data after unauthorized responses.
Separate storefront and service concerns
The frontend page and context layers call focused Express route groups and controllers; the backend uses mysql2 to connect those endpoints to MySQL.
Reflection
A full-stack product, end to end
The result is a publicly accessible storefront backed by a separately organized API and a public source repository. No independent usage, revenue, or performance measurements are published.
Key learningThe implementation highlights how client state, authentication, and API persistence need to stay aligned across guest and signed-in shopping journeys.
Explore the project
See SHOPERA in action.
Visit the live storefront or explore the implementation in the public repository.