https://github.com/satish980/food-application
Food Application using React and Redux Bundler
https://github.com/satish980/food-application
debounce-input html javascript jest-tests netlify-deployment react redux-bundler tailwindcss
Last synced: 3 months ago
JSON representation
Food Application using React and Redux Bundler
- Host: GitHub
- URL: https://github.com/satish980/food-application
- Owner: Satish980
- Created: 2024-01-31T03:50:20.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-02-25T12:44:25.000Z (about 1 year ago)
- Last Synced: 2025-01-13T08:13:31.955Z (4 months ago)
- Topics: debounce-input, html, javascript, jest-tests, netlify-deployment, react, redux-bundler, tailwindcss
- Language: JavaScript
- Homepage: https://bsf-application-swiggy.netlify.app/
- Size: 345 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
---
# [BSF Food Explorer](https://bsf-application-swiggy.netlify.app/)
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](https://www.themealdb.com/api.php), 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](https://bsf-application-swiggy.netlify.app/)
## Getting Started
To run the application locally, follow these steps:
1. Clone the repository:
```bash
git clone https://github.com/Satish980/Food-application
```
2. Install dependencies:
```bash
cd Food-application
npm install
```
3. Run the application:
```bash
npm start
```
4. Open your browser and visit [http://localhost:3000](http://localhost:3000) to explore the BSF Food Explorer.
5. To test the application
```bash
npm run test
```
---