Skip to content

Satish980/Food-application

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

25 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation


Welcome to the BSF Food Explorer, a web application that allows users to explore a variety of delicious meals from different areas of the World.

Features

🍲 Lazy Loading and Skeleton Loading

The application employs lazy loading to optimize performance by loading images only when they are needed. Additionally, a skeleton loading effect is implemented to enhance the user experience while waiting for image data to load.

🌐 List of Food Items

On the initial load, users can seamlessly browse through a list of food items available in India.

🌍 Filter by Area

Users have the ability to filter food items based on different areas. The application provides a user-friendly dropdown menu that allows users to select their preferred area, enhancing the browsing experience.

🔄 Sort Functionality

Users can sort the list of food items alphabetically or in reverse alphabetical order. This feature is designed to help users quickly find their favorite meals based on their preferences.

📄 Pagination

The application includes a pagination feature, allowing users to navigate through multiple pages of food items. This feature is useful for users who want to explore a diverse range of meals conveniently.

🍽️ Detailed Meal View

By clicking on a specific meal from the list, users can view detailed information about that meal, including its category, area, recipe, and ratings. The lazy loading mechanism ensures efficient loading of this detailed view.

Technologies and Libraries Used

  • React.js: The frontend is developed using React.js, providing a dynamic and responsive user interface.

  • ReduxBundler: State management is handled efficiently using ReduxBundler, ensuring a well-organized and scalable application.

  • Tailwind CSS: The application's UI is styled using Tailwind CSS, offering a clean and modern design.

  • API: Meal data is fetched from The MealDB API, providing a vast collection of meal information.

  • Font Awesome: The application's icons are taken from Fontawesome.

  • Jest: Test suites are written using Jest.

  • Netlify: Application deployed in netlify: BSF Food Explorer

Getting Started

To run the application locally, follow these steps:

  1. Clone the repository:

    git clone https://github.com/Satish980/Food-application
  2. Install dependencies:

    cd Food-application
    npm install
  3. Run the application:

    npm start
  4. Open your browser and visit http://localhost:3000 to explore the BSF Food Explorer.

  5. To test the application

    npm run test