An interactive product catalog for gadgets built with React and Redux Toolkit.
https://annaskobara.github.io/phone_catalogue_react_redux/
You can view the original design mockup for this project here: 👉 Figma Design Link
This is an educational project showcasing various phones, tablets, and accessories. Users can browse products, filter by categories, view detailed specifications, and manage a shopping cart and favorites list with fluid navigation and smooth animations.
- React — built with functional components and modern Hooks (
useState,useEffect,useMemo) for a dynamic UI. - TypeScript — implemented for static typing to ensure code reliability and a type-safe developer experience.
- Redux Toolkit — manages global state for the shopping cart, favorites, and async product data fetching.
- React Router — handles client-side navigation with nested routes and dynamic path parameters.
- SCSS (BEM) — modular styling with a focus on responsive design, CSS variables, and maintainable structure.
- Vite — fast development server and optimized build bundling.
- Lucide React — integrated for clean, consistent, and scalable vector icons throughout the application.
- Full Product Showcase — view phones, tablets, and accessories with comprehensive technical specifications.
- Advanced Catalog Filtering — sort and filter products by categories, price range, technical features, or alphabetical order.
- Interactive Product Pages — dedicated views with image sliders, description tabs, and model/color variant selection.
- Global State Management — full e-commerce simulation with real-time cart counters, local storage persistence, and a favorites system.
- Robust UX/UI — includes loading states, smooth transitions, and responsive layouts tailored for mobile, tablet, and desktop viewports.
- Clone repository:
git clone https://github.com/annaskobara/phone_catalogue_react_redux.git - Navigate into the project directory:
cd phone_catalogue_react_redux - Install the dependencies:
npm install - Run the app:
npm start