CSC/ECE 517 Fall 2023 - E2380. Reimplement frontend for Courses

From Expertiza_Wiki
Revision as of 02:46, 15 November 2023 by Athorve (talk | contribs) (Created Page)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search

Expertiza

Expertiza, an open-source learning management system, is built on the Ruby on Rails framework. It provides functionality for creating assignments, tests, assignment teams, and courses, alongside an array of other features. Notably, it incorporates a robust system for facilitating peer reviews and feedback within teams and groups. The primary emphasis in this project is on the frontend React Components, specifically those related to User, Institution, and Roles. The project aims to implement a fully functional user interface for these components utilizing React.

ToDo

In this project, the front end of the courses page needs to be reimplemented using React with Typescript. The main page will display a table with all the course listings. This page will only be visible to admins of the application. Admins will be able to add new courses, edit existing courses, and delete courses from the list. Along with this, the admins will have the feature to manage the TAs associated with the courses. The admins can view who are the TAs associated with which course. Furthermore, the admin can add or remove TAs associated with courses.

Plan

  1. Design Patterns:
    • Composite Design Pattern, since we are going to create our Course component by nesting and composing the Table, Modal, and other components together.
    • DRY Principle, because one of the major advantages of using React. We are able to reuse components that already exist, like the Table, and Modal components.
    • Provider Pattern. React provides the Context API using which we can pass props down the component chain without explicitly passing it down. Thus using the provider pattern.
    • Observer Pattern, can be leveraged using the Context API provided by React along with hooks like useEffect and useState.
    • HOC Pattern. HOC refers to the higher-order component which is a function that takes in a component and returns a component. We will be using this to add routing for the new pages that will be created.