Project Overview
This web application is a responsive restaurant discovery dashboard built using React. It allows users to search, filter, and review details of local dining establishments. Rather than serving static mocked mockups, the app integrates with live delivery APIs to fetch actual menus, ratings, locations, and pricing tags, creating a real-world utility.
Architecture & Core Tech
Built with React, the application structures components systematically into search, card wrappers, detail views, and filtering pills.
System Data Flow
- Live API Fetching: The app queries Swiggy's live directory APIs over HTTP. To bypass standard browser CORS blocks during development and runtime, requests are routed through a CORS proxy service.
- Caching and State Management: Data results are cached in local component state to reduce API request volumes. Active search strings and filters are maintained through state handlers.
- Styling Layer: Layout responsiveness and modern spacing tokens are handled using Tailwind CSS classes.
Key Features & Implementation
- Real-time Search & Filter: Input fields that instantly filter cards by name, food style, rating, or delivery time.
- Detailed Menu Views: Selecting a restaurant retrieves its custom menus, divided by categories (e.g. starters, mains, desserts).
- Shimmer Skeletons: CSS-driven skeleton cards display while API data is fetched, preventing layout reflow.
- Fully Responsive: Adapts fluidly from small smartphones to large monitors.
Key Lessons & Takeaways
Developing this app highlighted standard CORS policies and browser security measures. Handling network latency on external endpoints demonstrated the value of optimizing assets, compressing image ratios, and designing defensive fallback layouts (such as zero search results displays or server error alerts).