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.
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.
On the initial load, users can seamlessly browse through a list of food items available in India.
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.
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.
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.
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.
-
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
To run the application locally, follow these steps:
-
Clone the repository:
git clone https://github.com/Satish980/Food-application
-
Install dependencies:
cd Food-application npm install
-
Run the application:
npm start
-
Open your browser and visit http://localhost:3000 to explore the BSF Food Explorer.
-
To test the application
npm run test