Phone Catalog is a modern e-commerce application for viewing and selecting mobile devices. The project was created to demonstrate skills in building complex interfaces with filtering, sorting, and shopping carts, ensuring flawless UX on any device.
- React — UI framework
- TypeScript — Type safety
- SCSS — Styling and pre-processing
- React Router — Navigation and routing
- Swiper / React Slick — Interactive image sliders and carousels
- @headlessui/react — Completely unstyled, fully accessible UI components
- React Loading Skeleton — Elegant loading states
- Vite — Fast build tool
- ESLint — Code quality and consistency
- GitHub Pages — Hosting and deployment
To run the project locally, follow these steps:
git clone https://github.com/your-username/project-name.git
cd project-namenpm install
# or
yarn installnpm start
# or
yarn start- Responsive Design: Optimized for different screen sizes and devices, responsive on width 320px, 640px, 1200px, 1440px.
- Navigation: react-router-dom library is used to enable navigation between multiple pages, and URL-based search parameters are saved when navigating.
- Favorites & Cart: Adding products to favorites or shopping cart, with real-time total price calculation.
- Product Filtering: Filter products by capacity and color inside the product card or catalog.
- Sorting: Sort products based on criteria: year, price, and alphabetically.
- Search: Dynamic filtering of products using query parameters in the URL.
- Pagination: Navigate through large lists of products with an option to choose the number of items per page.
- Sticky Header: Keeps the navigation bar visible as you scroll down the page.
- Scroll to Top Button: Easily return to the top of the page with a single click.
- Loader: Uses skeleton screens for a better user experience.
This project is created for educational and portfolio purposes.