03E-commerce · Jewelry
PLINTH
A server-rendered jewelry store: collection filters, product configurators, bag and accounts.
Self-initiated demonstration (live, completed)
- Role
- Design and development: Syed Ahad Haider
- Type
- E-commerce · Jewelry
Stack
- Laravel
- Blade
- Vite
About the project
A multi-page store for a jewelry label, built as a demonstration of a server-rendered storefront. The collection page filters and sorts by category, each product page pairs a photo gallery with material and size selectors and details, care and delivery accordions, and the bag, sign-in, registration and password-reset pages complete the account flow. Every page is rendered on the server with its own title, canonical URL and Open Graph tags.
The problem it solves
Making every route arrive complete. Filtering, sorting and the product configurator are handled server-side in Laravel and Blade, so each page is delivered with its own metadata and share preview rather than assembled after the fact by a client framework — the case where server rendering, not hydration, is the right answer.
Scope and limits
- Deployed as a demonstration: the collection and its photography are self-created content, and no real customers, orders or payments run behind it.
- The sign-in, registration and password-reset pages complete the account flow as an interface.
What it does
- Collection page with category tabs, filters and sorting
- Product pages with gallery thumbnails, material and size selectors
- Details, care and delivery & returns accordions
- Bag page, search and an Our Story page
- Sign-in, create-account and forgot-password pages
- Server-rendered titles, canonical URLs and Open Graph tags on every page
Worth noticing
- 01Server-rendered: every route arrives with its own metadata and share preview
- 02Warm blush-and-cream art direction built around product photography
- 03A full account flow (sign in, register, reset) alongside the shopping flow
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 and full-stack systems work — what it covers, what it does not, and how it is quoted.