Background

Over the last couple of years, I've spent a lot of time learning and playing with web development technologies like JavaScript, TypeScript, React, NextJS, etc. Wanting to learn more about mobile app development, React Native was the first thing that came to mind. I decided the best way to learn was to start a project (the classic), so welcome to this post!

The App

I wanted to create a Tinder-like app for musicians, specifically songwriters and producers, to be able to match and create music together.

Initially, jotting down some features that the app would need, we have:

• Authentication
• Edit Profile
• Swipe functionality
• Matching algorithm
• Chat
• Upload music
• Play music

Following some React Native courses and videos, I was able to get a foundation of how to start this project and tools needed to expand it further. We're going to be using the following:

• React-Native
• Expo
• Tailwind React Native
• Firebase

Authentication

For authentication, we're using expo-auth-session. Right now there's only Google support, but the providers make it simple to add more sign in options later on.

Edit Profile

Users can edit their profile details such as occupation and age, but functionality to upload images and music still needs to be developed. User information is stored using the Firestore Database in Firebase.

Swipe and Match Functionality

To create the swipe animation, I used react-native-deck-swiper. For the match functionality, we create another document in the user's Firestore DB that stores each swipe right and left until there are no more users to show.

Right now it shows all registered users, but it would be pretty cool to add other filters that users can select to narrow down the results that they see.

Chat

The chat functionality works, but is still a little tricky. This also uses the Firestore DB to save the messages. This can be a bit dangerous and a security risk, so definitely moving this piece to a backend server. As a concept, the chat between two users work.

Upload and Play Music

Playing music and skipping tracks is a working feature. Uploading music is still in development.

Demo

Challenges and Moving Forward

So far I've had challenges with setting up Expo, Simulators, Authentication and figuring out how all of the libraries work. React Native/Expo use plenty of dependencies and require you to really dig into what you're adding to the app, its strengths, its weaknesses, and the feasibility of actually working it into your code.

Going forward with the app, I plan on implementing the features mentioned above and polishing the design a bit. I've been creating each asset myself, so there's definitely some room for improvement. I also want to work on planning where to host the app and best practices regarding that.

Final Thoughts

Overall, even through the challenges, I've learned a ton so far about React Native and having fun while doing it. Being familiar with React did make the transition to React Native a lot smoother, but I think anyone can pick up the framework! That's it for now though.

Keep Learning