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

From Expertiza_Wiki
Revision as of 00:27, 24 March 2024 by Skshett2 (talk | contribs)
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.
    • 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.

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 to be Made

1. Refactoring the Questionnaire UI: Transition the existing non-TypeScript frontend of the questionnaire UI to use TypeScript, enhancing code reliability and maintainability.

2. Developing with React.js: Utilize React.js to rebuild the 'Roles' and 'Institution' user interfaces, ensuring that they are dynamic and responsive. The React components should be modular, reusable, and maintain state effectively.

3. Integrating TypeScript: Implement TypeScript across the new UI components for better type-checking, reducing runtime errors and facilitating debugging and maintenance.

4. Understanding Existing Backend: Gain a comprehensive understanding of the existing Ruby on Rails backend to ensure seamless integration and functionality with the new TypeScript and React.js frontend.

5. UI Enhancements: 

   - Introduce role-based access restrictions to enhance security and user experience.
   - Improve the user interface with intuitive navigational elements, tooltips for better user guidance, and enhanced table positioning and pagination for ease of use.
   - Add new UI elements where necessary, such as a column for displaying parent names in relevant tables.

6. Code Quality and Maintenance: 

   - Add detailed comments and documentation to the new codebase for better understandability and maintainability.
   - Remove any obsolete or redundant code segments to streamline the application.
   - Implement validations and error-handling mechanisms to improve the robustness of the UI.

7. Testing and Integration: 

   - Thoroughly test the new UI components individually and within the context of the entire application to ensure they function correctly across different scenarios and data sets.
   - Integrate the new components into the existing application infrastructure, ensuring compatibility and functional integrity.

8. Review and Deployment: 

   - Conduct code reviews with the development team to identify any potential improvements or necessary adjustments.
   - Prepare for the deployment of the updated application, ensuring that the transition is smooth and does not affect the existing user base adversely.
Retrieved from "https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Spring_2024_-_E2428_Replicate_Roles_and_Institution_UIs_ReactJS&oldid=153248"