Restaurant-app

Web application for a restaurant using React for the frontend and Node.js (Express) for the backend

Project structure

The restaurant folder contains the frontend, the server folder contains the backend

Takewaways and thoughts

• Based on our non-existent previous knowledge on React, and being this our first project developed in this library, these are our final thoughts on the project
  • The frontend structure is very rigid and non-modular, so components can be hardly reused. One of React's greatest advantages is reusability, so we must take into account this characteristic and write better code in our following projects
  • Functional components are easier to read, understand and maintain than class components
  • Redux could've been implemented instead of the Context API, thinking about the project's scalability and use cases
  • Bootstrap is a great tool for rapid design and for its grid system, but probably it could've been better just to use CSS grid tools for the layout instead use a more powerful tool for styling components such as Styled Components or Ant Design

Main technologies used

• React
• Node.js (Express)
• MySQL
• Socket.io
• react-bootstrap
• Axios
• Mocha

Install dependencies

On root directory:

1. cd restaurant
2. npm install

Go back to root directory:

1. cd server
2. npm install

Edit environment variables

Edit the .env.example file in the server directory:

1. Remove the .example extension in the filename
2. Edit the file so the environment variables match your database and PC settings

Setting up the database

This project requires MariaDB/MySQL to be running on the PC.

Create the MariaDB/MySQL database for the app. Then go back to server directory:

1. npm run migrations to create the database schema
2. npm run seeds to fill up the database with some data

Running the project

On root directory:

1. cd restaurant
2. npm start

This will run the frontend on port 3000 of the PC

On a new terminal, on root directory:

1. cd server
2. npm run devstart

This will run the backend on port 5000 of the PC (if by some reason you change the backend's port number, be sure to update the "proxy": "http://localhost:5000" line in the frontend's package.json file accordingly)

How to run unitary tests

1. cd server
2. npm run test

How to run browser tests

1. cd server
2. npx cypress open
3. open FastFruit-login (it has 3 tests that are dependent on a succsesfull log in)

Screenshots

• Homepage

• Food ordering page

• Adding items to the cart

• Admin dashboard

• Employee dashboard