- 15
- 70 252
Codewalk Empire
Serbia
เข้าร่วมเมื่อ 17 พ.ย. 2023
Informative and educational videos and tutorials about web development and programming.
Build and Deploy Full Stack RSVP App - Next.js 15, Supabase and Resend
In this tutorial, we'll build an RSVP (Invitation) app using the latest Next 15 with React 19. We will use server actions to connect and talk with the SQL database in Supabase where all the RSVPs will be stored.
After form submission, we'll use Resend to send email notifications.
Besides this, we'll create an Admin panel page where all RSVPs will be available to authenticated admin.
👨🏻💻 Github Repository:
github.com/stefandjikic/rsvp-next-template
🔗 Resources Mentioned:
- th-cam.com/video/yAqgjSZ0PqY/w-d-xo.html
- ui.shadcn.com/docs/installation/next
- developers.google.com/maps/documentation/urls/get-started#forming-the-url
- supabase.com/docs/guides/auth/server-side/nextjs
🎥 More Project Based Videos:
- th-cam.com/video/yAqgjSZ0PqY/w-d-xo.html
- th-cam.com/video/eh8mpiN-7bA/w-d-xo.html
- th-cam.com/video/pfTcs3rEePU/w-d-xo.html
🕐 TIMESTAMPS:
0:00 - Intro and Demo
2:45 - Create Next App
4:15 - Add Shadcn UI
8:00 - Coding the app (UI)
32:05 - Supabase: Create DB
36:56 - Supabase: Install & Connect with Next App
39:25 - Coding the app (Submit RSVPs)
52:22 - Supabase: Row Level Security Policies
56:43 - Coding the app (Get RSVPs)
1:10:36 - Auth and Owner Access
1:29:10 - Middleware
1:34:22 - Signout
1:37:10 - Resend
1:47:25 - Supabase: Unique Email Fix
1:50:00 - Deploy and Outro
🔔 Subscribe for more free tutorials and programming videos
www.youtube.com/@codewalkempire?sub_confirmation=1
@Supabase @next @VercelHQ
After form submission, we'll use Resend to send email notifications.
Besides this, we'll create an Admin panel page where all RSVPs will be available to authenticated admin.
👨🏻💻 Github Repository:
github.com/stefandjikic/rsvp-next-template
🔗 Resources Mentioned:
- th-cam.com/video/yAqgjSZ0PqY/w-d-xo.html
- ui.shadcn.com/docs/installation/next
- developers.google.com/maps/documentation/urls/get-started#forming-the-url
- supabase.com/docs/guides/auth/server-side/nextjs
🎥 More Project Based Videos:
- th-cam.com/video/yAqgjSZ0PqY/w-d-xo.html
- th-cam.com/video/eh8mpiN-7bA/w-d-xo.html
- th-cam.com/video/pfTcs3rEePU/w-d-xo.html
🕐 TIMESTAMPS:
0:00 - Intro and Demo
2:45 - Create Next App
4:15 - Add Shadcn UI
8:00 - Coding the app (UI)
32:05 - Supabase: Create DB
36:56 - Supabase: Install & Connect with Next App
39:25 - Coding the app (Submit RSVPs)
52:22 - Supabase: Row Level Security Policies
56:43 - Coding the app (Get RSVPs)
1:10:36 - Auth and Owner Access
1:29:10 - Middleware
1:34:22 - Signout
1:37:10 - Resend
1:47:25 - Supabase: Unique Email Fix
1:50:00 - Deploy and Outro
🔔 Subscribe for more free tutorials and programming videos
www.youtube.com/@codewalkempire?sub_confirmation=1
@Supabase @next @VercelHQ
มุมมอง: 2 358
วีดีโอ
Beginner JavaScript Project | Build & Deploy Anime Scene Finder App
มุมมอง 1213 หลายเดือนก่อน
In this tutorial, we'll build and deploy a cool beginner-friendly JavaScript project. We'll utilize trace.moe (Anime scene search engine) API to get specific scenes and info from Anime, based on an image URL. 🔗 Resources Mentioned: soruly.github.io/trace.moe-api 🕐 TIMESTAMPS: 0:00 - Intro and Overview 01:23 - Coding 28:35 - Deploy #javascript #js #javascripttutorial #netlify
Don't overuse useState! Search Params in Next.js - Server vs Client
มุมมอง 2155 หลายเดือนก่อน
In this tutorial, we'll explore an alternative way to manage state in React and Next.js applications, moving beyond the traditional useState approach. First, we'll demonstrate the common client-side method for handling filters, then switch to server-side rendering to show its benefits. 🔔 Subscribe for more tech and programming videos www.youtube.com/@codewalkempire?sub_confirmation=1 🎥 Check my...
Build and Deploy Video Call App in Minutes - Next 14 and ZEGOCLOUD
มุมมอง 5898 หลายเดือนก่อน
· Get 10000 free mins with ZEGOCLOUD UIKits: bit.ly/4bhlG2U · Take Advantage of ZEGOCLOUD: bit.ly/3WpbReZ · 100% customized video call SDK: bit.ly/4b1YsxH · How to build a video call App: bit.ly/4aa4PxP ZEGOCLOUD video call SDK & API allows you to easily build your live video chat apps within minutes. 🔗 Resources Mentioned: - docs.zegocloud.com/article/14935 - docs.zegocloud.com/article/14741 -...
Add Comments to Next 14 & Sanity Blog
มุมมอง 1.3K8 หลายเดือนก่อน
This video dives into adding a robust commenting system using Sanity. io & Next 14. 🎥 Build a Blog Video: th-cam.com/video/yAqgjSZ0PqY/w-d-xo.html 👨🏻💻 Github Repository: github.com/stefandjikic/next-cms-blog 🔔 Subscribe for more free tutorials and programming videos www.youtube.com/@codewalkempire?sub_confirmation=1 🕐 TIMESTAMPS: 0:00 - Showcase 1:45 - Post Schema 05:10 - Add Comment Form 17:0...
Next.js 14 - SEO & Metadata Tutorial (Complete Guide)
มุมมอง 17K9 หลายเดือนก่อน
This comprehensive guide will show you everything you need to know about SEO and Metadata optimization in Next.js and the app router. For this tutorial, I've used a Blog built with Sanity CMS. 🔗 Resources Mentioned: - nextjs.org/docs - github.com/sanity-io/next-sanity/tree/main#cache-revalidation 👨🏻💻 Github Repository: github.com/stefandjikic/next-cms-blog 🎥 Build a Blog Video: th-cam.com/vide...
Add Table of Contents to Next.js and Sanity Blog
มุมมอง 1.4K10 หลายเดือนก่อน
In this tutorial, we'll build a dynamic Table of Contents for a blog powered by Sanity CMS using Next.js 14, Typescript, and Tailwindcss. You will learn how to query Sanity CMS to get all headings from a blog post, add dynamic IDs to all of the headers, and create a TOC based on them. 👨🏻💻 Github Repository: github.com/stefandjikic/next-cms-blog 🎥 Build a Blog Video: th-cam.com/video/yAqgjSZ0Pq...
Build and Deploy Movie App - React 18, Chakra UI, Firebase Auth and Database
มุมมอง 14K11 หลายเดือนก่อน
In this tutorial, we'll build and deploy a Movie App using React 18, Chakra UI, Firebase Authentication & Database, and TMDB API for getting movie data. 👨🏻💻 Github Repository: github.com/stefandjikic/movie-app-yt 🔧 What You'll Learn: • Setting up a React 18 project with the latest features and improvements. • Designing a modern and responsive user interface with ChakraUI. • Connecting to an ex...
Build and Deploy BLOG with Tags - Next.js 14, Sanity CMS and Tailwind
มุมมอง 32Kปีที่แล้ว
In this tutorial, we'll build and deploy a blog with tags as special features, using Next.js 14, Typescript, Tailwindcss, and Sanity CMS. 👨🏻💻 Github Repository: / github.com/stefandjikic/next-cms-blog 🛠️ Step-by-Step Tutorial: - Project setup and initialization. - Building dynamic pages with Next.js. - Embedding Sanity CMS into Next.js application for content management. - Styling blog using T...
Build a Form and Send Email with HTML Only
มุมมอง 269ปีที่แล้ว
Learn How To Build Working Contact Form With HTML | Receive Contact Form Data On Email Using HTML and CSS Subscribe: / @codewalkempire In this tutorial, I'm going to show you How to Create a Contact Form in HTML and Send Emails using only HTML, without JavaScript or any Backend language. In this process, we will be using the Formsubmit service to connect our Form data with our email. Timestamps...
Thanks! was great! But how can we add alt-text for opnegraph image. Nextjs posts we can create txt-file with name opengraph-image.alt.txt and put it in the same directory as image. But in Nextjs 15 it doesn`t work. Mabe somebody resolved it?
congrats for the marriage, bro 🎉
Thank you! 🥳
great tutorial. nextj15 it worked
thank you very much i spend 10 hours and search how sanity project deploy but your video only 20 sec tell me answer
crazy good man!!
Thank you, glad you liked it!
Thanks
Great work bro Waiting for more interesting projects❤
Thank you! More to come in the New Year!
Kindly provide the acess of your github repository, as mention but didn't find
It's public now. Thanks!
thanks. bigger font size will be better.
Happy married life 😋 also github repo isn't Available
Thank you! It's so good that I forgot to set the repo to public as you can see :P Now it's fixed! Thanks!
@@codewalkempire I made it but dunno why my rsvp is not getting submitted it says failed to submit
@@Ak-uu9qt Check out error logs in terminal and make sure that row level security policies are set accordingly in Supabase
Great work man! Keep it up!! 🎉
Thank you 🙌
why it took ages for me to find this worth of content!!🤌
thank you 😊
thank you sir, it's amazing!!!
Will the sitemap update automatically when a new post is added?
Yes, it will. getPosts function in the sitemap will pick any new post that is created
Damn this was unexpectedly great tutorial
Nice video! 🔥 A little addition for those who want to make these metadata and sitemaps multilingual. I’ve created a solution for that: Intlayer I’d be happy to get your feedback!
I keep getting same error & I don't know how to solve it. It is called Console Error. "Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used" "- className="dark" - style={{color-scheme:"dark"}}. Could you help? Btw, so far it is an amazing lecture.
Thank you! That's a common error when developing with next.js. It can be caused by incorrect JSX wrapping patterns or when you try using server-side logic in client component. What version of Next are you using? Also, on which page are you facing this issue?
can i apply this method and positioned in top pages of google ?
i have been doing everything lately , cant get above the 4th page on google.
This is a solid starting point for sure. Ranking at the top also depends on other factors like content relevance, backlinks, and click-through rate but sometimes it just takes some time. A lot of sites I've built took a couple of days or weeks to position at the top of search results.
Поздрав Стефане, пролазим мало кроз Sanity, само сам пролетео клип пошто још нисам сигуран да ли желим да користим Sanity. Реци ми молим те да ли је могуће сакрити студио руту иза неке ауторизације? Нпр. направим неки прост пројекат, деплојујем преко Верцела и желим да приступ студију има само одређени корисник са одређеним креденцијалима. Да ли је то могуће?
Zdravo, Nikola! Upravo tako i funkcioniše. Prilikom inicijalizacije Sanity projekta se autorizuješ sa svojim nalogom. Samo taj nalog inicijalno i može pristupiti toj ruti. Naknadno možeš u studiu dodati i druge role. Tako da, kad odradiš deployment, ruta /studio će ti otvotiti formu za login preko koje ćeš moći da odradiš auth isključivo sa kredencijalima koje si koristio za inicijalizaciju sanity projekta. Ako ne želiš da studio “živi” u Next.js aplikaciji, možeš ga inicijalizovati van Next.js aplikacije i odraditi deploy zasebno. (Mislim da je sanity deploy komanda u terminalu, proveri docs). U tom slučaju ćeš imati potpuno drugi domen za studio. Pozdrav!
@@codewalkempire Екстра, хвала ти!
I was looking for a video like this. It helped me a lot in my work. All the best, my friend. Greetings from Portugal!
Thank you! Sending my regards to Portugal!
Nice work!
Great work, Stefan! Keep making more content like this!
Thanks, will do!
Amazing! Thank you!
thank you
Your guidance helped me successfully integrate the blog feature into my portfolio. Thanks, man!
This tutorial was brilliant, managed to make my own blog though I never used Sanity before!
Amazing Man !. A lot Thanks
good info but voice is kinda hurting
Hi small question, when i try to view the link to the app on vercel it doesnt show up like all the data does now show up for me? Anyone else facing this issue?
I've created a blog using Next.js with Sanity as the CMS. My aim is to develop a fully Japanese-language website, incorporating Japanese characters in the URL slugs to reflect the predominantly Japanese article titles. For instance, I'd like to implement URLs such as '/posts/こんにちは'. However, I'm encountering difficulties implementing this feature. While I've successfully implemented language switching using next-intl, I haven't found a solution for dynamically generating Japanese language slugs that work correctly in URLs. I would greatly appreciate any guidance or suggestions.
Hey! Nice work! So you want to have multilingual webiste, right? Basically, Next.js should be able to handle Unicode characters, including Japanese, in URL paths by default. However, some browsers might encode non-ASCII characters. For example, you could use a slugging function that works with Unicode characters. - You can try the `slugify` npm package, it supports Unicode slugs. - Then you can use it like this for example: function generateSlug(title) { return slugify(title, { lower: true, strict: true, locale: 'ja' }); } This will generate slugs that allow Japanese characters while keeping other parts of the slug URL-safe. - You can also use `slugify` in sanity schema: slugify: (input) => slugify(input, { lower: true, strict: true, locale: 'ja' }) - Also, make sure to update your `next.config.js` with locales: i18n: { locales: ['en', 'ja'], defaultLocale: 'ja', } I pan to update my blog tutorial with a multi-lang switch in the future, but in the meantime, I hope this helps!
Your teaching approach, combined with the comprehensive documentation, is brilliant. This method effectively guides junior developers in initiating their coding journey through independent research, rather than relying solely on TH-cam tutorials.
Exactly, that’s the point. Thank you very much!
can you use ionic/angular instead of react
great video, thanks
Very useful video course, ty man!!!!!!!!!!!!!!!!!!!
i got tears while watching this
Legendo!!! 🎉
Hvala Dragane!🤘
Very useful
Waiting for your next js project with CMS🎉🎉
Thanks for watching the full video! I’ll record it soon! :)
thanks a lot for this awesome tutorial !
I like it. God job, dude! Keep shooting, it's awesome!
Thank you! Appreciate it!
👍
This is great, thank you!
Really liked the stuff. Keep up the good work!
First comment then watch! Great content. I think the filters are really useful.
Thank you!
Try to magnify your vscode next time, its too small to see
please make more projects like this that are under 60 minutes.
Thank you
everyone show basic seo so please show us some advance also
If you getting "403" error while submiting the comment then add "token: process.env.NEXT_PUBLIC_SANITY_TOKEN," in "@/sanity/lib/client", I hope it will help!