Imagine visiting a gallery or art museum where a film is being exhibited. After watching the film, you feel moved and inspired, as if something within you has changed. But what happens to that film once the exhibition is over? Where is it stored, and how can it be retrieved? Some films may be available on the artist's website through a Vimeo link or uploaded to YouTube, but many disappear without a trace. Most of these films are not catalogued, making it challenging to locate the film you watched or learn where to find it.

These films are valuable works of art, and even after an exhibition, they still have the power to convey a profound message to an audience. Unfortunately, there is no platform that offers accessibility, discoverability, and a comprehensive catalogue in a user-friendly and engaging manner. Platforms like Electronic Arts Intermix and Video Data Bank exist but do not prioritize discovery or ease of acccess.

There is no such platform that combines accessibility, discoverability, and a strong catalogue in a consistent and joyful way. There are platforms like the Electronic Arts Intermix, or the Video Data Bank - but they do not put a focus on discovery, or ease of access.

So I tried to develop a product that could solve this.

What are the underlying hypotheses?

• People want to consume art movies as a form of content
• People are ready to consume this content outside from a gallery setting in their free time
• Artists are ready to provide their art as a form of content to a third party aggregator
• Artists are okay with making their art available in such a setting.
• There is value in making this art available and someone would be willing to pay for it

What is the solution?

The solution is a seamless browsing experience that learns more about users as they watch content, enabling it to recommend new content based on their viewing history. The platform can also group content into categories to facilitate discovery. The prototype is inspired by the browsing experience of platforms like Same Energy, Netflix, YouTube, FilmStruck, and Vimeo.

For my prototype I got inspired by the platform https://same.energy/ and its browsing experience.

Other inspirations were Netflix, YouTube, FilmStruck, Vimeo

Who is this for?

1. Consumers: Individuals who enjoy discovering new and interesting content to share with their friends, consuming short to medium-length content, and refining their personal tastes while building a collection of favorite artists.
2. Artists: Creators who want to increase their exposure and be fairly compensated for their work.
3. Gallery owners: Professionals seeking to discover new artists.

‍

Market research

My Market research found a couple of platforms, but none of them really was able to fulfil Discoverability, Catalogue, or Accessibility. Either the browsing experience was horrible, the Catalogue was very limited, or movies were not made accessible at all.

Technical Challenges

Technical challenges include creating recommendations and seeding the database. A reusable-project (https://www.laurinstahl.page/blog/reusable-project) has been implemented to kickstart the development process, complete with a MongoDB connected to an Express API and a React frontend. For an effective recommendation engine, the incorporation of a Neo4J database has been suggested by ChatGPT.

Recommendations

I utilized my reusable-project (https://www.laurinstahl.page/blog/reusable-project) to get started, where I already had storybook implemented, a MongoDB connected with an express API, and a react frontend to power it. I knew, however, that if I wanted to have a true recommendation engine, I needed to up my game. ChatGPT recommended that I built a Neo4J database. I went and set it up and it would be embeddable smoothly into my existing express API.

This is what a work in progress screenshot of my graph database looks like:

Seeding the database

I created a decision making engine utilizing ChatGPT that prompts to provide similar movies (10) to a series of seed movies (20) that I created based on my own knowledge, picking movies from different periods, and categories.

I optimized the prompts to ensure ChatGPT would return the data in a JSON. As an additional safety measure, I took whatever response - that sometimes was faulty JSON and prompted ChatGPT additionally, to correct any mistakes in that JSON.

Since I then knew what movies were similar, I could simply set a connection in my Neo4J database between the similar movies and the seed movies. After the first run-through this would mean that my algorithm would provide me a maximum of 200 new movies for my database. In reality, it would often identify the same movie again as a similar movie, simply adding nodes between the movies that are already in the database, with the seed movie.

I could then run this script multiple additional times, finding new movies in each run-through, but also creating a more connected mesh.

Animations

I wanted to give the illusion that all the movies displayed to the user would be part of an infinite canvas. So when a new movie gets selected, and the similar recommended movies get updated, it should feel like that they come from outside the canvas. I also wanted to avoid that if a certain movie is recommended for both, the currently selected movie, and the newly selected movie - it would not be switched out but stay. Also, if there are not enough similar movies (8 movies) with a max. similarity of 2 nodes between each other, we should ask our AI-based recommender to come up with additional similar movies.

In order to make that work I had to solve a few things:

1. When the API loads the new recommended movies, we compare it with the current movies in the state, and only update the movies that are new, triggering the animation
2. Implement an additional loading state, that when the loading state gets started, the card moving out animation is triggered, and when it is finished, they move back in - but while they're outside of the canvas, we find the new movies
3. To make it look more dynamic, we added a randomizer in the padding of the cards to the box. they reside in, so they look not too perfectly aligned
4. Additionally, the color of the passepartout would randomly set

Current State

While the product is currently not hosted anywhere, and I am still working on it - this is a current screenshot of what it looks like: