Skip to content

README.md

Latest commit

 

History

History
104 lines (104 loc) · 4.47 KB

README.md

File metadata and controls

104 lines (104 loc) · 4.47 KB

🍽️ Efood Restaurant

Este README também está disponível em Português.

Efood is an online restaurant platform built with React and TypeScript, offering users the ability to browse restaurants, view dishes, manage a cart, and simulate a complete checkout process with form validation, input masks, animations, and accessibility enhancements. Data is dynamically fetched using RTK Query from a custom API maintained and run by me, ensuring up-to-date restaurant information and images.

📌 Project Highlights

  • Dynamic restaurant and dish rendering using RTK Query from my API
  • Cart functionality powered by Redux Toolkit
  • Multi-step checkout with Formik + Yup validation
  • Masked inputs for credit card and delivery fields using React Input Mask Next
  • Loading animations using Lottie
  • Accessible components with semantic HTML, ARIA attributes, and hidden labels
  • Responsive mobile-first design and smooth scrolling

🚀 Demo

Live Vercel hosting:
https://e-food-restaurant.vercel.app

Video walkthrough (silent):
Watch the full demo on YouTube

📂 Folder Structure


src/
├── components/        # Reusable UI components
├── containers/        # Cart, forms, and main sections
├── pages/             # Route-level views (Home, Profile)
├── services/          # API slices and RTK Query config
├── styles/            # Global styles and themes
├── types/             # TypeScript global types
├── utils/             # Input masks and helper functions
└── App.tsx            # Main app entry

📦 Tech Stack

  • React ^18.2
  • TypeScript ^4.9
  • Redux Toolkit & React Redux
  • RTK Query for API integration
  • React Router DOM ^7.2
  • Formik + Yup for forms
  • React Input Mask Next
  • Styled Components ^6.1
  • Lottie React & @lottiefiles/react-lottie-player
  • ESLint, Prettier for formatting

🧪 How to Run the Project

  1. Clone the repository: 
    git clone https://github.com/AsrielDreemurrGM/EFood_Restaurant
  2. Navigate to the folder: 
    cd EFood_Restaurant
  3. Install dependencies: 
    npm install
    or 
    yarn install
  4. Start the development server: 
    npm start
    or 
    yarn start

🔧 Scripts

  • start – Runs the project in development mode
  • build – Builds the app for production
  • test – Runs tests

🌐 API Endpoint

All data is fetched from my custom API: 

https://e-food-api.vercel.app/

📌 Commit Highlights

  • Accessibility: ARIA roles, semantic structure, screen reader support
  • Checkout: Formik + Yup with input masks and validation feedback
  • Cart: Full cart management with delayed reset and success modal
  • Animation: Integrated Lottie animations for loading feedback
  • Routing: Dynamic routing for restaurants and dishes
  • Performance: Fixed console warnings and streamlined types

📜 License

This project is licensed under the MIT License.