A React practice project featuring a dynamic menu with category filtering functionality. Built to practice state management and component composition in React.
- Category Filtering - Dynamic filtering of menu items by category
- Responsive Grid Layout - Adapts to different screen sizes
- Interactive UI - Smooth category selection with visual feedback
- State Management - Efficient state handling with useState hook
- Component Architecture - Well-structured component hierarchy
This project was created to complete specific challenges focused on foundational React concepts:
- Component Communication - Sharing data and callback functions between parent and child components via props
- State Management - Using useState hook for menu items and categories
- Dynamic Filtering - Implementing category-based filtering functionality
- Component Composition - Building reusable Title, Menu, MenuItem, and Categories components
- Data Handling - Importing and manipulating menu data from external file
- Array Methods - Utilizing map(), filter(), and Set for data manipulation
- Conditional Rendering - Dynamically displaying menu items based on selected category
- Event Handling - Implementing click events for category filtering
- Vite + React
- JavaScript (ES6+)
- HTML5 & CSS3
View Live on Netlify: Click here
Figma design provided by the course instructor: Preview here
- Node.js ≥ 18
- npm or yarn
- Clone the repository
git clone https://github.com/pro804/Menu-Filter-UI.git- Navigate to the project directory
cd Menu-Filter-UI- Install dependencies
npm install- Start the development server
npm run dev- Open http://localhost:5173 to view it in the browser.
npm run dev— Runs the development server (Vite)npm run build— Builds the app for productionnpm run preview— Previews the production build locally
This project is created for educational purposes as part of a React learning journey.