💾 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!
Смотрите видео 💾 SvelteKit + Supabase CRUD with RLS: Row-Level Security! 🔴 LIVE Coding & Chill 💌 онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Johnny Magrippis 01 Январь 1970, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 1,332 раз и оно понравилось 32 людям.