Lab 3: Unearthed Part 3 Exemplar

Overview

In the third part of this lab, students will dip into React once again, creating a backend that can respond to API requests, as well as familiarizing themselves with the way React apps send API requests via useEffect() and the async/await design pattern.

Project Screenshot

Setup

Dependencies

• Vite
• React
• React DOM
• React Router
• Express
• PostgreSQL
• Nodemon
• Body Parser
• CORS

---

Install Dependencies

Before installing dependencies, you will need node and npm installed globally on your machine by installing NodeJS onto your machine.

To install the dependencies for the client-side, run the following command in the client directory:

npm install

Alternatively, you can install the client-side dependencies individually:

npm install react
npm install react-dom
npm install react-router-dom
npm install vite@latest

To install the dependencies for the client-side, run the following command in the server directory:

npm install

Alternatively, you can install the client-side dependencies individually:

npm install express
npm install nodemon
npm install pg
npm install body-parser
npm install cors

---

Run UnEarthed Part 3

In the server directory, run the following in your terminal:

npm run dev

In the client directory, run the following in your terminal:

npm run dev

Visit the web application in the browser:

http://localhost:5173/

---

Last Updated: March 2023