xujunjiejack / pfacs_spring

The frontend of teacher dashboard website for the project Beats Empire, a game-based assessment. Written in React and Typescript

PFACS Teacher Dashboard

1: Development tool

• React (https://reactjs.org/tutorial/tutorial.html)
• Typescript (https://www.typescriptlang.org)
• Semantic UI React (https://react.semantic-ui.com)
• Styled Component (https://www.styled-components.com)
• React Router (https://www.npmjs.com/package/react-router)

React is a UI Framework allowed for a component based development. It also allows for reusing different component. It needs a little bit learning curve, but it will help improve the code readability and management. It is a data driven framework to work

Typescript is an improved version of Javascript to ensure a good standard of the code in development cycle. It is a static typed language, like Java. You can still write any code in Javascript as long as I close the lint.

Semantic UI React similar to bootstrap is the UI styling framework I used to quickly create a ok looking website

Styled Component is small, simple library that allows the person to embed the styling sheet in each componenet. It saves the need to create a bunch of stylesheet in the code

2: How to run

To install all of the dependency: type: npm install

Then run the frontend server: type: npm run

Now, you are good to go by opening the browser.

It only runs the frontend, so if you want to make it actually usable, run the backend. It connects the frontend and the backend with web service.

pfacs_spring's Issues

Cookie support in the browser

With a cookie, the browser will then remember the login of the teacher, avoiding duplicate login.

Link the classroom overview with the backend

The Class Overview in the live dashboard shall be dynamically linked with the backend. The mechanism should be like the Student Status with socket.

Route the user to login page before they log into other page through URL

The user needs to be asked for credential before they enter any page. Current it can't do this.

The detailed report needs more designing

Need more research on the data information, and come up with a better design with live data.

Dashboard page should have sidenav

As shown in figma, the main dashboard page should have a sidenav allowing users to navigate to other important parts of the dashboard. Initial implementation should allow users to interact with all links in the sidenav and links will currently link to "in progress" pages.

Responsive design of each page

Right now, the responsive design hasn't been implemented because the functionality hasn't been finalized. It will be important in the future

Implement Insights Page

There are two different pages for insights on figma. Reach out to JJ or Vishesh to figure out which implementation is correct or how they interact with each other.

Switch communicating with backend from using student names to session id

Currently, in the live dashboard, the front-end sends a list of student names/id to ask the backend to send the right data for the students. I want a easier and more unique identifier for referring to a bunch of students. I think sending the session id can be one solution.

Implement Performance Overview Page

Weird outline on the tool tip in Student Rectangular

Outline of the rectangular and tooltip on Safari sometimes will persist even after the mouse moves over the rectangular.

Implement Help Page

Read session and read teachers session report

The sessions teacher created need to be saved somewhere on the service

Implement Student Stats Page