Skip to content

girish104/foodie-react-app

Repository files navigation

Foodie React App

A feature-rich food browsing web application built with Vite and React, styled using Tailwind CSS. This app allows users to browse food items, filter by origin, and sort items, all managed with the Context API.

Table of Contents

  1. Project Overview
  2. Features
  3. Installation
  4. Usage

Project Overview

The Foodie React App is designed to help users explore various food items using TheMealDB API, filter by origin, and sort by alphabetical order. It leverages React's Context API for state management, making data handling efficient across components.

Features

  • Responsive Design: Optimized for both desktop and mobile.
  • Filter & Sort Options: Users can filter food items by origin and sort them alphabetically.
  • Vite + React: Provides a fast development experience.
  • Tailwind CSS: Enables efficient styling.
  • Context API: Centralized state management.
  • React Icons: Adds visual appeal with a library of icons.

Installation

  1. Clone the repository:

    git clone https://github.com/girish104/foodie-react-app.git
  2. Navigate into the project folder:

    cd foodie-react-app
  3. Install dependencies:

    npm install
    npm install react-icons
  4. Run the application:

    npm run dev

Usage

  • Browse Food Items: View a range of food items with images, names, and descriptions.
  • Filter by Origin: Filter the displayed food items by their country of origin.
  • Sort Options: Sort items alphabetically