Phone Catalog Project
This project is a responsive web application that serves as an online store for phones, tablets, and accessories. It offers a modern design, clean code structure, and is optimized for performance and responsiveness.
Technologies Used
React: Utilized for building the user interface with reusable components, ensuring efficient rendering and a dynamic user experience.
TypeScript: Employed for static typing, enhancing code quality, maintainability, and developer productivity.
SCSS (Sass): Used for styling the application, allowing for modular and maintainable CSS with features like variables, nesting, and mixins.
Features
Product Catalog: Browse through a comprehensive catalog of phones, tablets, and accessories, each with detailed information and images.
Shopping Cart: Add products to the cart with quantities saved in local storage, ensuring persistence across sessions.
Favorites: Mark products as favorites, with selections saved in local storage for easy access.
Filtering and Sorting: Filter products by price, newness, and alphabetically. Search queries and filters are saved in URL parameters, enabling easy sharing of specific views.
Product Details: Access detailed information about each product, including specifications and customization options like capacity and color.
Responsive Design: The application is fully responsive, ensuring a seamless experience across various devices and screen sizes.
Custom 404 Page: Displays a user-friendly 'Not Found' page for undefined routes or incorrect URLs.
Project Setup and Running Locally
Prerequisites
Before running the project locally, ensure you have the following tools installed:
Node.js: Download and install Node.js from here.
npm: This comes bundled with Node.js, but you can also install it separately if needed.
Steps to Set Up the Project Locally
Clone the Repository
Open your terminal and run the following command to clone the project: git clone https://github.com/DaniilBarilotti/phone-catalog.git
Navigate to the Project Directory cd phone-catalog
Install Dependencies npm install
Start the Development Server npm start
After starting the server, the project will be accessible via a local URL like http://localhost:3000 or http://localhost:8080 (depending on your setup).
This setup will allow you to run and explore the Phone Catalog project locally, providing a comprehensive view of its features and code structure.