React eCommerce App
Category:React
Tags: Axios Emotion Feature-based Architecture Firebase GitHub Actions Hooks JWT Lazy Loading Material Design Material UI React React Hook Form React Router React Testing Library Stripe TanStack Query TypeScript Unit Test Vite Vitest Zod Zustand
The completed test task was to create a fully functional e-Commerce application frontend using React, TanStack Query, Zustand, React Router, Axios, MUI, and React Hook Form with Zod validation. The frontend includes a navigation menu, product pages, cart, checkout with Stripe payment integration, and user account pages. The application is designed to be responsive and user-friendly, with a modern and intuitive user interface. You can see a description of the backend here.
The frontend was built using React 19 and TypeScript, a popular stack for building modern web applications with Vite as the build tool. State management was implemented with TanStack Query hooks for catalog and orders (useProducts, useOrderHistory, useCheckout) and a Zustand cart.store, including the checkout flow and Stripe integration for secure payments. Routing uses React Router v7 with lazy-loaded routes and RequireAuth app="taberna" on checkout and dashboard. Data fetching is handled by Axios with JWT interceptors.
The frontend also includes search: a dialog in the navbar and a dedicated search results page. UI components use MUI (Material UI) v7 (AppBar, cards, forms, dialogs). Form validation on checkout and auth screens uses React Hook Form with Zod schema resolvers matching the original Vuelidate rules.
Overall, the completed test task is a fully functional e-Commerce frontend with a smooth user experience and responsive UI. It is built with React, React Router, MUI, Axios, TanStack Query, Zustand, React Hook Form, Zod, Django REST API (backend), AWS, Firebase Hosting, and Stripe (session and charge modes). Guest carts persist via cartId in localStorage and merge on login. Live demo: react.karnaukh-webdev.com/taberna.