💾 SvelteKit + Supabase CRUD with RLS: Row-Level Security! 🔴 LIVE Coding & Chill 💌
Let’s do some CRUD operations with SvelteKit + Supabase! CRUD stands for Create / Read / Update / Delete, which are the fundamental operations your app or services will be performing to your database. We’ve done a bit of this ages ago, when both SvelteKit & Supabase were much younger, let’s see how we do this time 😄
This is going to be in service of our Techy Cat app and the Memory Game we’ve created within it: We’re gonna build a leaderboard to show the highest scores of the day 🙂
Suggest features, as we’re doing it live 🙌
Like anything I show in this channel, this is REAL and you can click around yourself 👾 https://techy.cat/games/memory
— AGENDA —
✅ What’s CRUD again? What’s this GAME?
✅ Scaffold leaderboard page with mock data
✅ Let’s create a new Database table in Supabase!
✅ READ from our new table!
✅ Longer auth + Supabase overview
✅ INSERT to our new table using Row-Level Security!
✅ UPDATE to our new table using Row-Level Security!
❌ BONUS: Daily vs Practice mode toggle
✅ What’s next?
We'll be adding / demo-ing stuff in this app, so click around yourself: https://techy.cat
See the code: https://github.com/jmagrippis/techy-cat
— COMMUNITY —
I've just started a DISCORD SERVER for us 😱: / discord
— 🥳🥳🥳 —
No affiliations whatsoever: if I show something, you know you're hearing my unfiltered thoughts 😄
My own website: https://magrippis.com/
Search for `@jmagrippis` to find me on socials like Discord, Instagram & Twitter!
Between the comment section and the socials, let me know *somewhere* what you’d like me to cover next 🙌
--
TIMESTAMPS
--
0:00 - Hello & Welcome 👋 Agenda for today
12:00 - Scaffold Leaderboard page with mock data
16:55 - Repos in the `locals` overview / creating an InMemoryRepo
34:00 - Using our InMemoryRepo to `load` data to our UI!
36:44 - 🥳 UI works with our mock data 🥳
42:04 - Creating a `high_scores` table in our Supabase Postgres, to store real data!
51:20 - Coffee break + next steps overview + YOUTUBE PARTNER news!
55:50 - Implementing our "real" HighScoreRepo, to READ the dynamic data from our Supabase Postgres
58:16 - 🥳 Switching from our InMemory mock data repo, to our Supabase one! 🥳
1:00:30 - `rpc` overview and attempt to fetch the player display name
1:03:10 - ... let's just do a regular join with the Supabase JS client's magic
1:08:50 - Player data is fetched correctly, map better & update UI to match!
1:10:28 - 🥳 UI displays a dynamic high score and player name! 🥳
1:10:55 - Adding more data and sorting according to score
1:13:10 - Enabling RLS and allowing everyone to SELECT from our new table
1:14:48 - Auth Overview: How we Supabase to do auth with magic links
1:28:13 - Coffee break
1:30:38 - Up next: "Real" INSERTS for logged-in users playing the game!
1:31:05 - Adding RLS policy for inserts into our `high_scores` table
1:33:38 - Extend HighScore repo to allow for submitting high scores
1:42:30 - Use our new `submitHighScore` method somewhere!
1:46:35 - 🥳 Solving the board results in the correct INSERT! 🥳
1:48:44 - 🔔 Delivery break
1:52:48 - We're back! Fix `seed` values for the data we manually entered, deliberate GROUP BY `seed`
1:55:29 - RLS for updating our own high scores!
1:57:00 - Go over the current situation: We're always inserting a new high score row
1:59:19 - Business logic to check if there's a high score already, and update that if so!
2:07:25 - Magic `reduce` to group our high scores by `seed`
2:14:00 - 🥳 Let's beat our high score and prove our UPDATEs work! 🥳
2:16:45 - Final break & possible next steps?
2:19:20 - Let's add a route to our Leaderboard, and back to the game!
2:27:55 - Highlighting `data-sveltekit-prefetch`
2:29:50 - Final chats / words & reach out via comments or the DISCORD server!
Watch video 💾 SvelteKit + Supabase CRUD with RLS: Row-Level Security! 🔴 LIVE Coding & Chill 💌 online without registration, duration hours minute second in high quality. This video was added by user Johnny Magrippis 01 January 1970, don't forget to share it with your friends and acquaintances, it has been viewed on our site 1,332 once and liked it 32 people.