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 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.
    • Set up 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.

Technologies Used

  • React.js: A JavaScript library for building user interfaces, particularly single-page applications. React will be used to develop dynamic and responsive UI components.
  • TypeScript: An open-source language that builds on JavaScript by adding static type definitions. TypeScript allows for writing clearer and more robust code, facilitating easier debugging and maintenance.
  • Ruby on Rails: Although the focus is on refactoring the front end, understanding the existing Ruby on Rails backend is crucial. Rails is a server-side web application framework written in Ruby, following the model-view-controller (MVC) framework.

Changes Made

1. Refactored the Questionnaire UI: The existing non-TypeScript frontend of the questionnaire UI has been successfully transitioned to use TypeScript, enhancing code reliability and maintainability.

2. Developed with React.js: The 'Roles' and 'Institution' user interfaces have been rebuilt using React.js, ensuring dynamic and responsive behavior. The React components created are modular, reusable, and effectively manage state.

3. Integrated TypeScript: TypeScript has been implemented across the new UI components, providing better type-checking, reducing runtime errors, and facilitating easier debugging and maintenance.

4. Analyzed Existing Backend: A thorough analysis and understanding of the existing Ruby on Rails backend were achieved to ensure seamless integration and functionality with the new TypeScript and React.js frontend.

5. UI Enhancements Implemented: Role-based access restrictions have been introduced to enhance security and user experience. The user interface has been improved with intuitive navigational elements, tooltips for better guidance, enhanced table positioning, and pagination. New UI elements, such as a column for displaying parent names, have been added where necessary.

6. Code Quality and Maintenance Improvements: Detailed comments and documentation have been added to the new codebase for better understandability and maintainability. Obsolete or redundant code segments have been removed to streamline the application. Validations and error-handling mechanisms have been implemented to improve the robustness of the UI.

7. Thorough Testing and Integration: The new UI components have been thoroughly tested both individually and within the application context to ensure correct functionality across different scenarios and data sets. The new components have been integrated into the existing application infrastructure, ensuring compatibility and functional integrity.

8. Review and Deployment Accomplished: Code reviews were conducted with the development team to identify and implement potential improvements or necessary adjustments. The deployment of the updated application was prepared and executed, ensuring a smooth transition that did not adversely affect the existing user base.

UI Enhancements and Features in Screenshots

Role-based access restrictions: The update role option is disabled based on the role of user.

A new column labeled "Parent Name" has been introduced on the Manage Role page, as illustrated in the accompanying screenshot. Additionally, the screenshot highlights the interactive feature where hovering over the 'Create Role' button, a functionality that is consistently applied to the 'Edit' and 'Delete' buttons as well. The layout of the table has been adjusted for optimal web page integration, and pagination has been implemented to enhance navigation and usability.

When creating a new role, the role name must not include any numeric characters:

The files have been transitioned to TypeScript:

Testing

Testing was initially not considered within the project's scope, given its emphasis on frontend development. Nonetheless, verifying the functionality and user experience of a website's interface is essential. To this end, manual testing procedures will be employed to ascertain the correct operation of the UI components. These tests include:

  1. Verifying all the added button links to ensure they function correctly.
  2. Testing the navigation routes for all five components within the Administration Section on the website's navigation bar.
  3. Checking that the data is accurately displayed and corresponds with each specific component's page.

Contributors to this project

Retrieved from "https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Spring_2024_-_E2428_Replicate_Roles_and_Institution_UIs_ReactJS&oldid=154832"