ฝัง
- เผยแพร่เมื่อ 10 ธ.ค. 2023
- Github: github.com/coderyansolomon/wa...
Dive into the world of full stack development with our comprehensive video tutorial, where we guide you through creating an intuitive Watch List application using the cutting-edge Next.js 14 and Supabase. This tutorial is designed for both beginners and seasoned developers, offering a step-by-step approach to building a dynamic application. You'll learn how to implement user authentication, enabling users to securely sign in. We'll walk you through the intricacies of adding, updating, and deleting watch entries, ensuring a smooth and interactive user experience.
![เจ้าผู้เดียว - ดิด คิตตี้ [OFFICIAL MV]](http://i.ytimg.com/vi/q0NLCYKBOTo/mqdefault.jpg)
This is a great video. Only feedback I have is to have timestamps for the different sections of the video.
Great video! I have build this using this video + extended funtionality. Keep popping with great content ❤
Thank you!
Appreciate you Ryan! The way you walked watchers through the code was invaluable!!
Happy to hear it helped!
if you get an odysee account users will be able to tip you personally. Would like to see you posting on there if you have the time. Odysee is the future IMO.@@coderyan
Hey Ryan -- I have sincerely followed more than 5 tutorials in the past week on Next/Supabase just trying to understand simple CRUD but I kept failing (because of things being outdated and I'm just incredibly dense) -- This is the first time it almost directly clicked and the first time I was able to finish it. Thank you so much :)
(If you would, make this a series where you build a whole SaaS out, like a mini-Hodinkee 👀)
You're not dense... just took a few tutorials for it to click! the world is your oyster!
@@LibraryOfTheOligarchs Hehe, thank you :)
Came here to say the exact same thing. I am trying to get more familiar with Next and Supabase and this is perfect
Thank you so much for this content and not using any extra packages in this project. I am learning Supabase + Next.js and this will be very helpful for me
Keep up the quality ❤
upd. I am so happy I finally completed this tutorial and built this app. I will definately use methods described in this tutorials in my future projects 👍
You’re welcome!
Thank you very much, you are reading my mind on what I need to implement.
You’re welcome
Fantastic tutorial. Most concise and to the point I've found in months. Definitely following the channel. One question, being kind of new at this, in your server-actions, what's the best way to check the "success" message coming back from a server action, and to also clear the add watch input fields on the revalidate? thanks!!
Thanks for making this video! Always appreciated!
May I ask if you could include chapters, please? It makes it very easy to go back and forward to certain sections.
Thanks again!
Thank you so much!
You’re welcome!
Bro. Thanks for this video.
You’re welcome!
Thanks so much for the video. Running into a small issue, not sure if it's me. Trying to style the AuthUI LoginForm using your same parameters. VSCode is telling me that the 'appearance={{}}' option doesn't contain options for 'theme', 'input' or 'button'. Wondering if somethings changed? (TC: 28.25)
Amazing video
Thank you!
Hello. Thank you for the tutorial i really enjoyed! One question, is your server-actions folder considered Nextjs API? I am creating web based games that are going to be embedded on an Iframe on a nextjs project and deployed via vercel with a nextjs api that connects to supabase.
(If you get stuck at 09:30)
ERROR: 42601: syntax error at or near "{"
LINE 1: create table watches {
In the video you're using {} but according to Supabase AI you should be using () else it won't work :)
Thanks for catching this! At the time I created this (a few weeks ago), it may have still worked the way I did it, but great catch!
Thanks, that helped :)
Also for anyone still getting stuck even after replacing the curly braces with parentheses, try adding a semi colon at the end of the closing parentheses. I kept getting this error:
ERROR: 42601: syntax error at or near "alter"
LINE 14: alter table watches enable row level security;
and that was the culprit!
function auth.uuid() does not exist - what about this one?
I added create policy "Users can view their own watches." on watches
for select using (auth.uid() = current_setting('jwt.claims.user_id')::uuid);
'jwt.claims.user_id
at the moment,
but does it cause problems in the future of the tutorial?
@marciplan@@artsycoder533
here the full code with the comment I did by chatGPT 🙂
start here , copy paste pls
-- Create the watches table
create table watches (
id serial primary key,
user_id uuid references auth.users not null,
brand text,
model text,
reference_number text,
created_at timestamp with time zone default now(),
updated_at timestamp with time zone
);
-- Enable row level security for the watches table
alter table watches enable row level security;
-- Create your policies as you did before
create policy "users can view their own watches." on watches
for select using (auth.uid() = user_id);
create policy "users can add new watches." on watches
for insert with check (auth.uid() = user_id);
create policy "users can update their own watches." on watches
for update using (auth.uid() = user_id);
create policy "users can delete their own watches." on watches
for delete using (auth.uid() = user_id);
sorry, a have a question, in initial create watch-list page, you no set page how 'use client', but u can make work with form and button, that is necessary 'use client', u can explain this part? tanks, can see in 49 minutes
For the middleware.js setup around 22:13, I avoided abbreviating 'req' and 'res' and instead wrote the code using 'request' and 'response' for clarity. However, upon refreshing the page, it gave a TypeScript error.
I simply changed the variable names back to 'req' and 'res' like how Ryan had it, it was fixed. Anyone know why this might be?
Thanks you for the video.. i learnt a lot from it. I build my app. I had an issue when i deployed it to vercel.. when user clicks signup, a message to email is sent, when i click on confirm email... Instead of being redirected to login, I see a link starting with localhost:300/auth/signup?code....
The browser says ... Server not found.
Despite replacing localhost with my vercel link in my authForm
I don't i understand why am still seeing localhost:3000 while my project is deploy led to versel..
When am running the app on localhost its working proper .. but when i use the vercel link.. its not longer working..
Help
Could you please put all the Nextjs + Supabase tutorials in a fresh playlist ? Thanks awesome content.
hello, at 1:09:32, when I click on "Add Watch", it doesn't do anything. no watches are added. I've got the same code as you in app/watch-list/page.jsx but it just won't work. on the terminal, instead of having the added watch to show up, it just returns an empty array, and I can't find a way to fix this issue.
nevermind, I just didn't save some of the codes, my bad...
Thanks Ryan, this was helpful, despite me not following on everything. Lots of difficult syntax :) Would this way of implementing auth be suitable for a large, "actual" project? Thinking about using this workflow for my first public app. If not, would love to know what to add. Thanks!
Happy it helped! Yeah, I think using this tech stack is still very much so applicable for larger apps
How can I add a simple. image upload field?
thanks
You’re welcome
great video! however @12:31 you should keep the connection string secure here by remove the NEXT_PUBLIC and use server action.
Thanks! It's handled like this in future videos. I didn't use Server Actions here bc they were still in beta at the point of creating this video
Is there any short answer on how to do this? Looked through some new vids but can't seem to find it, and just removing next public doesn't compile. Cheers Ryan, can't wait for more tutorials like this!@@coderyan
can you make videos on nextjs for beginners, am a frontend dev student, who just discovered nextjs, as I have been using javascript/react
That's good thanks for sharing with us.
Can please explain the logic or some small project for user login though admine dashboard and other login for users how can we manage.
Please ❤❤❤
Thank you! And I’ll add that to my list of video ideas
Does anyone else have the problem that after deployment, localhost:3000 is still remaining even after redirecting Auth to the vercel link?
I’m not sure I completely understand the problem you’re having. What do you mean by localhost:3000 is still remaining?
@@coderyan I'm sorry I wasn't clear.
I firstly deployed the app, and tried login in from the vercel deployed app.
Checked my email, and the link in the email doesn't redirect me to:
vercel.myapp.whatever link//
but It redirects me to:
localhost:3000/
even tho I have changed this in the AuthForm.jsx file
I'm having this error too... I followed the final step and replaced localhost with the vercel webpage but it still redirects to localhost. Here is my error: localhost:3000/#access_token=....
Yes, I had this problem too, had to update supabase -> authentication -> url configuration -> site url to Vercel's domain.
How did you do this exactly?
@@aniyt10
arent you using the new auth package?
Which one?
I am having this error from the middleware.js " const supabase = createMiddlewareCLient({req, res});" the error is inthe parenthesis, please help😭😭
Is there a typo here in createMiddlewareClient? Looks like the L in Client is in caps
@@coderyan Omygod im too dumb to find that out thankyou🤦(New subscriber here 😊)