Skip to content

Latest commit

 

History

History
98 lines (73 loc) · 3.25 KB

README.md

File metadata and controls

98 lines (73 loc) · 3.25 KB

Debug-Hunger 🍔


🚀 Project Description

This fully responsive food ordering React.js web-app is built using live Swiggy APIs and various trending technologies like:

  • Tailwind CSS as a styling framework.
  • Redux for state management.
  • React Router DOM for seamless page navigation.
  • Parcel as a bundler.
  • Babel for transpiling code.
  • React Testing Library & Jest for unit and integration testing.

It features restaurant search, cart functionality, and other essential functionalities for a smooth food ordering experience.


🎥 Live Preview

Watch the screen-shared demo video below to see the project in action:

Demo1.mp4

🛠️ Tech Stack

Frontend:

  • ⚛️ React.js: Responsive and interactive user interface.
  • 🔀 React Router: Enables seamless navigation and dynamic page rendering.
  • 🛋 Redux Toolkit (RTK): Efficient state management.
  • 🌈 Tailwind CSS: Highly customizable styling with a modern design approach.
  • 🧐 Jest & React Testing Library: Unit tests for quality assurance.

Project Features

  • Browse menus fetched using live Swiggy APIs.
  • Fully responsive and user-friendly interface.
  • Redux Toolkit-powered state management for scalability.
  • Unit testing ensures application reliability.
  • Smart Search & Filtering: Easily find top-rated restaurants.
  • Seamless navigation with React Router.
  • Context API & Redux for efficient global state management.
  • CORS Proxy Server to handle API requests without CORS issues.

📌 Learning Highlights

🔹 Lazy Loading: Reduce initial load time and optimize bundle size.
🔹 Shimmer UI: Enhance user experience during API fetch delays.
🔹 Custom Hooks: Modular and reusable logic for online/offline status detection.
🔹 Config-driven UI: Decoupling UI from data for better scalability.
🔹 React Hooks: Leverage hooks for cleaner, more efficient code.
🔹 API Calls: Fetch dynamic data from Swiggy's API without requiring a CORS extension.


⚙️ Installation Guide

Follow these steps to set up Debug-Hunger on your local system:

Step 1: Clone the Repository

git clone https://github.com/your-username/debug-hunger.git
cd debug-hunger

Step 2: Install Dependencies

npm install

Step 3: Start the Development Server

npm start

🤝 Contributions

Contributions are always welcome! Follow these steps to contribute:

  1. Fork the repository.
  2. Create a new branch (git checkout -b feature-branch).
  3. Make your changes and commit (git commit -m "Added new feature").
  4. Push the changes (git push origin feature-branch).
  5. Create a pull request.

📩 Contact

For any queries or collaborations:

📧 Email: [email protected]
🔗 LinkedIn: VeerankiSaiGopiChand
🐙 GitHub: VeerankiSaiGopiChand


Elevate your food ordering experience with Debug-Hunger! 🍽️🚀