Remote education has made learning and teaching major challenges for both students and professors alike. Students face a constant barrage of due dates, tests, and lecture slides all haphazardly shoved into various modules and scattered across severall sites. Instructors face the challenge of not being able to connect with their class, instead teaching to void a black screens. Certain topics are not reviewed enough, while other topics might be overemphasized.

Solution? Meet! (pronounced "studious") is a solution for both students and instructors aiming to address these issues. Students can view which stats on which topics they specifically struggle on (based on past homework and test submissions), and get recommended study material such as videos and lectures about these topics. Instructors can see how the class is doing as a whole, and know which topics need to be reviewed and which topics are taught well. aims to bridge the divide often felt between students and instructors, paving the way for more engaging lesson plans and smarter studying.

Main features we implemented:

  • Displaying student data, such as scores on different topics
  • Ranking which topics need to be studied
  • Recommending study material (videos) based on lowest scoring topics

How we built it is a full-stack web application, built with the MERN stack (MongoDB, Express, React, Node.js). For this hackathon, we focused on the students' side of things, since students' learning has suffered the most in the remote format.

Act I: Designing (without a designer)

We started by drawing out our UI with rough sketches on paper, before moving onto Figma to sketch out better-looking prototypes and solidify our ideas. Ultimately, we decided on a dashboard-style layout, which offers familiarity to users, as well as the ability to effectively display the necessary information.


hifi Our lo-fi and hi-fi (kind of) designs

For the backend, we also focused on planning out exactly what data we needed to store and display for the student, and how to fetch that data (what routes we needed, what data to send, etc.). In the end, we decided to store Students, Assignments, and Classes as separate collections in a database, which reference each other with unique IDs. Fetching the right data (given these IDs) would be strictly handled on the backend, which would mean the frontend wouldn't have to make as many requests.

Act II: Development (and challenges!)

The frontend was built using React, with the help of Less for styling and Ant Design for various components. Working with Less was a learning experience; previously, we treated CSS as an afterthought and never took the time to learn the best practices and conventions to build good-looking sites. Theming and modifying Ant Design components also gave us a peak under the hood at the different build tools that go into compiling and running a React application.

Additionally, we also leveraged the Youtube Data API to fetch relevant instructional videos from Khan Academy to use as study material for the topic. Unfortunately, Khan Academy's API was deprecated not too long ago, so we were unable to pull more detailed study materials, and instead opted to search videos on the channel.

What we learned

Chaney - I worked on the back-end of this project and it was my first time dealing with making web applications in general. I decided to take a stab at MERN stack learning MongoDB and how to design a database as well as how NOSQL differs from SQL, how routes, clients, and servers work, and dabbled a little bit in the front-end with React.js. Overall I learned a ton, more so than my actual college classes.

Garrett - I mainly focused on honing my frontend skills for the hackathon, working to design and build out as much of the interface as I could in this short time. Aside of practicing my React skills, I also got to learn more about Less and CSS in general, and building user interfaces.

What's next for

We have big plans for!

Immediate goals

One major feature we were not able to implement was the entire instructor UI for managing classes, which would give insights into which topics students struggle on.

Additionally, we want to make accessible to as many people as possible, so we also plan to integrate Canvas API (or other LMS software) to allow less tech-savvy instructors to use our platform without needing to spend hours migrating.

Stretch goals

In the future, we want to make an all-in-one solution for remote education. Recommending videos is only the start; additional study material such as lectures, readings, and exercises from the web or generated with AI would further improve the remote education experience for both students and instructors

The code

See exactly how we built it!

Frontend repo: garrettluu/

Backend repo: ChaneyChanti/

+ 2 more
Share this project: