Eatsy Restaurant Directory WebApp

Overview

Eatsy is a dynamic and user-friendly restaurant directory application designed to provide a seamless dining experience. Built with modern React patterns and best practices, this webapp offers an intuitive and visually appealing platform for users to discover, explore, and interact with restaurants. The application leverages Redux Toolkit for state management, React Router for navigation, and Tailwind CSS for styling.

Key Features

• React Component Reusability: Maximize code reuse with modular, reusable React components
• Photo Gallery: Display beautiful galleries of restaurant images with lazy loading
• Third-Party API Integration: Connect to live restaurant APIs for real-time data
• Restaurant Details Page: Visually appealing display of restaurant information and menus
• Shimmer UI Components: Loading skeletons provide smooth user experience during data fetching
• Online Status Indicator: Real-time internet connection status monitoring
• Lazy Loading: Optimize performance with component-level code splitting
• Advanced Search: Enable users to search and filter restaurants efficiently
• Config-Driven UI: Configure UI elements through centralized configuration
• Code-Splitting: Improve initial load time by splitting code into smaller chunks
• Higher-Order Components: Reusable component logic for better code organization
• React Router DOM: Seamless navigation between components without page reloads
• Live API Integration: Real-time data updates from restaurant APIs
• Tailwind CSS Styling: Utility-first CSS framework for rapid UI development
• Parcel Bundler: Fast bundling and hot module replacement
• Context API: Global state management for theme and user preferences
• React Testing Library: Comprehensive component testing
• Custom Hooks: Reusable hooks for common functionality
• Redux Toolkit: Efficient state management for cart and user data

Why I Built This

I wanted to create a production-ready restaurant discovery application that demonstrates:

• Advanced React patterns and component architecture
• Modern state management with Redux Toolkit
• Performance optimization techniques
• Testing best practices with React Testing Library
• Real-world API integration challenges
• Scalable and maintainable code structure

Tech Stack

• Frontend: React.js
• State Management: Redux Toolkit, Context API
• Routing: React Router DOM v6
• Styling: Tailwind CSS
• Bundler: Parcel
• Testing: Jest, React Testing Library
• API: Live Restaurant Data API
• Deployment: Vercel

Technical Highlights

Component Architecture

Built modular, reusable component library following atomic design principles with proper prop types, default props, and composition patterns.

Redux Toolkit Integration

Implemented efficient state management using Redux Toolkit with slices, thunks, and selectors for cart management and user preferences.

Custom React Hooks

Created custom hooks for common functionality including useOnlineStatus, useRestaurantMenu, and useDebounce for search optimization.

Code-Splitting and Lazy Loading

Utilized React.lazy() and Suspense for route-based code splitting, dramatically improving initial page load performance.

Higher-Order Components

Developed HOCs for common patterns like withOnlineStatus and withLoader to enhance component reusability.

Context API

Implemented Context API for theme management and global configuration, avoiding prop drilling across deep component trees.

React Router DOM

Configured React Router v6 with nested routes, protected routes, and dynamic routing for restaurant details pages.

Parcel Bundler

Leveraged Parcel for zero-config bundling with hot module replacement, automatic code splitting, and optimized production builds.

Testing Strategy

Wrote comprehensive tests using React Testing Library and Jest, covering components, hooks, and user interactions.

Challenges & Solutions

Component Reusability Architecture

Designed flexible component API with render props, compound components, and composition patterns for maximum reusability across the application.

State Management with Redux Toolkit

Implemented Redux Toolkit with proper slice organization, normalized state structure, and optimized selectors to prevent unnecessary re-renders.

Code-Splitting and Lazy Loading

Applied route-based and component-based lazy loading using React.lazy() and dynamic imports to reduce initial bundle size significantly.

API Integration with CORS

Integrated live restaurant API with proper CORS handling using Chrome extension for development and proxy configuration for production.

Testing React Components

Built comprehensive test suite using React Testing Library following best practices like user-centric queries and testing behavior over implementation.

Performance Optimization

Implemented React.memo, useMemo, useCallback, virtualization for long lists, and image lazy loading to ensure smooth 60fps experience.

Higher-Order Components Design

Created reusable HOCs for cross-cutting concerns like authentication, logging, and error boundaries while maintaining type safety.

Features in Detail

Search & Filter

Advanced search with debouncing, multiple filter options (cuisine, rating, price), and real-time results updating.

Restaurant Details

Comprehensive restaurant pages with photo galleries, menus, reviews, ratings, opening hours, and location maps.

Shimmer UI

Professional loading skeletons that match the actual content layout, providing visual feedback during data fetching.

Online/Offline Status

Real-time network status monitoring that gracefully handles offline scenarios with user-friendly messaging.

Cart Management

Full-featured shopping cart with Redux Toolkit state management, persistent storage, and real-time price calculations.

Installation & Usage

# Install dependencies
npm install

# Start development server
npm start

# Run tests
npm run test

Note: You may need the CORS Chrome Extension for API access during development.

Problem Solved

Finding restaurants and understanding their menus often requires jumping between multiple apps and websites. This application consolidates restaurant discovery into a single, fast, searchable interface. The live API integration provides real-time data without manual updates.

What Makes It Unique

This isn't a simple restaurant list - it's a complete showcase of advanced React patterns including custom hooks, HOCs, code-splitting, and Redux Toolkit. The comprehensive test suite with React Testing Library demonstrates production-quality code. The shimmer UI and offline detection create a polished user experience.

Impact

• React Expertise: Mastered advanced React patterns including custom hooks, HOCs, Context API, and Redux Toolkit through practical implementation
• Testing Discipline: Developed strong testing habits with React Testing Library, improving code quality across all my projects
• Performance Awareness: Learned critical optimization techniques like code-splitting, lazy loading, and debouncing that I apply to every React application

Future Enhancements

• Add user authentication and profiles
• Implement restaurant reviews and ratings
• Add favorites and bookmark functionality
• Create order tracking system
• Implement payment gateway integration
• Add restaurant owner dashboard
• Create mobile app with React Native
• Add real-time order updates with WebSockets