Building LeisureTime: A Cross-Platform App with React Native, Expo, and Firebase

chrisler_germinal_2f59bc6

Chrisler Germinal

Posted on September 24, 2024

Building LeisureTime: A Cross-Platform App with React Native, Expo, and Firebase

Introduction

In group chats, ideas for activities often get lost in an endless sea of messages. With LeisureTime, we aimed to build a tool that simplifies group activity planning. Whenever someone has an idea, they can add it to the app and move on with their day. When the group decides to hang out, they can easily check LeisureTime to pick an activity without having to sift through a backlog of messages.

In this article, I’ll dive into the technical challenges we faced and how we approached them using tools like React Native, Firebase, TanStack Query, and more.

Why We Built LeisureTime

Our primary goal with LeisureTime was to create an app that allows users to plan activities in a more organized manner. Each group can suggest leisure activities, comment on them, and vote. Once an event is planned, reminders are automatically sent to all participants, ensuring no one misses out.

However, building a cross-platform app that’s both fast and reliable was not as straightforward as we initially thought. Let me walk you through the tech stack and the major challenges we encountered.

The Tech Stack: What We Used

React Native & Expo:
We leveraged React Native for its cross-platform capabilities, while Expo helped streamline the development process. However, Expo Router wasn't always seamless when adding new libraries, so we made some critical adjustments.

Firebase Firestore:
Instead of a traditional database, we used Firestore as our real-time database to sync leisure activities, comments, and planned events across users. Firestore allowed us to manage large-scale data without compromising performance.

TanStack Query:
On the client side, we used TanStack Query for caching. It handles fetching, caching, synchronizing, and updating server state in the app. This made our UI responsive and efficient, especially when handling real-time data from Firestore.

Firebase Cloud Functions:
For our backend, we built an API using Firebase Cloud Functions. While it enabled server-side processing and custom logic, we faced issues with cold start times, leading to delayed function execution. Optimizing this is still a work in progress.

Git Precommit Scripts:
Managing two separate projects for iOS and Android due to build inconsistencies was a necessity. I use Git precommit scripts to transfer changes between the two projects efficiently. This ensures that both platforms remain in sync with minimal manual effort.

Overcoming Platform-Specific Challenges

One of the biggest challenges in developing LeisureTime was ensuring smooth builds for both iOS and Android. When adding new packages, we often faced conflicts that prevented one or the other platform from building correctly.

The Solution:
To resolve this, we decided to create two separate codebases for iOS and Android, sharing the core logic between them but handling platform-specific details separately. This allowed us to introduce new features without constantly worrying about breaking one of the platforms.

Using Git precommit hooks, any change made on one platform is automatically reflected in the other codebase, reducing the manual effort needed to keep them aligned.

Cold Start Issues with Firebase Cloud Functions

Using Firebase Cloud Functions for the backend was a no-brainer due to its integration with the Firebase ecosystem. However, we ran into issues with cold starts—where functions take longer to initialize when they haven't been recently invoked.

The Challenge:
Cold starts resulted in slower response times, especially for users in different regions. To mitigate this, we began experimenting with warmup functions to keep some functions “alive” and reduce delays.

Key Features for Users

Activity Suggestion and Comments:
Users can suggest activities, and group members can comment on them, helping everyone decide on what to do without losing track of ideas in a chat.

Random Leisure Picker:
When the group can’t decide on what to do, the random leisure picker suggests an activity from the group’s list, making the decision process easier.

Event Planning and Participation:
Once a leisure activity is planned, users can indicate whether they want to participate, allowing the group to know who’s in for the activity.

Rating Completed Activities:
After an event is completed, users can rate the activity. This helps group members discover the best experiences and avoid any less fun ones in the future.

Conclusion

Building LeisureTime has been an exciting journey, from overcoming cross-platform challenges to optimizing performance with Firebase. Our goal is to continue enhancing the app with new features and make group planning as seamless as possible.

If you're tired of chaotic group chats and want a better way to plan activities with friends and family, give LeisureTime a try! Download it today on iOS or Android and experience a more organized approach to leisure planning.

Try LeisureTime

💖 💪 🙅 🚩
chrisler_germinal_2f59bc6
Chrisler Germinal

Posted on September 24, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related