Inspiration
We've all been there, you've had a long day and you just want to sit down, relax, and watch something? But what should you watch? This is a problem we wanted to provide a tool for.
We drew inspiration from dating apps for the method of swiping to match up with a movie. We felt this kind of interface would be a quick and easy way to determine user preferences.
What it does
When you open the app, you are brought to a sign-in screen where you can create an account or log in. Every account is authenticated using the OAuth 2.0 authentication procedure provided by Firebase. There is a unique key and token for every verified user. Once logged in, you are able to set a genre preference and start swiping according to the user’s selection.
As you swipe, a recommendation engine collects data about how you swipe and uses this data to determine what other movies to show the user.
When you're done swiping, you can go to the matches screen to see a selection of titles you have liked. You can select a title and go to a chat room to discuss this movie with others who have also liked the movie.
How we built it
We set up node.js and the expo command line interface, then initialized the react native project. We then set up a flow diagram for how the user would move through different screens in the app and what features we wanted. These were turned into associated issues in Github to work on. Then we each set out on working on different aspects of the app, such as OAuth, movie profile swiping logic, movie database creation, recommendation engine design, and user interfaces. We brought these aspects together by connecting UI elements to the backend logic, setting up navigation between screens, and began fleshing out remaining features and squashing bugs as they came up.
Challenges we ran into
Having never worked with React Native before, there was a steep learning curve to learning how the ecosystem is set up. In particular, we struggled a lot with adapting React community libraries to do what we wanted and getting to a state where we could run and debug our app. As Javascript is commonly used in React Native, we decided to choose an improved version of the popular language, Typescript. This also caused minor barriers when referencing materials along with also trying to build our project to be compatible with both Android and iOS.
Accomplishments that we're proud of
This is the first full-fledged mobile app anyone in the group has built, and the first time any of us has used React Native, Firebase and Expo. We are incredibly proud of how the user interface turned out and how we were able to implement most of the features we set out to include, even some that were originally reach-goals.
What we learned
We all learned a lot about building apps with React Native, such as building custom components, creating user interfaces that can navigate to other screens, and deploying React Native apps onto mobile devices.
Additionally, we learned about content-based movie recommendation systems and how they come up with suggestions based on user preferences and movie metadata.
What's next for FlikPik
We are interested in further developing the app to fully build out some of its social features, such as the chat rooms, virtual movie theater, and user profile creation.
Log in or sign up for Devpost to join the conversation.