Build a Real-Time Data Syncing Chat Application with Supabase and Next.js
Instructor
Kristian Freeman
Supabase is an open-source tool for rapidly building application backends with real-time data and authentication. In this course, you'll learn the fundamentals of Supabase. You'll learn how to model complex data using PostgreSQL and SQL, build authentication flows with Oauth, and add real-time data to a Next.js application to build a fully-featured chat application, similar to Discord.
The chat app will have different "channels," which will be powered by data inside of Supabase. Users can visit these channels and write messages, which will be sent in real-time to other current users of the platform.
After this course, you will be able to model real-world scenarios in actual relational databases, understand how to manage real-time data, and leverage key functionality provided by Supabase, such as authentication, instant APIs, and real-time subscriptions.
Whether you are just starting out with frontend engineering or you are a seasoned veteran, this course will provide a strong understanding of Supabase. This course uses @supabase/supabase-js": "^1.4.2".
Prerequisite
This course will help you gain exposure to a timeless technology: relational databases, via Supabase's PostgreSQL support.
To effectively use Supabase, you need to understand the basics of SQL or Structured Query Language, and how it can be used to work with relational databases. In this talk, we'll look at the basics of SQL — how to query for data, how to insert and remove data, and how structured databases are organized using tables, rows, and columns.
Credits
Maxime Bourgeois (illustration)What you'll learn
- Build real-time data-driven UI's
- Manage real-time subscription data
- Model high-level architecture concepts into API calls
- Model data with PostgreSQL and SQL
- Secure data with row level security
- Build authentication flows
- Create serverless workflows
Questions to Reflect Upon:
- When should you use a relational database?
- What level of control do you need to build successful solutions?
- What are the best security practices in authentication?
- How do you manage state when working with real-time subscription data?
Learner Reviews
- Danilo Mérida2 years agoWhat did you like about this course?
I loved the explanation, it was clear, and I had the opportunity to learn some tricks; I recommend it to those who want a quick course to understand the advantages of developing in next.js and supabase!
- Mathias Riis Sørensen2 years agoWhat did you like about this course?
I think this course was well crafted. I would have liked to see more of the .subscription() and when to unsubscribe. There is also a supabase-auth-helper like (https://github.com/supabase/auth-helpers/blob/main/packages/nextjs/README.md) package from Supabase, which could have been an alternative to how to handle auth, and it might not have been available when the course was published, just wanted to mention it. Other than that, I learn a lot about Supabase and will bring the knowledge to my own project, thank you a lot!
- Paul Whittemore2 years agoWhat did you like about this course?
The pace was ideal, the commentary was actually intelligent without being either dumbed down or overly technical for those with some experience as a web dev. The content was fantastic, and though not mentioned in the title, I was thrilled to see CloudFlare pages and workers used.
- Daniele Morosinotto3 years agoWhat did you like about this course?
Really GREAT course that explain either the supabase features and a clear real example of usage!
- João Forja3 years agoWhat did you like about this course?
It did a good job showing what Supabase can do.
I liked that there's an app I can show as a result of doing this course.
- hama3 years agoWhat did you like about this course?
Everything! Kristian Freeman is amazing teacher.
Course Content
You might also like these resources:
Introduction to Cloudflare Workers
Become familiar with the Workers CLI wrangler that we will use to bootstrap our Worker project. From there you'll understand how a Worker receives and returns requests/Responses. We will also build this serverless function locally for development and deploy it to a custom domain.
Create an eCommerce Store with Next.js and Stripe Checkout
This is a practical project based look at building a working e-commerce store using modern tools and APIs. Excellent for a weekend side-project for your developer project portfolio
Practical Git for Everyday Professional Use
git is a critical component in the modern web developers tool box. This course is a solid introduction and goes beyond the basics with some more advanced git commands you are sure to find useful.