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

From Expertiza_Wiki
Jump to navigation Jump to search
Line 2: Line 2:
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.
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 ==
== Description of the 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.  
* Objective: Refactor the non-Typescript frontend questionnaire UI of Expertiza to use Typescript and develop the User Interface using React.js and Typescript.


Following are the changes that will be done in the new implementation:
* Key Tasks:
** Log in as a Super Admin.
** Navigate to Administrator settings to access and replicate 'Roles' and 'Institution' UIs.
** Replicate the 'Roles' and 'Institution' UIs using ReactJS, ensuring they retain full functionality within the new TypeScript and ReactJS framework.


1. Render the data on the respective pages in a tabular format shown in the mock up designs.
* Development Process:
** Understand the Existing System: Analyze the current Ruby on Rails implementation of Roles and Institution UIs, including data models, controllers, and views.
** Setup Development Environment: Establish a TypeScript and ReactJS environment for developing the new UIs.
** Design Components: Create React components corresponding to UI parts, focusing on state and props management.
** Implement Components: Develop these components in TypeScript, mirroring the existing UIs' functionality.
** Integrate Components: Incorporate the new components into the main application, ensuring compatibility and functionality with the backend.
** Review and Refactor: Enhance code quality through reviews and refactoring, emphasizing readability and efficiency.


2. Provide the buttons for creating, editing and deleting entities depending on the pages in the tables.
* Additional Features and Improvements:
** Implement role-based access restrictions for actions within the roles and institutions sections.
** Enhance UI with tooltips, improved table positioning, and pagination.
** Introduce a new column for displaying parent names.
** Enhance code quality by adding comments, removing obsolete code, and implementing form validations.


3. Displaying appropriate alerts after any changes are made (create/edit/delete).
* Outcome: The project aims to transition the Expertiza UI components for 'Roles' and 'Institution' from Ruby on Rails to a more modern, efficient TypeScript and ReactJS-based implementation, incorporating user role restrictions and various UI improvements for a better user experience.
 
4. Integrate the frontend functionalities mentioned with the backend.

Revision as of 00:19, 24 March 2024

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 the Project

  • Objective: Refactor the non-Typescript frontend questionnaire UI of Expertiza to use Typescript and develop the User Interface using React.js and Typescript.
  • Key Tasks:
    • Log in as a Super Admin.
    • Navigate to Administrator settings to access and replicate 'Roles' and 'Institution' UIs.
    • Replicate the 'Roles' and 'Institution' UIs using ReactJS, ensuring they retain full functionality within the new TypeScript and ReactJS framework.
  • Development Process:
    • Understand the Existing System: Analyze the current Ruby on Rails implementation of Roles and Institution UIs, including data models, controllers, and views.
    • Setup Development Environment: Establish a TypeScript and ReactJS environment for developing the new UIs.
    • Design Components: Create React components corresponding to UI parts, focusing on state and props management.
    • Implement Components: Develop these components in TypeScript, mirroring the existing UIs' functionality.
    • Integrate Components: Incorporate the new components into the main application, ensuring compatibility and functionality with the backend.
    • Review and Refactor: Enhance code quality through reviews and refactoring, emphasizing readability and efficiency.
  • Additional Features and Improvements:
    • Implement role-based access restrictions for actions within the roles and institutions sections.
    • Enhance UI with tooltips, improved table positioning, and pagination.
    • Introduce a new column for displaying parent names.
    • Enhance code quality by adding comments, removing obsolete code, and implementing form validations.
  • Outcome: The project aims to transition the Expertiza UI components for 'Roles' and 'Institution' from Ruby on Rails to a more modern, efficient TypeScript and ReactJS-based implementation, incorporating user role restrictions and various UI improvements for a better user experience.
Retrieved from "https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Spring_2024_-_E2428_Replicate_Roles_and_Institution_UIs_ReactJS&oldid=153241"