React Student Dashboard

This will be a project of which the end result will actually be used for the Winc Academy: namely a Student Dashboard! Purpose: to make it easy for Winc teachers to see in one overview how the students evaluate the assignments We would like to see, per assignment, the evaluation of each student in a "Bar Chart". **Tools: Use a JavaScript framework such as React.

Assignment: React Student Dashboard

Result: https://student-dashboard-9078b2.netlify.app/

Data :

The link below is to a spreadsheet file (in Google Docs) with a mountain of fake data (also called mock data), with fake students. These are the results of students once they complete all assignment evaluations.

• Winc Final Assignment - Student Mock data

As you can see, this data has the following structure:

• Student's name
• Name of the assignment / project (including the project code)
• Figure how fun the assignment was
• Figure how difficult the assignment was

It is up to you to model and structure the data correctly. Do not type the data overflow, it is way too much data for that.

Requirements:

Your Web Application should display the following

• Dashboard Overview User story: As a user, when I open the homepage of the application, I want to see an overview in the form of a bar chart of the evaluations (fun & difficult) of all students. As a user I have to be able to distinguish at a glance between the assignments and the fun / difficult evaluation. Make sure that a clear distinction is made visually, for example by working with clear colors.

• Separate routing per student As a user I want to see a list of the names of all students and be able to click on one of these students. When I click on a student name, I am taken to the route / {name-of-student}. The bar chart adjusts with the data of this student only.

• Design: Create a tool that you are proud of and that you would like to show to a future employer. We pay particular attention to: legibility of the graphs.

Slicing and dicing. - Choose one of the following ways: As a user of the tool, you can "slice and dice" the data in a number of ways.

• Option 1: As a user I want to be able to indicate by means of a checkbox whether I only want to show in the bar chart how nice the assignment was, only want to see how difficult the assignment was, or both.

• Option 2: As a user, in addition to filtering on 1 person, I also want to be able to filter on multiple people. That is why I want to see a checkbox in the overview of my students that I can do
• Tick if I want to include the data of this specific student in my graph
• Uncheck if I want to exclude the data of this specific student from my graph.
• Option 3: As a user I want to be able to see how 1 specific assignment scored. Therefore, I want to see a list of all the assignments that I can tick to show me a bar chart with the score on the y axis (as before) and the names of the students on the x axis.

Create charts with a Library!

Bonus features

• Make sure that the data can be sliced ​​and diced in more than 1 way (see requirement 3).
• Sort the students by average grades (high to low or low to high).