{"id":29582089,"url":"https://github.com/irandoust/retail-product-catalog-frontend","last_synced_at":"2025-07-19T21:32:34.881Z","repository":{"id":305345233,"uuid":"872108035","full_name":"Irandoust/retail-product-catalog-frontend","owner":"Irandoust","description":"Retail Product Catalog with Fuzzy Search - Frontend Project Documentation","archived":false,"fork":false,"pushed_at":"2024-10-13T21:59:58.000Z","size":199,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-19T18:28:56.316Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Irandoust.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-10-13T19:50:39.000Z","updated_at":"2024-10-15T08:01:47.000Z","dependencies_parsed_at":"2025-07-19T18:29:00.931Z","dependency_job_id":"21fcdba1-f1b2-4685-a53d-8c20d46e432c","html_url":"https://github.com/Irandoust/retail-product-catalog-frontend","commit_stats":null,"previous_names":["irandoust/retail-product-catalog-frontend"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/Irandoust/retail-product-catalog-frontend","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Irandoust%2Fretail-product-catalog-frontend","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Irandoust%2Fretail-product-catalog-frontend/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Irandoust%2Fretail-product-catalog-frontend/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Irandoust%2Fretail-product-catalog-frontend/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Irandoust","download_url":"https://codeload.github.com/Irandoust/retail-product-catalog-frontend/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Irandoust%2Fretail-product-catalog-frontend/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266019657,"owners_count":23864916,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-07-19T21:30:31.303Z","updated_at":"2025-07-19T21:32:34.874Z","avatar_url":"https://github.com/Irandoust.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Retail Product Catalog with Fuzzy Search - Frontend Project Documentation\n\nBy Ali Irandoust\n\nThis is the **frontend** for the Retail Product Catalog system, which interacts with a backend API to display, search, and manage products. The frontend is built with **React** and **TypeScript** from scratch, and uses **Axios** to handle API requests. It offers a paginated product list, a search feature, and detailed product views. The project integrates **Bootstrap CSS** for responsive styling and clean UI components.\n\nThe backend API handles product data, while this frontend connects to the backend API to display that data in an intuitive and user-friendly interface.\n\n## Table of Contents\n\n- [Project Overview](#project-overview)\n- [Models](#models)\n- [API Integration](#api-integration)\n- [Components](#components)\n- [Pages](#pages)\n- [Styling with Bootstrap CSS](#styling-with-bootstrap)\n- [Running the Project](#running-the-project)\n- [Environment Variables](#environment-variables)\n- [Key Dependencies](#key-dependencies)\n\n## Project Overview\n\nThis project provides an interactive user interface for the product catalog, built with **React** and **TypeScript**. Users can browse through a list of products, search by product name, and view detailed information about individual products. The frontend connects to the backend API through **Axios** to retrieve product data and perform actions like searching and pagination.\n\n## Key Features\n\n- Paginated product list display.\n- Search functionality that filters products by name.\n- Detailed product view for each individual item.\n- Loading and error handling for data fetching.\n- Bootstrap CSS integration for responsive UI design.\n\n## Models\n\nTo ensure type safety and consistency across the application, several reusable TypeScript interfaces are defined in the `models/` directory:\n\n- **Product**: Represents the structure of a product in the catalog, including fields like `id`, `name`, `price`, `caregory`, `description`, and `imageUrl`.\n- **ServiceResponse**: A generic interface to standardize API responses, including success flags, messages, status codes, and the returned data.\n\n- **PaginatedResult**: Handles paginated API responses, providing metadata like `page`, `limit`, `totalItems`, `totalPages`, and the array of `results`.\n\nThese models are used across the application to ensure type safety and consistent structure for API responses.\n\n## API Integration\n\nThe frontend interacts with the backend API through the `api/productApi.ts` file, using **Axios** for HTTP requests. The API service layer abstracts the actual API calls and handles the data fetching.\n\nThe key API functions are:\n\n- **fetchProducts**: Fetches a paginated list of products from the backend.\n- **fetchProductById**: Retrieves detailed information about a specific product by its ID.\n\n- **searchProducts**: Allows users to search for products by name with pagination support.\n\nThese functions ensure data is fetched in a structured and consistent manner, using the `ServiceResponse` and `PaginatedResult` models for type safety.\n\n## Components\n\nThe UI is built with reusable React components that encapsulate different parts of the application. Each component handles a specific responsibility, ensuring a clean separation of concerns.\n\n- **SearchBar**: Allows users to input search terms to filter products by name.\n- **ProductList**: Displays a paginated list of products, integrates the search feature, and allows navigation through product pages.\n\n- **ProductItem**: Represents an individual product within the list, displaying details like image, name, price, and category.\n\n- **Loading**: Displays a loading spinner while data is being fetched.\n\n- **Error**: Displays error messages when there is an issue with data fetching.\n\n- **Pagination**: Manages page navigation, allowing users to move through product pages.\n\n- **NoResult**: Displays a message when no products match the search criteria.\n\n## Pages\n\nThe application consists of the following pages:\n\n- **ProductListPage**: Displays the main product catalog with pagination and search functionality.\n- **ProductDetailPage**: Displays detailed information about a specific product selected from the catalog.\n\nThese pages handle the core navigation and interaction for the product catalog.\n\n## Styling with Bootstrap\n\nThe app uses **Bootstrap** for responsive, clean UI styling. Bootstrap's built-in classes (such as `alert`, `btn`, and `media`) are applied to components for consistent layout and styling. This helps reduce the need for custom CSS while ensuring a polished and modern look across different screen sizes.\n\n## Running the Project\n\n1. Install the dependencies:\n\n```sh\n   npm install\n```\n\n2. Run the development server:\n\n```sh\n   npm start\n```\n\nThe app will be available at `http://localhost:3000`.\n\n3. Build the project for production:\n\n```sh\n   npm run build\n```\n\n## Environment Variables\n\nYou can configure the following environment variables in a `.env` file at the root of the project:\n\n- **REACT_APP_API_BASE_URL**: The base URL for the API (defaults to `http://localhost:3000` if not provided).\n\nExample `.env` file:\n\n```sh\n  REACT_APP_API_BASE_URL=http://localhost:3000\n```\n\n## Key Dependencies\n\n- **Axios**: For making API requests.\n- **React Router DOM**: For routing within the app.\n- **Bootstrap CSS**: For responsive and clean UI styling.\n- **TypeScript**: For type-safe development.\n\nThis project is built using **React**, **TypeScript**, **Axios**, and **Bootstrap**. The app supports pagination, search functionality, and uses reusable models for consistent API response handling.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Firandoust%2Fretail-product-catalog-frontend","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Firandoust%2Fretail-product-catalog-frontend","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Firandoust%2Fretail-product-catalog-frontend/lists"}