Note: I am excited to submit my assignment, where I took the initiative to create a unique project to stand out among other candidates. I developed an Online Food Ordering Website using React.js and its JSX syntax. This project not only aligns with concepts similar to the provided tasks but also demonstrates my ability to innovate and adapt to different scenarios.
The Dynamic Food Application is a responsive web application built using ReactJS, designed to provide users with a curated restaurant listing and interactive menus. It includes features such as multi-page navigation, real-time data integration from the Zomato API, and responsive design principles for optimal user experience across various devices.
- Curated Restaurant Listing: Displays a list of curated restaurants fetched from the Zomato API.
- Interactive Menu Pages: Detailed pages for restaurant menus, presented in dropdown form upon clicking a restaurant.
- Multi-Page Navigation: Smooth navigation between different pages using React-Router-Dom.
- React Components, Hooks, and States: Utilizes modern React concepts for dynamic functionality and state management.
- Search Functionality: Implemented a search bar to find specific food items from available data in the Zomato API.
- Filtering: Added a filter button to display restaurants with ratings greater than 4.0 stars.
- Responsive Design: Ensures optimal user experience across devices using responsive design principles.
- Shimmer UI: Displays fake shimmered cards while the page loads content from the API, providing users with a visual indication of the type of content to be displayed.
- ReactJS: Frontend library for building the user interface with JSX syntax.
- React-Router-Dom: For client-side routing within the application.
- JavaScript: Used for programming logic.
- CSS: For styling components and ensuring responsive design.
- HTML: For structuring web pages.
- Zomato API: Integrated for fetching restaurant and menu data dynamically.
Restaurant Menu: Detailed pages for Restaurant Menus, presented in dropdown form upon clicking a restaurant.
Shimmer UI: Display of fake shimmered cards while the page loads content from the API, providing users with a visual indication of the type of content to be displayed.
- Home Page: Displays a list of curated restaurants.
- Restaurant Details Page: Click on a restaurant to view its detailed menu.
- Navigation: Use the navigation links to switch between different pages.
- Search Bar: Enter keywords to search for specific food items.
- Filter Button: Click to filter restaurants by ratings greater than 4.0 stars.
- Responsive Design: The application adjusts its layout based on the screen size for optimal viewing.
- Shimmer UI: Observe shimmered cards indicating loading content while the data is being fetched from the API.
Contributions are welcome! Please fork this repository and submit pull requests for any improvements.
This project is licensed under the MIT License. See the LICENSE file for more details.