Filtering

A professional React + Vite product filtering interface focused on a footwear catalog. The application demonstrates a clean client-side filtering experience with searchable products, sidebar filters, recommended brand shortcuts, and reusable UI components.

Overview

This project presents a product listing page where users can browse shoes and narrow results instantly using multiple filter controls. It is a good starter project for learning React state management, component composition, and data-driven UI rendering.

Features

• Real-time search by product name
• Filter products by category
• Filter products by price range
• Filter products by color
• Quick brand selection through recommended buttons
• Reusable card, input, and button components
• Lightweight frontend setup with Vite

Tech Stack

• React 19
• Vite 7
• React Icons
• ESLint
• Feature-based plain CSS organization

Project Structure

Filtering/
|-- public/
|-- src/
|   |-- assets/
|   |-- components/
|   |-- db/
|   |-- Navigation/
|   |-- Products/
|   |-- Recommended/
|   |-- Sidebar/
|   |-- App.jsx
|   |-- index.css
|   |-- main.js
|   |-- main.jsx
|-- index.html
|-- package.json
|-- vite.config.js

Getting Started

Prerequisites

• Node.js 18 or later
• npm 9 or later

Installation

npm install

Run Locally

npm run dev

Open the local URL shown in the terminal, typically http://localhost:5173.

Available Scripts

npm run dev

Starts the development server with hot module replacement.

npm run build

Creates an optimized production build.

npm run preview

Serves the production build locally for preview.

npm run lint

Runs ESLint checks across the project.

How Filtering Works

• The search bar filters products by title in real time.
• Sidebar radio groups filter by category, price, and color.
• Recommended buttons provide quick filtering by brand.
• Product cards are rendered dynamically from the dataset in src/db/data.jsx.

Use Cases

• React practice project for component-based UI design
• Demo app for client-side filtering logic
• Starter template for an e-commerce catalog interface

Improvement Ideas

• Add multi-select filtering
• Normalize product data types for stronger filtering logic
• Replace mock data with an API or backend service
• Add routing, pagination, and product details pages
• Improve accessibility and keyboard navigation

Authoring Notes

The current dataset is local and static, which makes the project simple to run and easy to extend. Most application behavior is managed from src/App.jsx, while filter controls are grouped under the src/Sidebar/ directory for maintainability.