Phone Catalog

• DEMO LINK
• FIGMA LINK

Core

               

UI/UX

• React Router v6.25.1 — Navigation
• Swiper v12.0.2 — Image galleries
• React-Toastify v11.0.5 — Popup alerts and notifications
• SweetAlert2 v11.26.3 — Popup alerts and confirmations
• i18n (react-i18next) v25.6.3 — Internationalization and multi-language support

Developmnet & Deployment

• EsLint (V8.57.0) - Code quality

Features

• Responsive Design — The application is fully responsive and works correctly on desktop, tablet, and mobile devices.

• Performance Optimization — The application uses React performance optimizations such as useMemo, useCallback, and component memoization to reduce unnecessary re-renders and improve overall performance and Image Optimization.

• Product Shuffle Algorithm — Implements the Fisher–Yates shuffle to randomly and evenly shuffle products, ensuring a fair and dynamic display for users.

• Skeleton Loading — Uses skeleton screens to improve perceived performance and provide a smoother user experience while content is loading.

• Internationalization (i18n) — The project supports multiple languages using react-i18next, providing a personalized experience for users from different regions.

• Shopping Cart — Users can add, remove, and manage products in a shopping cart, with real-time updates to the total price and item quantities.

• User-Friendly Notifications Uses React-Toastify and SweetAlert2 to provide real-time feedback when adding or removing products from the cart, ensuring a smooth and intuitive shopping experience.

• Pagination Implements pagination to efficiently navigate through large product lists, improving performance and user experience.

• Loader / Spinner — Displays a loader or spinner during data fetching or page transitions to indicate progress and improve perceived performance.

• Error Handling — Displays clear error messages when something goes wrong, helping users understand issues and guiding them to take corrective actions.

• Product Filtering — Allows users to filter products by categories, price, or other attributes, making it easier to find desired items quickly.

• Smooth Scroll on Navigation — When switching between pages, the view automatically and smoothly scrolls back to the top, enhancing user experience.

Skills Gained / What I Learned

Working on this project allowed me to strengthen my hard skills in front-end development and improve my understanding of creating user-friendly web applications.

New Technologies & Concepts Learned:

• Internationalization (i18n) — Implemented multi-language support using react-i18next.

• Notifications — Integrated React-Toastify and SweetAlert2 for real-time user feedback.

• Fisher–Yates Shuffle Algorithm — Used to randomly and evenly shuffle products for a dynamic display.

• Skeleton Loading — Improved perceived performance with skeleton screens during data loading.

• Error Handling — Displaying clear and user-friendly error messages.

• Data Loading & Management — Handling asynchronous API calls, loaders, and spinners.

• Responsive Design & UX — Ensuring smooth navigation, scroll-to-top behavior, and interactive components for a better user experience.

• Performance Optimizations — Using useMemo, useCallback, and React.memo to reduce unnecessary re-renders.

This project helped me apply theory in practice, strengthen problem-solving skills, and improve my ability to build maintainable, interactive, and performant front-end applications.

Installation and Usage

Requirements

Before you start, make sure you have the following installed:

• Node.js (v16 or higher recommended)
• npm or yarn

Installation

Install project dependencies:

npm install
# or
yarn install

Running the Project

Start the development server:

npm start
# or
yarn start

After starting, the application will be available at:

http://localhost:3000

Build for Production

To create a production build:

npm run build
# or
yarn build

Socials