GYST Frontend Group Project

Project Description

As part of the Bright Network Technology Academy (BNTA), our group was tasked with developing the front-end of an API that had already been created by another BNTA group. This project aimed to give us practical experience with working on an unfamiliar API and building the necessary front-end components using React. Our team was tasked with working on the ToDoList API of GYST.

This project was bootstrapped with Create React App.

Diagrams

Wireframe Diagram

Component Diagram

Tech Stack

The technologies we used to build the front end of this project include:

HTML
CSS
JavaScript
React

Installation:

Please ensure the following are installed on your system.

Node
Intellij IDEA , running with JDK 17
Postgres
Postman
Postico
Visual Studio Code

Server-side API Instructions

Open and run the back end API in IntelliJ:

Clone the project from the repository to your local machine:
- ssh: git@github.com:XixianWei/back_end_project_toDoList.git
Create a local database called to_do_list (In the command line use the command creatdb to_do_list)
Download and install IntelliJ IDEA
Open the API in IntelliJ IDEA
Run API from to_do_list file Ensure the API is running by opening http://localhost:8080 on your desktop browser.

Client Side Instructions

Open and run the React project in VSCode:

Clone the project from the repository to your local machine: - git@github.com:samra-a/Digital_Planner.git
Ensure node modules are installed: In Terminal: npm i or npm install
Download and open VSCode
Run React App:
- In Terminal: npm start Check app is running by opening http://localhost:3000 on your desktop browser
You will also need to install
-npm install @mui/material @emotion/react @emotion/styled
-npm install @mui/icons-material

Testing Methods

Backend routes were tested through Postman prior to starting the front end project.
Front end routes were tested through button functionality.

nsleeah / Digital_Planner