CraveDash is a highly optimized, fully responsive, and production-ready digital food ordering application modeled on modern gourmet restaurant systems like Swiggy and Zomato. Engineered from first principles rather than off-the-shelf templates, it features robust global state management, custom-built responsive grid systems, elegant micro-interactions, and an advanced, resilient local simulation of real-world cursor-based API pagination.
This repository stands as a testament to professional frontend architecture, structured under strict Separation of Concerns (SoC) and the Single Responsibility Principle (SRP).
You can view the live deployment of this project here: crave-dash
A production-grade application is defined by what happens under the hood. CraveDash was built with an uncompromising dedication to clean, optimized, and robust software craftsmanship:
- Zero Copy-Paste, Pure Logic Construction: Built with a "learn-by-doing" ethos, ensuring every custom hook, algorithm, and responsive calculation was engineered manually from scratch.
- Preventing Leaky Abstractions: Adhering to encapsulation principles by exposing strict interfaces (such as converting internal offset states to clear boolean
hasMorewrappers for consumption by UI components). - Strict Avoidance of State Duplication: Eliminating standard anti-patterns by relying on Derived State. Properties like search-filtered restaurant lists, total cart billing, and checkout charges are calculated dynamically on-the-fly during each render cycle rather than being synchronized across fragile, multi-layered
useStateoruseEffectchains. - Memory Leak Prevention & Garbage Collection: Designed custom event-driven components (such as connection monitoring hooks) with dedicated, deterministic unmounting cleanup functions. Registered listener references are explicitly removed to assist browser garbage collection and prevent memory overhead.
- GPU-Accelerated Visual Animations: Utilizing hardware-accelerated CSS properties (
transformandopacity) rather than layout-heavy transitions (all) to ensure rendering pipelines stay locked at a buttery-smooth 60fps.
The codebase is refactored from a bloated, single-file "God Component" structure into micro-modular components and deeply scoped Custom Hooks:
useRestaurantData: Safely isolates live open APIs, cursor parsing, and mock pagination merges.useFilters: Coordinates derived search inputs and active multi-criteria sorting modes.useIntersectionObserver: A highly generic, reusable hook driving infinite scrolling across the viewport.useInternetConnection: Seamlessly tracks client network state, handling online/offline transitions smoothly.
Standard templates often limit search to a single attribute. CraveDash features *Multi-level Intersecting Filters. Users can combine Veg/Non-Veg filters with premium Bestseller flags, running an intersecting check over the active men. If a category's active items drop to zero during filtering, the entire accordion header gracefully degrades and slides out of view to avoid displaying empty section.
To implement endless scrolling, standard scroll handlers trigger costly, un-debounced event storms (firing up to 100 times per second) that choke the main threa. CraveDash relies on the modern Intersection Observer API . By placing an invisible target div at the footer, the app lazily pre-fetches the next cursor segment only when the target intersects with the viewpor.
To resolve key-clashing bugs when blending live API data with local static mock payloads (where famous chains might exist on both lists), a custom Bouncer Logic was buil. When a pagination trigger completes, the array bouncer scans and filters out any duplicate IDs, merging only unique entries and keeping the console 100% clea.
Avoiding fragile media query blocks, the restaurant feed uses a modern CSS Grid with minmax() logi. The page strictly locks the layout boundaries to 1300px (matching industry giants like Swiggy, scaling seamlessly to 4 columns on desktops, 3 on tablets, and responsive column stacks on mobile viewport.
- Stealth Proxy Prototyping & Fallback Simulation: Explored and programmed a custom Node.js and Express.js proxy wrapper mimicking standard browser requests with User-Agent spoofing to bypass CORS. When Swiggy's enterprise Cloudflare security enforced rigid TLS fingerprint blocks on paginated endpoints, engineered a high-fidelity Local Pagination Simulation Engine. This simulates network delay using chained
setTimeoutpromises, allowing smooth dry-running of theIntersectionObserverscroll loop. - Micro-interactions & Toggles: Slider-pill controls for Veg/Non-Veg filters that physically translate a custom indicator and active states for Bestseller pills providing clean, light-green tint feedback with custom '✕' indicators.
- Recursive Hierarchical Accordions: Supports nested restaurant menu rendering. A custom recursion pattern checks if a menu segment holds item listings (
ItemCategory) or further sub-categories (NestedItemCategory), seamlessly rendering sub-accordions without prop-drilling or layout collapse bugs. - Polymorphic Contextual Components: The core
ItemCardcomponent adapts dynamically. When loaded within a menu listing, it renders full descriptions and layout details. When passed a boolean context flag (isCartItem={true}), it shifts into a highly-compact cart format, stripping descriptions, modifying card borders, and activating responsive dimensions. - Global Cart with Live Math Engines: Subscribes to a centralized Redux Toolkit store. Cart modifications calculate sub-totals, platform fees, and live GST dynamically to the decimal.
- Modular Loading Shimmers: Features tailored, percentage-width skeleton loaders for both restaurant cards and the 800px-wrapped menu listings.
- Polished Off-line Fallbacks: Replaces broken pages with an interactive, floating-animated SVG offline alert if network loss is detected via browser hooks.
- Frontend: React.js (v18.x), React Router, Redux Toolkit.
- Styling: Pure CSS / SCSS utilizing modern nested hierarchies.
- Build Bundler: Parcel Bundler with Hot Module Replacement (HMR).
- Prototype Proxy Gateway: Node.js, Express.js, CORS.
Ensure you have Node.js (v18+) and npm installed locally.
# Clone the repository
git clone https://github.com/monukd01dev/crave-dash.git
cd crave-dash
# Install frontend dependencies
npm installCraveDash is designed to retrieve initial restaurant feeds from the live API (or local fallbacks) and seamlessly streams subsequent mock paginated segments (mock_page_1 to mock_page_4) through a simulated database engine, bypassing Cloudflare's bot-detection barriers on paginated updates.
Run the Parcel development bundle from the root directory:
# Start development server
npm startOpen your browser and navigate to http://localhost:1234 to browse the application.
CraveDash was crafted with care and a strict developer-first architecture by monukd01dev.