How Teatime saved money and shipped their MVP faster with Expo

This is a guest post from Chase Myers - a Software Engineer for Indeed by day, and a software hobbyist by night. He is passionate about building new ideas and enjoys tinkering with the latest software technologies. When he's not immersed in software, Chase enjoys attending live theatre with his wife, combining his love for the performing arts with a rewarding personal life.

…

Ever gotten a text so juicy you couldn't keep it to yourself? Or maybe you just wanted some anonymous text advice without spilling the beans to people you know?

That was the seed of the app idea my eventual co-founder brought to me through YCombinator in April of 2024. I instantly fell in love with this idea of building an app for safely sharing some of the hilarious and bizarre digital interactions we experience as part of this post-pandemic, online dating, remote working generation. 

Today I’m proud to share that we’re launching our MVP of Teatime. This is a blog about how I made big architectural decisions as a first time founder of my own startup and what my experience has been like with Expo. 

What is Teatime?

Teatime reimagines the social phenomenon of screenshotting juicy texts and sending them to friends in the form of a social media app for young adults. On Teatime, users “spill the tea” (share text drama) which they can then interact with, voting on text responses, and commenting their advice. 

Teatime fills the desire to get text advice fast and anonymously, allowing users to share their text conversations, get feedback, and enjoy hilarious text drama. Teatime maintains text privacy with our “hide from contacts” feature, which prevents selected contacts from seeing posts and AI post screening which removes names and sensitive data from posts. 

How we built Teatime

Choosing a new language or framework can be anxiety-inducing. Of course, the choice is always going to be biased towards its builders' expertise. It can be advantageous to do what you’re more familiar with. 

You may have guessed it by now, but I’ve become acquainted with React for both personal and professional use. Additionally I was already vaguely familiar with React Native , I previously did some digging into how to build mobile apps years ago. When I first pondered the idea of creating Teatime, I wanted to make sure I did it right, instead of doing what I thought would be easiest. 

Flutter or React Native

I knew that one core requirement for this app was that it would have to work on both IOS and Android. Knowing this, I knew I needed a language and framework that would be able to support both platforms. After doing some reading on the hot new ways to build a cross platform app, I was left with Flutter or React Native. After fumbling around with Flutter and watching some youtube videos, I started to grasp the concept of how Flutter’s syntax worked. I would have been able to throw together an app using trial and error and lots of Google. 

At this point I was weighing the pros and cons of React Native or Flutter. What it came down to in the end was the fact that I really didn’t want to learn while on the job. I wanted to be able to focus on simply building the app, and would prefer to avoid having to spend time learning a new syntax or language. With React Native I was saving myself from getting bogged down, and because of that, React Native was our choice to move forward.

Ionic or Expo

After finally coming to the conclusion I was ready to move forward with React Native, it was time to decide which of the popular mobile frameworks would be used to make it happen. Of course, after consulting the experts on Reddit, Google, and Youtube, I was left with the decision of if I wanted to move forward with Ionic or Expo.

The short and sweet answer here is that Expo seemed to be much more mature compared to Ionic in terms of features, and tutorials they had to offer. During my discovery phase, I was figuring out the logistics involved with navigating and routing users between different screens. Throughout different forums and documentation online the most common method for this leads back to React Native Navigation, however while reading the Expo docs, I learned about Expo Router, this was a game changer. I come from a background where every web app I build is made with NextJS, for those of you that don’t know about NextJS and Expo Router, they both share a very nice system known as path based routing for both your client and server, and the coolest part about Expo Router is that you can have your server live within the exact same repo as your client application. Path-based routing allows you to abstract away some of the trivial nuances of routing. Essentially Teatime’s navigation and REST API is built by creating nested folders inside the repo, and then the magic of path based routing takes effect.

This was powerful in the early stages of development because it allows for quick iterations all from within the same repo, and organically enables you to organize your code. Expo won me over with their suite of tools that had an excellent online sentiment, and great video tutorials.

Our experience building with Expo

Auth and Server secrets

Teatime is built with many different fun and exciting technologies and libraries that make it a relatable way to understand some of the nuances of Expo. The backbone of every application is going to be your authentication and authorization. Historically, Clerk was my go-to for all things auth, Clerk offers an amazing out of the box solution to manage your users with ease. Evidently, they do not support Expo on the browser, and because of that, in order to ensure I had the possibility to expand to the web in the future, I landed on Supabase.

