This modern catalog application, built with React and TypeScript, is designed to provide an exceptional shopping experience. It features a comprehensive catalog of products, offering users advanced functionality such as filter by phones, tablets and accessories, sorting, search and theme switching. With its seamless blend of simplicity and functionality, this app delivers an intuitive and enjoyable shopping journey for every user.
This product catalog app offers a modern, minimalist design and a seamless shopping experience, with a responsive layout that adapts to devices of all sizes, ensuring effortless browsing across screens, plus pagination for effortless browsing.
Users can switch between light and dark themes for a personalized experience. Sticky headers and footers enhance navigation and accessibility.
Interactive elements and hover effects make the app dynamic, while the homepage highlights hot deals and new arrivals. Products category pages include sorting and seaching for easy navigation.
- React Router enables navigation between pages without reloading the entire application.
- React Loading Skeleton for displaying placeholders during data loading.
- React Transition Group enables smooth transitions and animations between components.
- LocalStorage for persisting data such as favorites and cart items.
The app is fully responsive, adapting to all devices and orientations:
- Desktop: >1120px
- Tablet: 764px–1120px
- Mobile: <764px
Users can toggle between light and dark color schemes for a personalized experience.
The app includes a detailed product catalog with features like search, sorting, pagination and individual product details for easy browsing and selection.
The app integrates with an internal API for dynamic product data, uses skeleton loaders to improve perceived performance, and stores user preferences (favorites and cart items) in local storage.
Fork original repository on GitHub
Clone the forked repository:
git clone https://github.com/hsvirina/phone-catalog-app.git
Navigate to the project directory:
cd phone-catalog-app
Install the necessary project dependencies:
npm install
Start the project:
npm start