eFood

Table of contents

• eFood
  • Table of contents
  • Layout and API links:
  • Vite-template-redux
    • Goals
    • Scripts
    • Inspiration

The eFood project is a React-based online food ordering platform that utilizes Styled Components for styling, React Router for seamless navigation and Redux ToolKit for state management. Divided into four parts, the project encompasses the following:

Foundation Setup: Creation of a new React project based on the provided layout, with styling using Styled Components and page navigation facilitated by React Router. The project is hosted on Vercel for accessibility.

Modal Creation and API Integration: Implementation of a purchase modal triggered by user actions, with content dynamically populated via AJAX requests using the Restaurants API. Project updates are pushed to the repository and deployed for review.

Shopping Cart Development: Development of a shopping cart page integrated with Redux for state management. The cart calculates total purchase values dynamically based on selected products. Project changes are pushed to the repository and deployed on Vercel.

Order Processing and Confirmation: Creation of an order delivery page with functionality to process orders. Upon completion, a confirmation screen displays order details fetched from the Checkout API's response. Project updates are pushed to the repository and deployed for evaluation.

The eFood project aims to deliver a user-friendly online food ordering experience through a comprehensive development approach, from foundational setup to advanced feature implementation.

Layout and API links:

• Online Project: Vercel (Online)

• Project Layout: eFood

• Restaurants API: Restaurantes

• Checkout API: Checkout

Vite-template-redux

Uses Vite, Vitest, and React Testing Library to create a modern React app compatible with Create React App

npx degit reduxjs/redux-templates/packages/vite-template-redux my-app

Goals

• Easy migration from Create React App or Vite
• As beginner friendly as Create React App
• Optimized performance compared to Create React App
• Customizable without ejecting

Scripts

• dev/start - start dev server and open browser
• build - build for production
• preview - locally preview production build
• test - launch test runner

Inspiration

• Create React App
• Vite
• Vitest