Overview
A single-page e-commerce application handling the full customer journey: discovering products, adding them to a cart or wishlist, checking out with a shipping address, paying by cash on delivery or through a Stripe checkout session, and reviewing past orders.
Filters live in the query string, so any combination of category, brand and price range is shareable and deep-linkable: selecting a category card anywhere in the app lands on the product grid with that filter already applied.
The motion language is consistent across the app: page transitions, staggered product grids, hover lift on cards, animated menus, and button press feedback. Content animates in on mount rather than on scroll, so everything on the first screen is visible without scrolling first.
The screens
14Product grid with brand, category and price filters held in the URL
Captured from the running system. Records shown are demonstration data.
The interesting part
The token schedules its own logout.
The JWT is decoded on load and an automatic logout is scheduled for the exact expiry time, rather than waiting for the next 401 to fail a request in the user's face. Protected routes redirect guests to sign-in, and every asynchronous action reports through a toast (loading, success and failure), so nothing happens silently.
What it does
- Catalog with server-side pagination driven by API metadata
- Live header search with instant result suggestions
- Category, brand and price filtering, all persisted in the URL
- Product detail with image carousel, specs table and a similar-items strip
- Cart with per-item quantity control and live totals
- Wishlist with quick add-to-cart
- Checkout with validated Egyptian shipping details
- Cash on delivery and Stripe checkout sessions
- Full auth: sign up, sign in, six-digit reset code with paste support
- Skeleton placeholders on every data-driven page
- Floating bottom navigation dock on mobile
Built with
- Framework
- React
- Vite
- React Router
- UI
- Tailwind CSS
- Framer Motion
- react-hot-toast
- State
- Redux Toolkit
- TanStack Query
- Context API
- Forms
- Formik
- Yup
- API
- Axios
- REST
- JWT
Next project
PluginZ Corporate Site
The company's 30-page site, shipped solo