sync

Inspiration

Balancing work and life is a critical part of any schedule, whether slow-paced or fast-paced. While many of us may be diligent about planning around productivity, it’s just as important to be intentional about scheduling time for other activities, especially with the people in our lives. Sync is a social calendar application that allows you and your friends to flexibly and quickly plan activities around your agendas. Our team’s members frequently use scheduling apps such as Google Calendar or Outlook Calendar to plan about our days, but we’ve frequently run into issues with digital communication when scheduling incidental events throughout the week. Whether it’s getting those organizing texts buried in group chats or simply not knowing your availability off the top of your head when spontaneously planning an outing, human error understandably gets in the way of effectively planning time together. We wanted to design a feature-rich application with the ability to visualize compatible meetup times as well as find flexible times based on duration.

What it does

Sync features the ability to schedule meeting times by aggregating you and your friends’ schedules on top of a familiar view of weekly and monthly calendars. The three event-creation categories are fixed, meetup, and flex. Fixed event times are analogous to traditional scheduling: users set start/end times, location, and a description. Meetup events take everyone’s availability into account. Sync takes the invitees’ schedules and displays their availability in a horizontal timeline, which provides an intuitive way to select a time that everyone can make. Flex events allow for Sync to optimize blocks of time to your day, while also giving you alternative options such as the earliest and latest times you can schedule an event.

How we built it

Sync’s design, complete with comprehensive prototyping, was done in Figma. We wanted to adhere to a visual language that incorporated cool tones, soft edges, emojis, and minimalist typography to create a calm yet elegant look for our app. The design defines frames to represent each of the web app’s pages and several reusable components to help unify the design and user experience. Key features of the frontend workflow were made functional by replicating on-click and hover interactions. Sync supports reading from any ICS file, including Google Calendar, through its Python backend. We built a custom API to handle availability-finding algorithms relevant to our application, namely for the meetup and flex meeting creation features. We used Matplotlib to display the solutions to our availability-finding algorithms, represented as a weekly schedule with 24-hour denominations.

Challenges we ran into

Our biggest challenge was attempting to port our designs from Figma to a React web app. We found it quite challenging to take the components that we had designed and display them in the same high-quality and aesthetic manner that we were able to convey on Figma. As a result, we decided to put full force into making our Figma demo as polished as possible, while still creating a working prototype of our back-end algorithm (in suggesting alternative meeting times and also displaying meetup availability between friends’ calendars).

Accomplishments that we’re proud of

From the inception of the idea that became Sync, we are proud to have completed the amount of design and implementation that went into our final hack. Although this wasn’t our first hackathon submission, this was our first time using Figma to ideate and design, and we found a great deal of success using it to build a visually-appealing, complete user interface for Sync. We’re also fond to have devised a solution to an issue that strongly resonates with us. We set out to take a creative approach on ad-hoc scheduling, and what we came up with during this hackathon definitely satisfied our interests.

What we learned

This was our first time using Figma at high-scale. However, we were eventually able to translate our paper designs to the screen after playing around with components and frames in Figma, and we can definitely say we have a strong grasp of Figma after working with it for a large chunk of time. Implementing our web app for Sync taught us a lot about JavaScript and React web development. Additionally, we gained experience with Matplotlib and also learned how to register a domain with domain.com. You can find our Figma prototype at syncedup.tech, which is our submission for best domain!

What’s next for Sync

Sync has many potential extension fields, from ML-powered prediction scheduling to additional features such as location-aware event planning and key-word prioritization. Additionally, as Sync is a social-centered calendar app, it's reasonable to implement a mobile application for Sync.

Built With

• css
• figma
• html
• javascript
• matplotlib
• python
• react