Calendify

Inspiration

Calendify was inspired by the idea of personalizing everyday experiences. We wanted to create a seamless way for users to feel emotionally connected to their schedules through music. The idea was sparked by the fact that music can enhance our moods and productivity, so why not tailor it to match the specific activities throughout the day? Whether it’s a workout, a date, or simply winding down at night, we wanted the soundtrack of the day to complement each moment.

What It Does

Calendify integrates Google Calendar with a React-based calendar to display a user’s schedule. It then uses Gemini AI to analyze the events on the calendar and curate personalized playlists based on the activity. For instance, it will suggest energetic songs for a morning workout, mellow tunes for winding down after a long day, or even romantic tracks for a date. The playlists not only match the user’s activities but also include popular and trending songs, making every moment feel in sync with their personal rhythm.

How We Built It

We built Calendify by first connecting Google Calendar to a React-based calendar using the react-big-calendar library. The calendar is fully interactive, allowing users to view their events and even add new ones. We then used Gemini AI to analyze these events and generate appropriate playlists. The playlists are dynamically created using data pulled from the user’s calendar, ensuring that the song recommendations fit the context of each event. The entire process, from calendar integration to playlist generation, is powered by an easy-to-use and responsive interface.

Challenges We Ran Into

1. Integrating `react-big-calendar` with Google Calendar

One of the main challenges we faced was integrating the react-big-calendar into our Google Calendar setup. When we attempted to connect the calendar, we encountered an issue where clicking the login button did not redirect the user to the Google login page. This was crucial for allowing users to authenticate and grant access to their Google Calendar data.

After some investigation, we realized that the problem stemmed from the handling of authentication and the redirect URL. The authentication flow wasn’t correctly triggering the Octa Auth0 login process, preventing us from obtaining the necessary credentials to fetch calendar data. We had to troubleshoot the entire authentication setup, adjust the redirect URIs, and ensure the client was correctly configured to handle the OAuth flow, making the user experience smoother.

2. Displaying Gemini AI Query Results in React

Another issue we faced was displaying the Gemini AI query results on our React page. While the response from the Gemini AI API was being successfully returned and rendered on the Flask server, it was not appearing on the front-end React application.

The issue lay in how the data was being fetched and passed between the Flask server and React. Initially, we attempted to directly integrate the API response from Flask into the React component, but the data wasn’t being received properly due to CORS (Cross-Origin Resource Sharing) issues. We also had trouble with the way the API response was structured, requiring us to adjust the format and ensure that the correct data was passed via the appropriate endpoints.

After addressing the CORS issue and modifying the data flow, we were able to display the playlists and song recommendations in the React app, ensuring that users could see personalized suggestions based on their calendar events.

Accomplishments That We’re Proud Of

Seamless integration between the Google Calendar API and our custom React calendar.
Successfully generating personalized playlists based on real-time event data.
Implementing Gemini AI to deliver a unique, customized user experience.
Incorporating popular trending songs into the playlists, ensuring fresh and relevant music recommendations.

What We Learned

We learned a lot about working with different APIs and integrating them into a unified user experience. Google Calendar’s API had its complexities, but working through those helped us understand how to manage external data effectively in a React application. We also learned how to use AI, specifically Gemini, to generate contextual responses that feel personalized. Lastly, we learned the importance of testing for real-time syncing and ensuring the app’s performance doesn’t degrade with added complexity.

What’s Next for Calendify

We plan to expand the features of Calendify by adding more customization options for users, such as:

The ability to select specific genres or moods for playlist curation.
More AI-powered features, like analyzing user preferences over time for even better recommendations.
Support for multiple calendar platforms beyond Google Calendar.
Enhancing the mobile experience to make it even more accessible on-the-go.

Ultimately, we want Calendify to evolve into a personalized daily assistant that enhances users’ productivity and enjoyment through the power of music.