Storefront structure
Built a React single-page application using TypeScript components and React Router for client-side navigation.
Back to selected work
02 / Academic project2025 — 2026
The Bad Hats.
A React storefront with shopping cart, sign-in state, and checkout validation.
Team LeaderAcademic project · Mock API
Source codeTHE BAD HATSCollection 03
EVERYDAY ORIGINALS / 2026
Good hats. Bad attitude.
↗01
The Everyday320.000 ₫
02
The Weekender350.000 ₫
03
The Original290.000 ₫
The Everyday added to cart01
The problem
Build an e-commerce single-page application for an academic project, connecting product browsing, a shopping cart, sign-in state, and a validated checkout flow.
My contribution
State & API integration
Managed cart state with React Context and useState, and authentication, product, and order state with Redux Toolkit. Integrated JSON Server through a shared Axios client.
Forms & admin routes
Added required checkout fields and an empty-cart check, password confirmation during registration, and client-side route protection for the admin order list.
How it connects
- 01React / Router
- 02Context: cart · Redux: auth / products / orders
- 03Shared Axios client
- 04JSON Server
Cart state and Redux state are separate; the Axios client connects the application to the mock API.
An implementation decision
CartProvider shares items, quantities, and totals with the storefront and checkout. Redux Toolkit keeps authentication, products, and orders in named slices. A shared Axios client centralizes the mock API connection settings.
Interface studies
THE BAD HATSCollection 03
EVERYDAY ORIGINALS / 2026
Good hats. Bad attitude.
↗01
The Everyday320.000 ₫
02
The Weekender350.000 ₫
03
The Original290.000 ₫
The Everyday added to cart01
Interface studies recreated for this portfolio. All data is illustrative.
Outcome & boundaries
What shipped
Built the storefront, shared cart and application state, mock API integration, basic form validation, and client-side admin route protection. The public repository is available for review.
What this project does not claim
JSON Server provides a mock API. Client-side route protection is not backend authorization. This case study does not claim real payment processing, a production backend, or commercial deployment.
05 / Contact
Let’s build something useful.
I’m looking for a fresher developer role where I can contribute with React and TypeScript while growing my full-stack skills.
Email me