Weaver

First, upload a video.
Video imported.
Generating playlist.
Creates a playlist with songs linked to Spotify.

Inspiration

Have you ever wished you could create a soundtrack that captures the different moments of your day? Whether it's a sunny afternoon walk in the park or a study session late into the night, we wanted a way to build playlists that reflect the mood and atmosphere of our environment. Thus, we decided to make Weaver — an app that weaves our experiences into sound, and our memories into music.

What it does

Weaver is a web app that bridges the gap between visual storytelling and emotional sound design. Like a Beaver shaping the flow of a river, Weaver assembles the perfect soundtrack to guide your story. It analyzes your videos and curates personalized playlists that match the mood, genre, and emotional landscape of your footage.

How does it work?

Just upload your video, and Weaver does the rest! In moments, you’ll get a personalized playlist that perfectly matches the mood and feel of your footage.

Who is this meant for? Who can use it?

Personal Users: Many people enjoy matching their music to their energy and surroundings. Weaver makes it easy to create the perfect playlist for any situation, from everyday settings to special events like birthdays or vacations. Our playlists enable users to embody and relive their favourite moments.
Creators and Filmmakers: Many creators spend hours searching for the right background music to match the energy of their video. A good soundtrack can increase emotional impact and promote viewership. Weaver can support creators and filmmakers by automating the music selection process, allowing them to save time while improving viewer engagement.

How we built it

We used Next.js as the framework for our project. We built the frontend with React.js and Tailwind CSS. For the backend, we integrated the TwelveLabs API to analyze our videos and we leveraged Google Gemini to generate song recommendations. To retrieve songs, we used Spotify API.

Challenges we ran into

One of the biggest challenges we faced was switching from a Node.js setup to the Next.js framework. After developing our project for hours, we realized that we required the full-stack functionalities of Next.js. However, not everyone on the team was familiar with how it worked, so many of us had to learn it on the spot. We also had to figure out how to work with the TwelveLabs API, which was completely new to us. TwelveLabs was an essential part of our project, so we had to spend a lot of time experimenting, reading documentation, and watching tutorials to understand how to use it effectively. In the end, we were able to figure it out with persistence, teamwork, a bit of help from co-pilot, and being open to learning.

Accomplishments that we're proud of

Sleeping a Healthy and Sustainable 4 Hours. Completing this project within the time frame while using an API that was completely new to us.

What we learned

We learned how to integrate multiple technologies — frontend, backend, and third-party APIs — into a cohesive, full-stack application. Working with asynchronous data, managing state, and coordinating different components helped us understand how to build more reliable and scalable systems. Most importantly, we learned how to collaborate effectively with each other, and how to combine our varying skillsets to create a unified product.

What's next for Weaver

We see a lot of potential for Weaver, such as:

Integration into social media. For example, users can use Weaver to choose relevant songs for their posts.
Integration into video editing software to help editors choose songs that fit the mood of each scene.
Overall better visual appearance of the app
More functionality and QOL improvements

We also want to implement features such as: