Cinepiter Web5

Welcome screen
Dashboard
Destiny Plus
Webflix

Inspiration

Netflix, Spotify, Disney Plus, Hulu...they all do an amazing job at recommending us the best movies, tv shows and music, perfectly tailored to our taste. The problem is, every time we like a song or a movie, those preferences are being stored in a centralised server. We don't own anything, and if we want to try out a new streaming service, it will know nothing about us, and we'll have to train it from scratch before we get any useful recommendations.

What it does

The idea behind Cinepiter is to first of all remove the traditional way of logging in through an email or Google account, and instead use an automatically generated DID to access multiple streaming platforms. Once inside Cinepiter, we will have a visual representation of our tastes, which will get updated in real time every time we like a new movie, regardless of the platform. We built two mock streaming platforms that resemble Netflix and Disney Plus to give an idea of how the concept works. Simply access one of the platforms, and start clicking on movies you like. You will start to get recommendations updated in real time, which take into account not only the preferences of that platform, but also the others which are connected to your DID. Just click back to go to the dashboard, and you will see your preferences on a radar chart.

How we built it

The app is built using React.js. As a mobile developer primarily, I'm used to working with Swift and React Native, so it made sense to build the project using a framework I'm familiar with so that I could spend most of my time coding the logic. The central brain of the app and the algorithms lie in the Cinepiter Context, which is in charge of reading and writing values to the DWN, as well as connecting to the user's DID. Whenever a user likes a movie, a new record is created in the DWN, which also acts as the only source of truth in the app. It's also possible to remove the preference by simply clicking on it again. All the movies come from the TMDB API, which is a popular API for gathering information about movies. Each time there's a change in the preferences (a user has added or removed a movie from their favourites), a series of algorithms are triggered. These algorithms go through the preferred movies, which is an array of Movie objects, containing the movie title, id and an array of genre ids for that movie. The algorithm will compare all the genre ids in our collection and compare them with a table of genre codes downloaded from the API. It will then create a new array of objects with a key value pair of genre name, and how many movies with that genre we have in our favourites collection. This information is then used to display the radar chart in the dashboard. The algorithm also has come clean-up functions such as removing duplicates, shuffling and sorting. On both platforms (Weblix and Destiny Plus), there is a 'Recommended' row of movies. To generate these movies, the algorithm selects the top 5 genres in our collection, looks for all the movies with that genre code in our favourites, and queries the API to find similar movies for each movie. We then remove all duplicates, shuffle the array and pick 25 movies. The recommended row updates in real time as we interact with liking and disliking a movie.

Challenges we ran into

One of the challenges was getting the Web5 SDK running smoothly in React. Initially I was getting a lot of compile errors when importing Web5. The errors seemed to be related to webkit and browserify. Eventually, I went onto the Discord channel and searched for people having similar issues, and found 1 person who fixed it by installing the Web5 dependency from @tbd54566975/web5 instead. Another challenge was the fact that we only found out about this hackathon a few days ago. We came up with the idea pretty fast, but bringing it to life in just a few days was challenging, as I had to juggle between becoming fast with React, as well as designing the algorithms and integration with Web5 to make sure everything worked smoothly together.

Accomplishments that we're proud of

We are very proud of what we've built in only a few days. As mentioned, this was the first time working with Web5 and React. We never let these notions dictate what we could or couldn't build, and instead focused on what we wanted to achieve, and learned what needed to be learned in order to get the job done.

What we learned

We both learned concepts of Web3 and Web5, and how to bring to life a project from scratch in a very short period of time. From a programming perspective, it was fascinating to be thrown into the deep end and build an app with new technologies. The Web5 SDK is very easy to learn and use, and I also practiced with the tutorial apps available on the resources website.

What's next for Cinepiter Web5

In its current state, Cinepiter is a proof of concept of what would be possible if popular streaming platforms used blockchain technology. If this were to become a real product, I think the first thing we would do is gamefy the way users choose which movies they like, to make the process more fun.