Foodah π½οΈ
Foodah is a dynamic, responsive website that integrates various APIs and custom-built components to deliver a seamless user experience. This project showcases advanced data fetching, error handling, and performance optimizations, along with a stylish and intuitive design.
Technologies Used
- JavaScript
- React
-
Tailwind CSS:
tailwindcss
-
PostCSS:
postcss
- React Router Dom
- React Icons
- Email.js
-
Build Tool:
Parcel
Features
π§ Navigation
-
Quick Routes: Easily access important sections like About Developer, About Site, Contact Us, and Network Status.
-
Enhanced User Experience: Intuitive layout and organization for smooth browsing.
π Data Fetching
-
Swiggy API Integration
-
Live Data: Retrieves current data directly from Swiggy's hosted API.
-
Error Handling: Uses optional chaining for graceful error management.
-
GitHub API Integration
-
Dynamic Content: Fetches developer data from the GitHub API for the About section.
-
Interactive Display: Keeps the About section updated in real-time.
β Error Management
-
Error Component: Displays user-friendly error messages for incorrect routes, enhancing navigation and recovery from issues.
β¨ Shimmer UI
-
Loading Experience: Implements a shimmer UI effect for an engaging loading experience while fetching content.
π Custom Hooks
-
useOnlineStatus
- Detects the user's online status and updates the navbar accordingly.
- Displays a clear error message when offline.
-
useRestaurantMenu.js
- Fetches restaurant menu data from the API.
-
useFallbackImage.js
- Handles image loading failures by substituting missing images with random alternatives.
π Personalized Footer
-
Developer Information: Displays relevant information about the developer, including contact details and important links.
π¨ Design & Development
-
Stylish Design: Aesthetically pleasing and functional design for a smooth user experience.
π Performance Optimization
-
Lazy Loading & Suspense: Utilizes lazy loading and suspense to optimize performance, especially with large data sets (approx. 14,000 JSON lines).
π Detailed Documentation
-
Comprehensive Resources: For more insights, visit the developerβs blogs or portfolio for in-depth notes and a detailed project description.
Problems Faced & Solutions
-
Large Data Handling: Deep reading of routes for effective data destructuring.
-
Frequent Data Changes: Encountered errors due to dynamic API data.
-
CORS Issues: Used CORS proxy solutions for development.
-
Deployment Issues: Updated dependencies and managed nested routes to avoid 404 errors.
-
Image Loading Time: Implemented lazy loading for image optimization.
-
Undefined Image Handling: Created a custom hook to handle image loading failures with fallback images.
Getting Started
Prerequisites
- Node.js (v14.x or later)
- npm (v6.x or later) or Yarn
Installation
-
Clone the Repository
git clone [https://github.com/your-username/foodah.git](https://github.com/AmanSuryavanshi-1/Foodah)
cd foodah
-
Install Dependencies
Using npm:
npm install
Using Yarn:
yarn install
Running the Project Locally
-
Start the Development Server
Using npm:
npm start
Using Yarn:
yarn start
-
Open in Browser
Visit http://localhost:3000
to view the app in the browser.
Building for Production
-
Build the Project
Using npm:
npm run build
Using Yarn:
yarn build
-
Serve the Build
The production-ready files will be in the dist
folder. You can serve these files using any static server.
Deployment
Foodah is deployed using Vercel. To deploy your own version:
-
Push to GitHub
Ensure your changes are committed and pushed to your GitHub repository.
-
Deploy on Vercel
- Go to Vercel.
- Click New Project and select your GitHub repository.
- Configure the settings if necessary and click Deploy.
Vercel will automatically build and deploy your project.
Contributing
Contributions, issues, and feature requests are welcome! Feel free to check out the issues page.
License
This project is licensed under the MIT License.