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:

cd restaurant
npm install

Go back to root directory:

cd server
npm install

Edit environment variables

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

Remove the .example extension in the filename
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:

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

Running the project

On root directory:

cd restaurant
npm start

This will run the frontend on port 3000 of the PC

On a new terminal, on root directory:

cd server
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)