The log-in screen for neuroSight. Updates will be seen prior to logging in so users can be excited for quality-of-life and system updates.
The school portal for neuroSight. It'd customizable, you'd be able to move panels (like Live Class feed) to maximize your productivity.
When the calendar button is pressed on. An easy switch for those who visual learners and it's compatible with Google calendar.
The messages tab. You can quickly message or call students or staff. There are statuses to indicate if someone is online.
The class dashboard. Easily access clubs, classes and organizations through the dashboard.
Your selected class. See new assignments and new posts quickly. You can adjust your notifications for assignments right at the panel.
The graphs page, to see helpful analytics about your class so you can improve your grade.
The inspiration for neuroSight came from what we wished our online school platforms had: more data on the exams and assignments available to students, more ability to chat and connect with students and professors, more efficient reminders for upcoming assignments and class, and a tool that will help you space out your school assignments in order to help you be less stressed.
What it does
The web application has a page for all your courses, a more detailed course information page, a whiteboard that multiple students can use at a time when logged into the application, an efficient upcoming exam and assignment reminder service, a service that splits up your upcoming assignments for a less stressful experience, a page about your individual grade statistics - including your class attendance, assignment and exam grades, and social performance, and a page that shows the class statistics on grades.
The grade statistics created with python using matplotlib are auto-updating. The code creates histograms and scatterplots about grade statistics. The data for the graphs are generated using a python script that randomizes the data. The grade statistics show more insights for the students in the class.
How we built it
We used XD to prototype a more fully-fledged version of our website in the future. We created a single-page front-end using React Hooks and React Router and set up the multi-project backend RESTful services in Clean Architecture with ASP.NET Core and Entity Framework Core. We applied CQRS (Command Query Responsibility Segregation) pattern with MediatR to improve the performance in data retrieval and processing. CQRS also enhances code decoupling, code readability, and system scalability. We used Socket.io with Node.js to create an interactive whiteboard for multiple logged-in students to actively engaged in learning in a collaborative environment. We built the data visualizations for the grade statistics part of the website using python and matplotlib. We coded a python script to generate dummy data for the graphs, the only parameters being the possible numbers for the different characteristics.
Challenges we ran into
When prototyping the project, a challenge I ran into was using XD for the first time and prototyping for the first time. I had to learn software and prototype at the same time. It was challenging learning all of the new tools and how to prototype, but when I got into the rhythm of things, I was able to complete a design I was very proud of.
When creating the web application, challenges that we ran into were getting the multiplayer whiteboard to work and getting the videos of the auto-updating graphs to upload properly. In both cases, we were able to overcome the challenge and get the feature to work.
When creating the data visualizations, a problem we ran into was not knowing how to have data that auto-updates when new data is added to the csv file it is reading data from. We overcame this challenge by googling our problem and using a youtube video to walk us through the process. We were able to get the data to auto-update, although it, unfortunately, did not do so within the web application.
Accomplishments that we're proud of
We are proud of getting a multiplayer whiteboard to work, having such a fully-fledged website built after just a weekend, and getting the data visualizations to auto-update.
What we learned
We learned how to create auto-updating graphs using python and matplotlib. I was also able to better my matplotlib skills as I just starting learning the framework earlier this week. We also learned a lot about how XD works as a platform and also about prototyping when creating the website prototype. When creating the website, we bettered our backend skills when creating better code readability. We also learned a new skill of creating a whiteboard when creating the website.
What's next for neuroSight
With the intention to service millions of students with minimal downtime and lower infrastructure cost, we decide to decentralize neuroSight into microservices to keep our services always available to users even under maintenance. For the React frontend, we decide to adopt state management frameworks, such as MobX, to improve data sharing across components as the application scales.The business model will mainly focus on subscription for schools and educational organizations where they can purchase a 15 days, a month, a 6 months or yearly subscription plan and send out the secret code to their students and instructors/faculty members so that they'll be able to use the platform. There will also be a weekly free subscription for disadvantaged groups and/or schools to enable them to be part of the e-learning community and provide easier and interactive learning system. First starting in a small geographic area as our target market, we'll soon expand internationally and make neuroSight available to all who need it.