Exploring client and server state management in modern React applications.
This project aims to experiment with the latest state management techniques in React. Using "Thomann" (an online music instruments store) as inspiration, I built a demo e-commerce application with core shopping features.
- Recreate a basic online marketplace for musical instruments
- Implement multi-category product filtering
- Enable shopping cart functionality (add/remove items)
- Display detailed product information
- Managed client state with Zustand
- Handled server state with React-Query (TanStack Query)
- Implemented infinite scrolling for product lists
- Applied memoization to improve rendering performance
- Utilized lazy loading where appropriate
- Implemented API prefetching
- Developed a responsive, user-friendly interface
- Created realistic shopping interactions
- Implemented multiple filtering and sorting options
- Built from scratch without frameworks (Vite + React SPA)
- Mock backend API using MSW
- Core: React, TypeScript
- State Management: Zustand, React-Query
- Routing: React-router-dom
- Styling: Tailwind CSS
- Icons: FontAwesome
- API Mocking: MSW
- Clone the repo.
npm installnpm run dev