Supabase is pretty barebones if you’re exclusively using it for Authentication, but it gets the job done. The tricky part I ran into with Expo and Supabase was that since I was using the Expo Router, and my REST API was built and bundled into a monolithic application along side my client app, I didn’t have the confidence that I needed to ensure none of my server specific keys or secrets would not ever make their way to be bundled into the client application. In fairness, it’s possible there is better documentation out there that I didn’t fully grasp that talks about this more in depth. 

Bundling and separating a new CI/CD process that would exclude server and client code respectively was a bit of a pain point with the Metro server, and to be quite honest, I didn’t want to dig into the details further after already spending time trying to make things work. At this point, I thought to myself, why not just do what I was already familiar with, and so I spun up a dedicated NextJS API using the same path routing that was offered by Expo Routing. 

The awesome part was that there was nothing special that had to be done, all I had to do was copy and paste my api folder from Expo, and boom, NextJS api was functioning! Now I was able to have my Supabase service account secret accessible on my server side and maintain confidence that it won’t somehow be bundled in and exposed to my clients.

Awesome expo libraries

To spare sharing too many details, I’ll provide a list of some of the most useful expo package libraries that saved us a ton of time to achieve features we wanted to offer from a Native experience. 

• expo-notifications - Helps achieve push notifications

• expo-image - Faster image loads, removed flickering of images

• expo-image-picker - Access Photo library

• expo-font - Helps setup and bundle a font for your app

• expo-contacts - Enables requesting access to user Contacts

Using the following libraries, Teatime managed to integrate easily with native functionality cross platform. Let’s dive into some of our specific use cases for these libraries. 

Our core feature revolves around taking screenshots submitted by users using OpenAI to validate, extract, and parse information from the images, to then eventually publish as new “Tea” on our feed. The expo-image-picker provided the ability for this to be delivered very quickly. Through the snippet above we managed to enable users to submit up to 10 images, and even prevented them from selecting Files or Videos. To top it all off, it even provided us with the option to convert the images to Base64, enabling a seamless workflow to OpenAI’s vision model.

After a user submits screenshots and begins publishing their own Tea, they have the option to prevent and block specific phone numbers from seeing their posts. Considering the fact that users are required to sign up and verify their phone number through Twilio Verify, we can guarantee users who are viewing the Tea are not logged in with a blocked phone number. Using expo-contacts, we’re able to quickly and easily allow the user to select a specific person in their Contacts, and we’re able to use the phone number to ensure that the blocked user, in the event they are signed up on our platform, does not see that post on their feed.

Using these libraries built by the Expo team streamlined our ability to offer Native functionality for both IOS and Android, and saved us the time from having to build it ourselves. 

Advice for other developers

Now more than ever before, developers are overwhelmed with so many different options to choose from when creating software. My story echoes that same sentiment. When thinking through a problem, developers sometimes are fearful they will make the wrong decision, resulting in over-thinking, making decisions with unknown certainty, or even lead to having more desire in learning a new language or framework than trying to achieve the problem you originally set out to solve.

My advice is to always do what you’re most familiar with, and give everything a first pass best effort, doing what you already know how to do. Always remember that nothing is permanent, and you can always refine or rebuild if it’s warranted. React developers who want to make their own mobile application, don’t sweat it, you already know how to build a React Native mobile application. Utilize the libraries Expo has to offer, and be okay with accepting solutions that conceal details that may not be important for you to know. 

Save money with Expo

Outside of an Apple Developer account, and Google Play Developer license, there really doesn’t have to be any money spent on releasing and publishing your apps. Expo’s EAS Build and Submit’s free monthly limits are exceptionally fair given they also let you build your app locally for free. During your early development stage take advantage of the local builds so you can get a feel of the deployment process and submission process to the Apple store. 

By doing these steps yourself it will provide you with a better understanding of the service that EAS provides, these services include the luxury of not waiting for a build to complete on your machine, hosting a QR code for your development builds, and the ability to publish to both the Apple and Android Play store at the same time. Once you’ve familiarized yourself with local builds, you’ll be in a position to enjoy the features EAS has to offer.

What’s next for Teatime?

Teatime is targeting a launch date of August 22nd, which is hopefully around the date of this post. Kristen, my cofounder will be spreading the good word of our launch at the University of British Columbia, and all of our marketing efforts should be in full effect. We’re aiming to get a feel for what users want from the app, and are looking to move fast to be able to provide them with the best experience. This launch of the app is meant to be a stepping stone for what’s to come. It’s fair to say that the app can quite literally only get better from here.

For more info, and to keep up with Teatime, check us out at https://itsteatime.app

Thanks for reading!