Demeter is a platform which was created to as part of our final project at School of Code. The aim of our project was to create an app which the coaches at School of Code can use to keep track of student work submitted. The app will enable them to see an overview of the students performance all in one place.
The data which will be displayed on the Demeter Dashboard includes:
- Bootcamp
- Region
- Workshop scores
- Feedback
- Daily quizzes
- Attendance
- Reflections
- Mood based on their reflections
We decided to use a dashboard from Creative Tim which used Tailwind CSS. On this dashboard we decided to have 4 pages:
Main dashboard
- On this page we have colour coordinated alerts which are placed on the main dashboard to make it more convenient for the coaches to identify students that are struggling as well as students that are excelling. We also have a :
- Student watch list
- overall view of experience and quiz scores
- Overall view of Attendance
Cohort View
- On this page there is a cohort table in which the students can be filtered based on the region of their bootcamp.
- The list of students on the table can also be filtered by a watch list
Individual Student View
- This page enables the coaches to view the detailed progress of specific students as well as their attendance and contact details.
- We also added a comments component which allows coaches to leave feedback for their colleagues that may visit that students page.
File Upload
- On this next page we have made it possible for the user to upload relevant files such as a new work completed by the students as well as files regarding new students or bootcamps that need to be added to the database.
Settings
-
On the last page we have a user settings page which allows the user to personalise their page by adding their name and region. It also gives them the option to upload a photo
-
Another feature which was implemented based on the user feedback received was the ability for the user to set a default bootcamp and set a comparison period, which is then reflected on the main dashboard.
We have also implemented Auth0 because it provides user-specific dashboards for the bootcamp coaches based upon user logins and it helps maintain the privacy of the student data.
We aimed to work using a Agile methodology whilst keeping the app users as the main focus of development.
Throughout this project all members of the Phantom Elephants worked on both the frontend and backend.
We brain stormed a few ideas about what we thought our users (SOC coaches) would like to see on the Demeter Dashboard and then we asked a couple coaches to join us in a focus meeting which allowed us to further explore this. One of the feedback we received from the coaches included having a notification / or alert system which would help them see the progress of the students. We took on this feedback and made sure to include it in our application
As a team we also decided to use Figma to create our wireframes this was beneficial as it allowed the team to visualise our application and it highlighted the different components needed for our app. We then used draw.io to map out all our components and break down our data structures.
- React
- Material Tailwind component library
- Semantic UI
Front-end deployed on AWS Amplify!
Fullstack developer who plays too many instruments 🎻
Hi! I'm James, I am a full stack Software Engineer with a Masters in mechanical Engingeering. Check out my website!
Mohit, you knows it.
Click the link below to exit