.png)
Loading...
This is a feature-rich demo application built to demonstrate what a production-ready ecommerce store looks like when built with modern tooling — from authentication and social login to a synced cart and a headless CMS backend.
Get in touchWhat's inside
Users can like products and have their preferences persisted through the Directus backend, creating a personalised wishlist experience across sessions.
A fully functional product comment system powered by Directus, allowing authenticated users to leave reviews and interact with the community in real time.
The shopping cart is stored in localStorage for instant, offline-first performance and synced with the Directus backend so your cart persists across devices and sessions.
A complete authentication system built on Directus Auth — covering registration, login, token refresh, and protected routes with JWT-based session management.
New accounts go through a Directus-powered email verification flow before gaining full access, ensuring a trusted user base and reducing fraudulent sign-ups.
One-click sign-in with Google via Directus Auth's built-in social login support, giving users a frictionless entry point without managing OAuth flows manually.
Products, stock levels, and availability are managed entirely through the Directus admin panel — no custom backend code required.
Every piece of data — users, products, orders, comments, likes — flows through Directus, an open-source headless CMS and data platform with a powerful REST & GraphQL API.
Built with
How it works
The frontend is a React application built on TanStack Start, a full-stack framework that provides file-based routing, SSR, and server functions out of the box. All data fetching and mutations go through the Directus REST API, which also handles authentication tokens and user sessions.
The shopping cart is initialised from localStorage on load for instant hydration, then reconciled with the backend so changes made on one device are reflected everywhere. Inventory counts are managed directly in the Directus admin panel — when stock hits zero, the product is automatically marked unavailable.
Authentication is handled entirely through Directus Auth. On login, Directus issues a JWT access token and refresh token which are stored securely on the client. Google social login is configured as a Directus OAuth provider — the token exchange happens server-side through Directus so no credentials ever touch the frontend directly.
Data flow
Explore the demo
Browse the store, add items to your cart, create an account, and experience every feature end to end.