This post is part of a series explaining how I built GroupUp, an app that helps organize events, trips, gatherings, and more. Check out my first blog post to see the motivation behind this series here.

Table of Contents

├─ ❓ What is Supabase?
├─ 📃 Why Supabase?
├     ├─ 🔶 Documentation
├     ├─ 🔶 Authentication
├     ├─ 🔶 Authorization via Row-Level Security
├     ├─ 🔶 Realtime Updates
├     ├─ 🔶 Storage
├     ├─ 🔶 Edge Functions
├     ├─ 🔶 Pricing
├     ├─ 🔶 Other
├─ 💬 Conclusion
└─ ⏭️ What's Next

This entire post will be dedicated to Supabase, the backend behind GroupUp.

❓ What is Supabase?

The Supabase website describes it perfectly: “An open-source Firebase alternative. Start your project with a Postgres database, Authentication, instant APIs, Edge Functions, Realtime subscriptions, Storage, and Vector embeddings.”

Supabase offers a Postgres database, user authentication, serverless functions, real-time functionality, storage, and even AI capabilities (vector embeddings) – all with the freedom of open source.

📃 Why Supabase?

When I started building GroupUp, Firebase was my first pick. It was familiar, easy to set up, backed by Google, and widely used. But then came vendor lock-in. With Supabase, you can host your own instance, escaping the clutches of any cloud provider.

Another key factor was the database. Firebase uses Firestore, a NoSQL database, while Supabase utilizes the powerful and popular open-source SQL database, Postgres.

Supabase might have been the “new kid on the block” back then, but I saw its potential. While some features were missing (or in alpha) during my initial use, like real-time, edge functions, and AI, it provided what I needed: seamless authentication, a database for data storage, storage for images, and an automatic API for data fetching.

Migrating from Firebase in the early stages was easy. Just a few code changes and table creations, and I was good to go.

🔶 Documentation

Great documentation is a must-have, and Supabase delivers. It's easy to find what you need, and some resources even come with video tutorials. You can find the Supabase docs here.

🔶 Authentication

Most apps require authentication, and GroupUp is no exception. Supabase's authentication is straight forward. I opted for email/password (captcha protection is available if you need it) and Google Sign In.

Setting up email/password logic on Supabase was smooth, but the frontend took more time to solidify. Implementing signup, login, forgot password, password change, and email change took a significant chunk of time. Looking back, I might have over-engineered it. Remember, it's okay to start simple and improve later based on actual usage.

Today, provider-based logins like Google Sign In are incredibly popular and easy to set up with Supabase. Their docs are fantastic, and they support a wide range of providers. Authentication docs here.

🔶 Authorization via Row-Level Security

Keeping user data safe requires control over read, write, update, and delete operations. Supabase leverages Postgres's Row Level Security (RLS) for authorization. You can write simple or complex SQL rules to manage user access to data. Read more here.

🔶 Realtime Updates

Initially, I relied solely on API requests to fetch groups, events, users, votes, car availability, and so on. This led to frequent requests on every route change and potentially stale data. Supabase's real-time capabilities came to the rescue. While it added some frontend complexity, it provided a much better user experience with instant feedback. Realtime docs here.

🔶 Storage

Since users can add profile images for groups and themselves, I needed storage. Supabase provides this with built-in RLS for user access control. It even offers image optimization and transformation on the fly to save storage space, but this is a Pro plan feature.

For the free plan, you can build your own logic or use external packages to resize images on the client-side or with an edge function. Storage docs here.

🔶 Edge Functions

Edge functions are essential for operations like fetching weather data for an event or sending push notifications to users. You can access the database from the function using the permissions of the invoking user, or bypass all permissions with service_role key.

To invoke the functions, you can directly call them from the client-side, or they can be triggered by database events like insert, update, or delete. Edge functions docs here.

🔶 Pricing

You get 2 free projects with generous limits, perfect for getting started. Free projects are paused after 1 week of inactivity, but this shouldn't be an issue for development or even low-traffic production use. Pricing details here.

🔶 Other

Supabase offers a rich developer experience: SQL editor, logs, reports, data viewer, database view, and a tables editor (with user impersonation). These features are invaluable for development, debugging, and performance analysis.

Another cool feature is the ability to use PostgreSQL extensions like pg_jsonschema for validating JSON data in table columns, or uuid-ossp for generating unique identifiers.

💬 Conclusion

I'm happy with my choice. Supabase is now my go-to backend solution. It has saved me significant time with features like Authentication, Realtime, and Edge Functions, allowing me to focus on core app functionality.

⏭️ What's Next

In the next blog, I'll be diving into the folder structure of my React client app. Stay tuned!

⭐ As always, if you enjoyed this content, feel free to follow me on Twitter and LinkedIn for more updates, insights, and discussions!