Frontend Setup

Introduction

This section will guide you through the setup of the frontend of the project. The frontend is built using React and Express. The frontend is responsible for the UI and UX of the web application - ReactJS. The frontend is also responsible for the client-server communication with the Django API - ExpressJS.

Prerequisites

Please make sure you've followed the Prerequisites section before continuing.

Setup

ExpressJS Setup

1. Open the terminal and navigate to the /(uni username) directory (root directory of the project).

2. Navigate to the /frontend directory (this directory contains the package.json file which has all the dependencies required for the Express server).

3. Run the following command to install all the dependencies:

npm install

4. Run the following command to start the Express server:

npm start

5. The Express server should start running and listening on port 5050. You can access the server at http://localhost:5050. You should see the following message on terminal if the server has started successfully:

Server listening on port 5050

.env file with Backend API URL required

You need to create a .env file in the /frontend directory if you don't have one. The .env file should contain the following line:

NODE_ENV = 'development' # set this to 'production' when deploying the project
API_URL = 'http://127.0.0.1:8000' # replace this with the URL of the backend API (Django API default port is 8000)

Tip: How to change the port number?

How to change the port number?

You can change the port number in the .env file and also in the /index.js file at frontend/index.js code line 108.

• To change the port number in the .env file (if you don't have the .env file, create one in the frontend directory), add the following line to the .env file:
• PORT=5050 (replace 5050 with the port number you want to use)

ReactJS Setup

1. Open the terminal and navigate to the /(uni username) directory (root directory of the project) and then change directory to /frontend/client (this directory contains the package.json file which has all the dependencies required for the React app).

if you are in the /(uni username) directory, run the following command to change directory to /frontend/client:

cd frontend/client

# For Windows users
cd frontend\client

or if you are in the /frontend directory, run the following command to change directory to /frontend/client:

cd client

2. Run the following command to install all the dependencies:

npm install

3. Run the following command to start the React app:

npm start

4. The React app should start running and listening on port 3000. You can access the app at http://localhost:3000. You should see the following message on terminal if the app has started successfully:

Compiled successfully!

.env file with Backend API URL required

You need to create a .env file in the /frontend/client directory if you don't have one. The .env file should contain the following line:

NODE_ENV = 'development'
REACT_APP_API_URL = 'http://127.0.0.1:5050' # replace this with the URL of the Express server (Express server default port is 5050)

REACT_APP_API_URL is the URL of the Express server. If you've changed the port number for the Express server, while setting up the Express server here, make sure you change the port number in the /frontend/client/.env file of the React app as well.

• The port number in the .env file of the React app should match the port number in the .env file of the Express server. Otherwise, the React app won't be able to communicate with the Express server and can't fetch data from the Django API.