eatsy-webapp

Eatsy is a dynamic and user-friendly restaurant directory application, designed to provide a seamless dining experience. Leveraging a robust set of modern technologies and best practices, this webapp offers an intuitive and visually appealing platform for users to discover, explore, and interact with restaurants.

Live Site

CORS Chrome Extension

Features

• React Component Reusability: ♻️ Maximize code reuse with modular React components.
• Photo Gallery 📸: Display a gallery of restaurant images.
• Integration with Third-Party Services 🚀: Connect to external APIs for additional data.
• Design Restaurant Details Page: 🖼️ Create visually appealing restaurant information display.
• Design Restaurant Shimmer component: 🌟 Develop loading skeleton for restaurant details.
• Online status based on internet connection: 🌐 Show connection status for real-time updates.
• Implement Lazy loading: ⏳ Optimize app performance with component loading on-demand.
• Search: 🔍 Enable users to search for restaurants or specific information.
• Config driven UI: ⚙️ Configure UI elements through settings or configuration files.
• Code-splitting: 🧩 Improve performance by splitting code into smaller, loadable chunks.
• Higher-order-component: 🔄 Reusable component logic for better code organization.
• React-router-dom: 🚀 Navigate between components using React Router.
• Live-api: 📡 Integrate real-time data updates using live API connections.
• TailwindCSS: 🎨 Utilize utility-first CSS framework for styling components.
• Parcel-bundler: 📦 Bundle and optimize assets for fast application loading.
• Context-api: 🌍 Manage global state and share data across components.
• React-testing-library: 🧪 Write tests for React components using testing library.
• React-hooks: ⚛️ Utilize React's built-in hooks for state management.
• Custom-hooks: 🛠️ Create custom reusable hooks for specific functionality.
• Redux-toolkit: 🧰 Implement state management using Redux Toolkit.
• Props-and-state-components: 📊 Pass data via props or manage local component state.

Installation Steps

You need to install the dependencies:

npm install

Available Scripts

In the project directory, you can run:

npm start

To run test-cases:

npm run test