Resync

Never run into "Hey, have you started the assignment yet?" again.

Comment

Inspiration

For the past year and a half, most university students have been taking all of their courses online and a large majority of these students have had to take their courses asynchronously. This means that when you have a class with tasks like lectures, quizzes, assignments, etc., all to be completed with no schedule, it’s hard to figure out when to do what. Resync solves this problem by allowing students to see what the rest of the class is spending their time on. Instead of having to ask your friends whether or not they’ve started an assignment, you can check on Resync and see what percentage of your class has started or finished each task!

What it does

Resync is a website that allows students to resynchronize their asynchronous online classes. Professors create classes and add a list of tasks and deadlines which students can view once the start times have passed on the tasks. Students join classes using a code provided to them by their professor. Once a student starts an assessment or lecture, they can indicate on the site that they’ve done so and this data gets aggregated and displayed to the rest of the class. All students will be able to see what proportion of the class has not started, have started, or are finished with each assignment which will provide both a sense of community and help students prioritize tasks by seeing what other people are prioritizing.

Individual student information is not shared with other students and all completion status data is displayed as a proportion of the entire class. Professors can go through individual student information as well as see aggregate data on how long assignments are taking their class.

Furthermore, notifications can be set up by both students and professors to be alerted in the following instances:

  1. In relation to when a task is posted (notify me n days after a task is posted)
  2. In relation to when a task is due (notify me n days before a task is due)
  3. In relation to what proportion of the class has started (notify me when n% of the class has started this task)
  4. In relation to what proportion of the class has finished (notify me when n% of the class finished this assignment) All of these notifications can be personalized on a user-by-user basis so that each user can decide when they want to start a given task. For example, some students may want to start assignments once 10% of their class has started the assignment or perhaps 4 days before the deadline.

We recognized that not all students would want to see this much data about their peers and so viewing the aggregated task status information is something that students can choose not to see.

How we built it

We began by creating high-fidelity wireframes in Figma, making use of components from the Bootstrap UI Kit.

The frontend was built using React TypeScript (for type safety) with React Bootstrap for theming. React Router was used for navigation between pages.

The backend was also coded in TypeScript. We used Firebase Cloud Firestore, a no-SQL database, for storing the data.

Challenges we ran into

Pseudo Notification System

We wanted to implement a pseudo notification system that could inform users of specific milestones related to tasks that passed by while they were logged out. The goal was to keep a history of the times students started and completed a task, and scan through this timeline every time a user logged on to determine if any milestone they wanted to observe had passed by. We ran into challenges of how to store this history in a way that would minimize redundant information being stored and how much flexibility we wanted to provide users for notification setting customization.

Admin and Student Accounts

Another challenge we ran into was figuring out if we wanted to separate the users of our platform into Admin and Student accounts. The initial idea was to have a dedicated account type for professors, which gave them the ability to create courses and invite students, and a dedicated account for students, which allowed them to enroll in courses. After experimenting with the design of the database for a while, we ended up switching to a role-based system. With this method, we would only store one type of user object in the database. Users would then be able to both create courses they want to administer, and also join courses they are enrolled in.

Accomplishments that we're proud of

  • Creating a minimalist and functional UI design
  • Building a custom triple-progress bar component
  • Designing the interfaces for our backend

What we learned

  • UI design in Figma
  • Schema designing with Firebase
  • Creating websites using React + Typescript

What's next for Resync

A large portion of this hackathon went into planning and designing the website’s design and schema design leaving little time for the development of the website itself. Our current next steps are likely to enable class creation and class joining for professors and students, task creation and task progress indication, and the assignment insights portion for professors.

Built With

Share this project:

Updates