Online mobile phone store
A modern and functional e-commerce application for a mobile phone catalog, developed according to a professional Figma layout. The project is focused on creating a fast, interactive, and fully responsive interface (Mobile-first).
Key functionalities of the project:
• A complete product catalog with pagination for easy navigation.
• Flexible sorting (by price, novelty, alphabetically) and filtering by categories.
• Live product search by name.
• Product detail page with full information, an image gallery (photo switching), and a recommended products section.
• Cart functionality: adding/removing products, managing quantities, dynamic calculation of total cost.
• "Favorites" section: adding products to favorites with state persistence between user sessions (Persistent state).
Technology stack:
• React (component architecture, hooks)
• TypeScript (strict data typing)
• React Router DOM (implementation of multi-page navigation)
• SCSS / Bulma CSS (responsive pixel-perfect layout using BEM methodology)
• Vite (fast application build)
• Cypress (interface functionality testing)
• ESLint / Prettier (code cleanliness and formatting)
During development, complex tasks related to managing the global state of the application (cart, favorites), optimizing the logic of filtering large data arrays, and ensuring perfect display on smartphones, tablets, and desktops were successfully resolved.
#react #typescript #frontend #scss #ecommerce #web-programming #layout #figma
Key functionalities of the project:
• A complete product catalog with pagination for easy navigation.
• Flexible sorting (by price, novelty, alphabetically) and filtering by categories.
• Live product search by name.
• Product detail page with full information, an image gallery (photo switching), and a recommended products section.
• Cart functionality: adding/removing products, managing quantities, dynamic calculation of total cost.
• "Favorites" section: adding products to favorites with state persistence between user sessions (Persistent state).
Technology stack:
• React (component architecture, hooks)
• TypeScript (strict data typing)
• React Router DOM (implementation of multi-page navigation)
• SCSS / Bulma CSS (responsive pixel-perfect layout using BEM methodology)
• Vite (fast application build)
• Cypress (interface functionality testing)
• ESLint / Prettier (code cleanliness and formatting)
During development, complex tasks related to managing the global state of the application (cart, favorites), optimizing the logic of filtering large data arrays, and ensuring perfect display on smartphones, tablets, and desktops were successfully resolved.
#react #typescript #frontend #scss #ecommerce #web-programming #layout #figma