shailesh12-svg / foodexplorer-web-app

"Namaste-React" - I have developed an online food ordering application called 'FoodExplorer' using React. This is my first project developed using React.

🚀 FoodExplorer | Gastro Guide FoodExplorer Introducing FoodExplorer, a food ordering app powered by React.js that effortlessly links users with their favorite dishes. What sets it apart? Integration with the live Swiggy API With Redux handling state, React Router DOM ensures easy navigation and CSS crafting a visually appealing interface, alongside Lazy Loading. Also, it utilizes Parcel for efficient bundling. Explore the features below.

🎯 Key Features 🌏 Real-time Swiggy API Integration: FoodExplorer provides users with up-to-the-minute information on menus, availability, and promotions, ensuring accurate and reliable details for informed dining choices.

🚀 Lazy Loading & Chunking: FoodExplorer implements lazy loading and chunking for optimization, reducing app loading time significantly.

⚡ Custom Hook: FoodExplorer utilizes custom hooks, enhancing code reusability and maintainability, allowing for a more efficient development process and a streamlined architecture.

🔐 State Management with Redux: FoodExplorer ensures a scalable and organized application state with Redux, streamlining data flow and providing a centralized management system for a seamless user experience.

🔍 Search Functionality: Easily find your desired restaurants or dishes with FoodExplorer's intuitive search feature.

🎯 Filtering Options: Tailor your browsing experience with filtering options, allowing you to discover restaurants based on specific categories or preferences.

📌 Seamless Navigation: With React Router DOM, the app provides a smooth and intuitive navigation experience, enabling users to effortlessly explore different sections, from discovering restaurants to tracking orders, without disruptions.

📜 Detailed Restaurant Information: Get comprehensive details about each restaurant, including menus, offers, and more, providing you with the information needed to make informed choices.

✨ Shimmer UI: FoodExplorer enhances user interface transitions with shimmer UI, providing a visually appealing loading effect during data retrieval, creating a polished and engaging experience for users while waiting for content to load.

🚧 Error 404 Page: In the event of a page not found or API failure, FoodExplorer gracefully presents a user-friendly Error 404 page, ensuring a smooth and informative experience for users.

🚧 Network Error Page: In case of a network error or when the app is offline, FoodExplorer displays a page prompting users to check their internet connection.

🔧 FoodExplorer's Tech Stack: React: Powering the dynamic and interactive user interface.

Parcel: Efficiently bundling and managing packages for streamlined development.

Redux Toolkit: Managing application state for a scalable and organized architecture.

React Router: Enabling seamless navigation within the application.

⭐️ Show your support If you find value in this project, I would sincerely appreciate your support. Feel free to share it with others who may benefit from it. Your contribution is crucial for my growth and enhancement.

Parcel

• Dev Build
• Local Server
• HMR (Hot Module Replacement): Exchanges, adds, or removes modules while an application is running, without a full reload.
• File Watching Algorithm: Written in C++
• Caching: Faster Builds
• Image Optimization
• Minification of Files
• Bundling: Bundles all files into one file
• Compressing
• Consistent Hashing
• Code Splitting
• Differential Bundling: Supports older browsers
• Host on HTTPS
• Tree Shaking: Removes Unused Code
• Different dev and production bundles
• Chunking | Code Splitting | Lazy Loading | Dynamic Bundling | On Demand Loading: Breaks down apps into smaller logical chunks

FoodExplorer App

Header

• Logo
• Nav Items

Body

• Search
• Restaurant Container
  • Restaurant Card
    • Img
    • Name
    • Star Rating
    • Delivery Time
    • Cuisines

Footer

• Copyright
• Links
• Address
• Contact

React Hooks

• useState()
• useEffect()

Redux Toolkit

• Install @reduxjs/toolkit and react-redux
• Build the store
• Connect the store to the app
• Slice (cartSlice)
• dispatch(action)
• Selector

Types of Testing (Developer)

• Unit Testing
• Integration Testing
• End to End Testing (e2e Testing)

Setting up Testing in our App

• Install React Testing Library
• Install Jest
• Install Babel Dependencies
• Configure Babel
• Configure Parcel Config file to disable default Babel Transpilation
• Jest Configuration: npx jest --init
• Install jest-environment-jsdom
• Install @babel/preset-react to make JSX work in test cases
• Include @babel/preset-react inside the Babel config
• Install @testing-library/jest-dom

---

.