CSC/ECE 517 Spring 2023 - E2348 Replicate Roles and Institution UIs ReactJS: Difference between revisions

From Expertiza_Wiki
Jump to navigation Jump to search
Line 39: Line 39:
Following designs are that of the <code>users</code> component which has already been done. This project aims to replicate these designs for the components that we will be creating as mentioned in the previous section.
Following designs are that of the <code>users</code> component which has already been done. This project aims to replicate these designs for the components that we will be creating as mentioned in the previous section.


[[File:project_user.png]]
[[File:project_user.png|1000px|center]]


== Testing ==
== Testing ==

Revision as of 19:43, 12 April 2023

Overview of Expertiza

Expertiza is a learning management system that is developed with Ruby on Rails and is accessible as open source software. It can create assignments, tests, assignment teams, and courses, among a wide range of other features and functions. It also has a thorough system for giving other teams and groups of teammates peer reviews and feedback. The files that are largely addressed in this project are the frontend React Components of User, Institution and Roles. A fully functional UI for these components will be developed using React for this project.

Description of Project

This project focuses on creating User Interfaces for Roles and Institutions 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 pages for Roles and Institutions. 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 using of CSS frameworks with React JS. Following are the changes that will be done in the new implementation:

1. Render the names on the respective pages in a tabular format.

2. Provide the options for adding, editing and deleting entities depending on the pages.

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

Changes to be made

Following are the components that we will be implementing:

1. Roles

This component will be used to display all the roles that expertiza has. As of now, the roles are administrators, super administrators and instructors. We will create a new route /roles which will list all the roles in a tabular format as shown in the mock up designs in the next section. Along with this list, there will be options to perform CRUD operations. For roles, we will have the options to edit and delete a particular role.

2. Institutions

This component will be used to display all the institutions that expertiza has. We will create a new route /institutions in the Administrations section of the website which will list all the institutions in a tabular format as shown in the mock up designs in the next section. Along with this list, there will be buttons added in table for creating, deleting, updating, the institutions.

3. Administrators

This component will be used to display all the Administrators that expertiza has. We will create a new route /administrators in the Administrations section of the website which will list all the Administrators in a tabular format as shown in the mock up designs in the next section. Along with this list, there will be buttons added in table for creating, deleting, updating, the Administrators.

4. Super Administrators

This component will be used to display all the Super Administrators that expertiza has. We will create a new route /superAdministrators in the Super Administrators section of the website which will list all the Super Administrators in a tabular format as shown in the mock up designs in the next section. Along with this list, there will be buttons added in table for creating, deleting, updating, the Super Administrators.

5. Instructors

This component will be used to display all the Instructors that expertiza has. We will create a new route /instructors in the Instructors section of the website which will list all the Instructors in a tabular format as shown in the mock up designs in the next section. Along with this list, there will be buttons added in table for creating, deleting, updating, the Instructors.

Designs

Following designs are that of the users component which has already been done. This project aims to replicate these designs for the components that we will be creating as mentioned in the previous section.

Testing

Testing was not in the scope for this project as it is frontend development. Testing the frontend of a React website involves ensuring that the user interface of the website behaves as expected and delivers a seamless user experience. Manual testing will be conducted to ensure that all the UI components work as intended. A video showing the working of the added components will be uploaded soon.

Contributors to this project

  • Palash Rathod (unityid: prathod, github: palash27)
  • Neha Kale (unityid: nkale2, github: nehakale8)
  • Vansh Mehta (unityid: vpmehta2, github: vanshmehta-7)