SWEN-344 Final Practicum - Full Stack

Final Exam: Full Stack: React plus Flask APIs & Database

As in the REACT project, you will integrate your React application with a Server side API connected to a PostgreSQL DB.

Overview

You are building an application that allows you to view, and manage courses at a prestigious University. You have some starter data (from the setup). You will implement the requirements as listed below. Note: we use term ‘course’ and ‘class’ interchangeably.

Setup

See the setup instructions at this link

Requirements

  • You will initialize the DB from the server side, similar to the skeleton code

    • The initial data set will be loaded from courses_schema.sql (provided in the setup files)

  • You will create an API endpoint [see below] to retrieve the initial course data and populate the React page. (The list of APIs to implement is provided below)

    • You will show the course data as a grid type display. We suggest using Bootstrap grid layout with <Container><Row><Col>.
    • Make the display a nice ‘striped’ layout with alterating colors for the rows (see example)
    • The table will contain the following columns
      • ID (Primary Key), Department, Class Number, Class Title, Details. (College will not be displayed)
      • See the image for the main page (below) as a reference for the display output

  • You will provide an edit button as part of the table to modify an existing course (row). This is a simple way to tie the edit data to a specific row.

    • When the Edit button is clicked, you will raise a Modal dialog that will show the editable fields (current values). There will also be an ‘Save’ and ‘Cancel’ button.
      • The current values of the fields will be pre-populated in the Modal dialog, and the user will be allowed to make changes.
      • The editable fields will be ‘Course Number, Title, Details’.
      • The title of the modal dialog will show the College name (e.g. GCCIS, KGCOE, …) and the Department (e.g. Software Engineering, Physics, …).
    • When ‘Save’ is selected, you will update the database with any changes and close the Modal dialog. When ‘Cancel’ is selected, you will close the Modal without any changes. The main table will update to reflect any changes by querying the DB after the changes and refreshing the display.
  • Provide the ability to delete a course. Similar to the edit button, place a delete button in each row. Refresh the display from the DB after the delete.

Your pages should be similar to this:

Main page Edit
../main_screen.png
../edit_dialog.png

API specification:

You will implement using the following APIs:

API Purpose
GET /courses gets all course data.
PUT /courses/{id} updates the identified course. The id for the course to be updated is in the URL. The rest of the data for the update is in the body of the REST call
DELETE /courses/{id} deletes a course. Course id must be part of the URL

No additional APIs should be needed to complete this assignment.

NOTE: We are not using the CI for this final at all. We will be grading your work by hand. You are welcome to use it if you like, but we won’t check it.

Submission

When done, create a tag named ‘final’ and we will grade that version.

Grading

Layout and overall appearance will be part of the grade

Total:

  • (25pts) Read course data using API and populate page with grid/ striped display
  • (25pts) Update a course per requirements
  • (15pts) Delete a course
  • (20pts) Proper REST, React, Reactstrap, SQL usage/ implementation
  • (15pts) No major bugs