<aside> 🛎️ Lab Objective: Download and set up an existing Backend Environment, get exposed to the available API Endpoints available, use your Next.js App from Lab #2 to connect backend and front-end.

</aside>

• Open a terminal/CMD window and run:

npm install -g typescript ts-node nodemon

• Download this backend repository from Github

https://github.com/mourabitiziyad/todo-server-ts

This repository contains backend code for the Todo table, similarly to what you had worked on in a previous lab. There are a few differences in the folder structure to get you familiar with some basic conventions. The project is also using Typescript instead of Javascript (for the most part).

• Now, from your Visual Studio Code, go to db.ts and configure the database information based on your machine configuration. (port, host, database, user, etc).
• Open the terminal on VS Code or your machine terminal pointing at the Project Directory, and run npm i

→ This will install and create the node_modules folder containing all the required libraries and packages for this repository.

• On the same terminal window, run nodemon to start the browser, you may have to change the PORT on line 5 in server.ts if you get port errors.
• You can test out the API requests using postman on the following possible endpoints (assuming port 3001 is used):

GET    - <http://localhost:3001/api/todos>
GET    - <http://localhost:3001/api/todo/1>
POST   - <http://localhost:3001/api/todo> 
PUT    - <http://localhost:3001/api/todo/1>
DELETE - <http://localhost:3001/api/todo/1>

REMINDER: In the POST request, the request body (in json format) should look like this:

{
    "description": "INSERT TODO HERE"
}

• if you do not have a todo table, you can create it on PGAdmin or PSQL here

CREATE TABLE Todo (
	id serial,
	description varchar(50)
);

Front-End Integration

In the previous semester, the software development part heavily involved following a Youtube video covering the PERN stack (Postgres, Express, React, Node). For our use case, You can follow that very video for the parts that involve creating React components using HTML / JSX, and API Requests.