CSC/ECE 517 Spring 2024 - E2428 Replicate Roles and Institution UIs ReactJS

From Expertiza_Wiki
Jump to navigation Jump to search

Overview of Expertiza

Expertiza is an open-source learning management system designed with Ruby on Rails, facilitating a myriad of functionalities including the creation of assignments, tests, assignment teams, and courses. It stands out for its comprehensive peer review system, allowing thorough feedback among teams and group members. The focal point of this project is to enhance the User, Institution, and Roles frontend components. The specific challenge addressed involves refactoring the existing non-Typescript questionnaire UI to employ Typescript. Consequently, the team is tasked with developing these components' User Interface utilizing React.js and Typescript.

Description of Project

This project focuses on creating User Interfaces for the 5 components of the Administration Section of the website - Roles, Institutions, Administrators, Super Administrators, Instructors pages using React JS. Previously, Ruby template parser was used for building the application. However, in the new reimplementation the backend and frontend applications have been separated and they are run independently. This allows us to have more flexibility with the technology stack. It is for this reason, the frontend application is being developed using React JS.

The components that we are responsible for are the pages for Roles, Institutions, Administrators, Super Administrators, Instructors. The previous implementation just listed out the names along with the options to show, edit or delete them. In the new implementation, we aim to beautify these pages by making use of CSS frameworks with React JS.

Following are the changes that will be done in the new implementation:

1. Render the data on the respective pages in a tabular format shown in the mock up designs.

2. Provide the buttons for creating, editing and deleting entities depending on the pages in the tables.

3. Displaying appropriate alerts after any changes are made (create/edit/delete).

4. Integrate the frontend functionalities mentioned with the backend.