04E-commerce · Beauty & cosmetics
Shynx Store
Twenty products, five categories and the most complete build here: search, filters, wishlist and a multi-step checkout.
In development · self-initiated professional project
- Role
- Design and development: Syed Ahad Haider
- Type
- E-commerce · Beauty & cosmetics
Stack
- React 19
- React Router 7
- Vite 8
- Tailwind CSS 4
- Zustand
- Motion
- GSAP
- Express 5 + MySQL (optional API)
About the project
A responsive storefront for a health, beauty and cosmetics brand — my own ongoing project and the most complete end-to-end build on this site. Category landing pages, product pages, search, sorting and stock badges cover discovery; a persistent cart and wishlist, quick add and a multi-step checkout with order confirmation cover the purchase. The front end runs self-contained on a local catalogue, and an Express and MySQL API for products, authentication and persisted orders is being finished alongside it.
The problem it solves
Writing the front end so the data source is an implementation detail. Cart and wishlist state lives in Zustand and survives reloads, and every screen reads the same catalogue interface — so the same build runs standalone on a local catalogue today and against the REST API once it is finished, with no component changes.
Scope and limits
- In development: the Express and MySQL API (products, authentication, persisted orders) is still being completed, so the live demo runs on the local catalogue.
- Deployed as a demonstration: the products and prices are self-created content, and no real customers, orders or payments run behind it.
What it does
- Category landing pages and product pages
- Search, sorting and badges — bestseller, sale, sold out, new
- Quick add, persistent cart and wishlist
- Multi-step checkout with order confirmation
- Responsive navigation, drawers and mobile filters
- Keyboard-accessible interactions and reduced-motion support
- Optional REST API for products, authentication and orders
Worth noticing
- 01Runs standalone on a local catalogue and upgrades to a persisted API without frontend changes
- 02Cart and wishlist state lives in Zustand and survives reloads
- 03Accessibility built in: skip link, keyboard flows, reduced-motion support
Want something like this?
Open the live site, poke at it, then tell me what you have in mind. A two-line brief is enough to start.
This is react & next.js storefronts work — what it covers, what it does not, and how it is quoted.