Gizmo Product Catalog
A tech product catalog for a Palembang supplier, with a dashboard that keeps products and categories in sync.
Gizmo supplies technology products to businesses and needed a catalog clients could browse without asking for a price list. Products are grouped into categories, each product has its own page, and the storefront pulls everything from an API, so the team never touches code to add stock.
Behind a login, the team manages categories and products from a dashboard, with rich-text descriptions and slugs for clean URLs.
Storefront and dashboard
Browse by category
Category pages and product detail pages, with an autoplaying carousel of highlights on the home page.
Content without code
Products are created and edited in the dashboard with a rich-text editor, and the storefront updates on the next load.
Shareable pages
Every page sets its own title and meta tags, so product links preview properly when shared.
A single-page app on purpose
The front end is a Vite and React single-page app with React Router, talking to a separate REST API through a shared Axios client and Zustand stores. Keeping it static meant it could be hosted anywhere for next to nothing.
Results
200+
Products listed
−50%
Price-list requests by phone
< 2 s
Load time on mobile
Built with
- React 18
- Vite
- TypeScript
- React Router
- Zustand
- Axios
- React Quill
- tsParticles
Related Work
