Future Eats UI

Future Eats is a app to order foods and drinks from bar and restaurants. It is a Reeact project built in typescript. The project is fully tested with Jest and Enzyme, also with a coverage checking (100%) to push new changes

Summary

• Getting Started
• Project Description

Getting Started

Follow these steps to set up and run Future Eats on your local machine.

Prerequisites

Before you begin, make sure you have the following installed:

• Git
• Node.js and npm - v.20

Setup

1. (optional) Install yarn:

   consider to install yarn command to use it in place of npm command:

   npm install -g yarn

   more information here: https://www.npmjs.com/package/yarn

2. Clone the repository:

   git clone https://github.com/pedro-severo/future-eats.git

3. Navigate to the project directory:

   cd future-eats

4. Install dependencies:

   npm install

   or

   yarn install    
   

5. Build the application:

   npm run build

   or

   yarn build

6. Start the application:

   npm run start

   or

   yarn start

7. Running in dev mode:

   Instead to use build + start commands, you can skip steps 5 and 6 and just to run the application with dev command:

   npm run dev

   or

   yarn dev

8. Open http://localhost:3000 to view it in the browser.

Connecting the API

The backend project is not deployed yet, so, to run and test the api connection on front, is necessary to run the backend also. Here is the link:

Future Eats Service

Tests and coverage

1. Runing tests:

   npm run test

   or

   yarn test

2. Runing coverage:

   npm run coverage

   or

   yarn coverage

3. Opening coverage on browser:

   npm run openCoverage

   or

   yarn openCoverage

4. Lines coverage percentage to push:

   100%

Project Description

Main technologies used

• React
• Typescript
• NextJs (App Router)
• MaterialUI - DesignSystem
• Styled-components - Styling
• React Context + useReducer - Global State
• Graphql
• Jest and Enzyme

A description of the architecture

The project is built in App Router from NextJS framework. So, all folders with a page.tsx on the root means that this folder is a route of the project. For now, the folders is structured on this way:

├── src/
│   ├── app/
|   |   ├── login/  (page: https://base-url/login)
|   |   ├── signup/ (page: https://base-url/signup)
|   |      |── register-address/ (page: https://base-url/signup/register-address)
|   |   ├── shared/ (common stuff of the project)
│   │      ├── assets/ 
│   │      ├── components/ 
│   │      ├── constants/ 
│   │      ├── designSystem/ (styled components imported from materialUI)
│   │      ├── services/
│   │      ├── stores/ (global state)
│   │      ├── utils/
|   |   ├── layout.tsx  (common layout of whole project. See next doc to know more about layout file)
|   |   ├── page.tsx (page: https://base-url. See next doc to know more about page file)
|   |   ├── registry.tsx (styles setup file)