We were inspired by the many now online interactions we have where deciding on what to do with others is even harder than usual. Hopefully through apps like these people can have an easier time spending time with one another and the quality of their experiences can be improved!
What it does
Cinema swipe is a cross-platform app which allows people to create rooms, invite their friends, and swipe through a wide variety of movies from the streaming platforms of their choice. As users swipe through movies, the ones they are interested in will show up in everyone else's feed so as to increase the chances that users will converge towards the same movie. Once everyone in the room has swiped right on a movie, a match is made and users can be redirected to the platforms that the movie is available on.
How we built it
Frontend: the frontend was built using React Native w/ Expo in TypeScript. Almost all screens and components are built from scratch, libraries were used for the Swiper and Bouncing Buttons. To manage global state we used a combination of the React Context API and React Native's Local Storage API. These ended up storing the client's persistent id (so that it would be saved even if the app was closed) and to store a reference to the web socket used for communication with the server.
Backend: for the backend, we decided to use Node.js and TypeScript to allow for a single-language project. Additionally, since we defined an API contract for the WebSocket messages between the frontend and backend, having TypeScript and the shared type system was very helpful. We also wanted to keep performance in mind, so instead of frequent polling, we use an asynchronous system of messages passed over WebSocket. For our data systems, we decided to use Redis and Postgres. Using Redis for caching improved performance, and we also relied heavily on Redis' Pub/Sub system to broadcast messages across the various rooms. Our persistent data was stored using Postgres, where the traditional SQL allowed for flexible queries to generate recommendations for users. Finally, we decided to use Google Cloud Platform's managed services to run everything, including Cloud SQL for the database, Memorystore for Redis, and App Engine for our server itself.
Environment: for our development environment, we used a Docker container and docker-compose to simulate the production environment quickly and easily on our local machines, helping to speed development of both the backend and frontend.
Challenges we ran into
One of the biggest challenges we ran into was incorporating the WebSockets, not only on both ends independently, but especially when trying to communicate with one another. This was especially tricky because the socket needed to be available to the entire app via the Context API but also we needed to respond to web socket messages usually by navigating to another screen. This required us to wrap the socket in a custom class which could take callbacks and perform actions local to the screen handling messages at the time.
Accomplishments that we're proud of
We're especially proud of this app since it is fully fleshed out and almost ready for publishing. The UI is probably the most polished we've had at any hackathon and the backend structure using the State Design Pattern is incredibly beautiful, making using the API extremely easy. This was also a big culmination of many of our skill sets which we don't often get to show off so we're happy with the result.
What we learned
Neither of us had used asynchronous client-server communication via WebSockets, and faced a steep learning curve. Additionally, we used other tools that were new to us, including Redis for Pub/Sub. We also had to do cross-platform compatibility to generate both web and native builds. Finally, we learned about better ways to manage our code for a complex application like this by employing the State Design Pattern in our Typescript backend.
What's next for Cinema Swipe
Because our platform is so effective at gathering users' preferences for movies, with many more "ratings" than Netflix or other streaming services would typically receive from a given user, we hope to employ more advanced machine learning techniques to more quickly and effectively match users with content based on both their past swiping history, their group's swiping, and the actions of the whole community