🍽️ 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.