Meetups

Meetups - Hack&Roll 2021, Navigate left and right to see our project's key features for yourselves!
Edit Mode - Import from Timetable, add unavailable timeslots and reset the meetup timetable here
Import from friend's links - Customize their names and colors, as well as hide and delete them if it gets too messy
View Available slots - Toggle view between Available/Unavailable slots to easily determine the common timeslots between a group of friends
Share/Sync - Easily share your meetups timetable link with friends or to keep it synced on all your devices

Inspiration

We often come across instances where we have to arrange, with friends, a timing to meetup, be it for a group project or a leisure activity. It is often troublesome to come into an agreement of a common free time slot. Therefore, it is convenient to have Meetups, a planner modification for NUSMods.

What it does

Meetups is a new tab in NUSMods that features an edit mode, which allows for the editing of your own free time slots, easy importing from your NUSmods timetable, as well as resetting to clear all unavailable slots. Meetups also supports importing of multiple timetable schedules from friends, comparison of schedules within a single timetable, and a toggle View button, to allow for the viewing of common free time slots among all imported friends.

How we built it

We started off using the existing NUSMods as a reference to discuss what features we should include in our modification. Then, we used Draw.io to come up with a wireframe of the features that we wanted to implement. Thereafter, we split the features among the team to each individual to investigate how similar features were implemented in NUSMods, and take charge in developing them.

Challenges we ran into

Firstly, our team is mainly comprised of members who have limited experience working with web applications. As a result, there was a steep learning curve involved. For a good amount of time, we had to first understand the framework that NUSMods was built using, and its project structure and implementation of its features before being able to extend Meetups' functionality into it.

Code wise, we found that the data structure stored by NUSMods was incompatible with our modification. One of the main features we were going to create was the ability for users to block out custom time slots on top of what's already blocked out by their existing NUSMods timetable. As a result, we had to come up with a new overarching state for the meetup feature. The is what we came up with.

type TimetableDay = (0 | 1)[ ]
type Timetable = {
    Monday: TimetableDay
    Tuesday: TimetableDay
    Wednesday: TimetableDay
    Thursday: TimetableDay
    Friday: TimetableDay
    Saturday: TimetableDay
    Sunday: TimetableDay
}

There were two main reasons why we did it this way. Firstly it made it easier to convert the TimetableDay array into the query string for our share feature and secondly, it made it easier for us to convert the TimetableDay array into the TimetableArrangement type of the existing timetable component already used in the existing timetable feature of NUSMods.

Accomplishments that we're proud of

At the end of it all, we managed to reuse many of the existing components in NUSMods to create our add-on feature, allowing us to meet the tight 24-hour deadline of the event. All of the basic features that we planned for has been implemented in our final product despite the short timeline.