- 274
- 2 098 348
Chaoo Charles
Kenya
Registrace 5. 07. 2019
I code
React 19 - 10 must know new features and updates
Create a CRUD app with Server Actions: czcams.com/video/dDLX4XDaz7A/video.html
Sections:
00:00 - Intro
00:25 - Form Actions
01:10 - useTransition
03:09 - useActionState
04:17 - useFormStatus
05:13 - useOptimistic
06:08 - use API
07:59 - Server Components and Server Actions
09:03 - ref as a prop
09:33 - Support for Document Metadata
10:23 - New React Compiler
✨ Follow Me on Twitter: ChaooCharles
✨ Join My Discord Server
discord.gg/WGqJ2CZebb
🤑 Donate To My PayPal: www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=NZCBMP9V54G9J&source=url
SUPPORT MY CHANNEL
📍SUBSCRIBE: czcams.com/channels/e8uN9zoKksCb1hfw61myRw.html
📍Become a Channel Member:czcams.com/channels/e8uN9zoKksCb1hfw61myRw.htmljoin
📍Join My Fun Channel: czcams.com/channels/y4bfau19vYgrPBhCCI2Zbg.html
GET IN TOUCH:
📍 Twitter: ChaooCharles
Disclaimer: This video is not sponsored
Sections:
00:00 - Intro
00:25 - Form Actions
01:10 - useTransition
03:09 - useActionState
04:17 - useFormStatus
05:13 - useOptimistic
06:08 - use API
07:59 - Server Components and Server Actions
09:03 - ref as a prop
09:33 - Support for Document Metadata
10:23 - New React Compiler
✨ Follow Me on Twitter: ChaooCharles
✨ Join My Discord Server
discord.gg/WGqJ2CZebb
🤑 Donate To My PayPal: www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=NZCBMP9V54G9J&source=url
SUPPORT MY CHANNEL
📍SUBSCRIBE: czcams.com/channels/e8uN9zoKksCb1hfw61myRw.html
📍Become a Channel Member:czcams.com/channels/e8uN9zoKksCb1hfw61myRw.htmljoin
📍Join My Fun Channel: czcams.com/channels/y4bfau19vYgrPBhCCI2Zbg.html
GET IN TOUCH:
📍 Twitter: ChaooCharles
Disclaimer: This video is not sponsored
zhlédnutí: 319
Video
Fullstack CRUD in Next.js Server Actions, React.js, Typescript, TailwindCSS and PostgresSQL on Neon
zhlédnutí 990Před 14 dny
Create your PostgresSQL database on Neon: neon.tech Source code: www.patreon.com/posts/fullstack-crud-106783470?Link& Sections: 00:00 - Intro 03:27 - Create a next.js app 08:35 - Pages and layout 16:01 - Container Component 20:37 - Reusable Input Field 45:53 - Reusable Button 01:04:57 - Postgresdb on Neon 01:15:54 - POST Server Action 01:33:08 - Server Actions Docs 01:36:20 - GET Server Action ...
E-commerce product page in HTML, CSS and JavaScript - Frontend Mentor Challenge
zhlédnutí 1,3KPřed 2 měsíci
Frontend mentor design link: www.frontendmentor.io/challenges/ecommerce-product-page-UPsZ9MJp6 Free Source Codes: github.com/chaoocharles/ecommerce-product-page-html-css-javascript Sections: 00:00 - Navbar 41:09 - Side Nav 56:36 - Image Gallery 01:15:41 - Image Slide Show 01:38:56 - Product Details and Cart Style 02:09:19 - Cart Logic 02:46:00 - Mobile Responsive ✨ Follow Me on Twitter: twitter...
🎉 Hotel Booking Web App Set-Up - How to run the source code successfully!
zhlédnutí 1,5KPřed 4 měsíci
FullStack Hotel Booking Web App in Next.js 14, React, Typescript, Shadcn, Clerk, My SQL (planetscale), Zustand, Stripe ✨ Source Codes: www.patreon.com/posts/next14-fullstack-96078849?Link& ✨ Playlist: czcams.com/play/PL63c_Ws9ecIR6_mdnPvcvytf5oDccT8Mj.html&si=B-tw4xxBOf8Q80OI ✨ Follow Me on Twitter: ChaooCharles ✨ Join My Discord Server discord.gg/WGqJ2CZebb 🤑 Donate To My PayPal: w...
Planetscale removed their hobby plan
zhlédnutí 2,2KPřed 5 měsíci
Next14 FullStack Hotel Booking Web App Course: czcams.com/video/5VHANL_wIL4/video.htmlsi=GNIx8yPiG22FOczg ✨ Follow Me on Twitter: ChaooCharles ✨ Join My Discord Server discord.gg/WGqJ2CZebb 🤑 Donate To My PayPal: www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=NZCBMP9V54G9J&source=url SUPPORT MY CHANNEL 📍SUBSCRIBE: czcams.com/channels/e8uN9zoKksCb1hfw61myRw.html 📍Become...
Build and Deploy a Fullstack Hotel Booking Web App: Next.js 14, React.js, TS, TailwindCSS, Prisma
zhlédnutí 34KPřed 5 měsíci
Creating a FullStack Hotel Booking Web App in Next.js 14, React, Typescript, Shadcn, Clerk, My SQL (planetscale), Zustand, Stripe ✨ Source Codes: www.patreon.com/posts/next14-fullstack-96078849?Link& ✨ Playlist: czcams.com/play/PL63c_Ws9ecIR6_mdnPvcvytf5oDccT8Mj.html&si=B-tw4xxBOf8Q80OI ✨ Follow Me on Twitter: ChaooCharles ✨ Join My Discord Server discord.gg/WGqJ2CZebb 🤑 Buy Me A Co...
Deploy to Vercel Tutorial - 26 | Next14 FullStack Hotel Booking App
zhlédnutí 342Před 5 měsíci
Creating a FullStack Hotel Booking Web App in Next.js 14, React, Typescript, Shadcn, Clerk, My SQL (planetscale), Zustand, Stripe ✨ Source Codes: www.patreon.com/posts/next14-fullstack-96078849?Link& ✨ Playlist: czcams.com/play/PL63c_Ws9ecIR6_mdnPvcvytf5oDccT8Mj.html&si=B-tw4xxBOf8Q80OI ✨ Follow Me on Twitter: ChaooCharles ✨ Join My Discord Server discord.gg/WGqJ2CZebb 🤑 Buy Me A Co...
Location Filter Tutorial - 25 | Next14 FullStack Hotel Booking App
zhlédnutí 221Před 5 měsíci
Creating a FullStack Hotel Booking Web App in Next.js 14, React, Typescript, Shadcn, Clerk, My SQL (planetscale), Zustand, Stripe ✨ Source Codes: www.patreon.com/posts/next14-fullstack-96078849?Link& ✨ Playlist: czcams.com/play/PL63c_Ws9ecIR6_mdnPvcvytf5oDccT8Mj.html&si=B-tw4xxBOf8Q80OI ✨ Follow Me on Twitter: ChaooCharles ✨ Join My Discord Server discord.gg/WGqJ2CZebb 🤑 Buy Me A Co...
Search Logic Tutorial - 24 | Next14 FullStack Hotel Booking App
zhlédnutí 189Před 5 měsíci
Creating a FullStack Hotel Booking Web App in Next.js 14, React, Typescript, Shadcn, Clerk, My SQL (planetscale), Zustand, Stripe ✨ Source Codes: www.patreon.com/posts/next14-fullstack-96078849?Link& ✨ Playlist: czcams.com/play/PL63c_Ws9ecIR6_mdnPvcvytf5oDccT8Mj.html&si=B-tw4xxBOf8Q80OI ✨ Follow Me on Twitter: ChaooCharles ✨ Join My Discord Server discord.gg/WGqJ2CZebb 🤑 Buy Me A Co...
List my-hotels and my-bookings - 23 | Next14 FullStack Hotel Booking App
zhlédnutí 173Před 5 měsíci
Creating a FullStack Hotel Booking Web App in Next.js 14, React, Typescript, Shadcn, Clerk, My SQL (planetscale), Zustand, Stripe ✨ Source Codes: www.patreon.com/posts/next14-fullstack-96078849?Link& ✨ Playlist: czcams.com/play/PL63c_Ws9ecIR6_mdnPvcvytf5oDccT8Mj.html&si=B-tw4xxBOf8Q80OI ✨ Follow Me on Twitter: ChaooCharles ✨ Join My Discord Server discord.gg/WGqJ2CZebb 🤑 Buy Me A Co...
Check for Date Overlaps - 22 | Next14 FullStack Hotel Booking App
zhlédnutí 197Před 5 měsíci
Creating a FullStack Hotel Booking Web App in Next.js 14, React, Typescript, Shadcn, Clerk, My SQL (planetscale), Zustand, Stripe ✨ Source Codes: www.patreon.com/posts/next14-fullstack-96078849?Link& ✨ Playlist: czcams.com/play/PL63c_Ws9ecIR6_mdnPvcvytf5oDccT8Mj.html&si=B-tw4xxBOf8Q80OI ✨ Follow Me on Twitter: ChaooCharles ✨ Join My Discord Server discord.gg/WGqJ2CZebb 🤑 Buy Me A Co...
Process Payment With Stripe Form Elements - 21 | Next14 FullStack Hotel Booking App
zhlédnutí 346Před 5 měsíci
Creating a FullStack Hotel Booking Web App in Next.js 14, React, Typescript, Shadcn, Clerk, My SQL (planetscale), Zustand, Stripe ✨ Source Codes: www.patreon.com/posts/next14-fullstack-96078849?Link& ✨ Playlist: czcams.com/play/PL63c_Ws9ecIR6_mdnPvcvytf5oDccT8Mj.html&si=B-tw4xxBOf8Q80OI ✨ Follow Me on Twitter: ChaooCharles ✨ Join My Discord Server discord.gg/WGqJ2CZebb 🤑 Buy Me A Co...
Update Booking and Disable Booked Dates - 20 | Next14 FullStack Hotel Booking App
zhlédnutí 259Před 5 měsíci
Creating a FullStack Hotel Booking Web App in Next.js 14, React, Typescript, Shadcn, Clerk, My SQL (planetscale), Zustand, Stripe ✨ Source Codes: www.patreon.com/posts/next14-fullstack-96078849?Link& ✨ Playlist: czcams.com/play/PL63c_Ws9ecIR6_mdnPvcvytf5oDccT8Mj.html&si=B-tw4xxBOf8Q80OI ✨ Follow Me on Twitter: ChaooCharles ✨ Join My Discord Server discord.gg/WGqJ2CZebb 🤑 Buy Me A Co...
Create Booking and Stripe Payment Intent Tutorial - 19 | Next14 FullStack Hotel Booking App
zhlédnutí 603Před 5 měsíci
Creating a FullStack Hotel Booking Web App in Next.js 14, React, Typescript, Shadcn, Clerk, My SQL (planetscale), Zustand, Stripe ✨ Source Codes: www.patreon.com/posts/next14-fullstack-96078849?Link& ✨ Playlist: czcams.com/play/PL63c_Ws9ecIR6_mdnPvcvytf5oDccT8Mj.html&si=B-tw4xxBOf8Q80OI ✨ Follow Me on Twitter: ChaooCharles ✨ Join My Discord Server discord.gg/WGqJ2CZebb 🤑 Buy Me A Co...
Shad/cn Date Range Picker Tutorial - 18 | Next14 FullStack Hotel Booking App
zhlédnutí 1,8KPřed 5 měsíci
Creating a FullStack Hotel Booking Web App in Next.js 14, React, Typescript, Shadcn, Clerk, My SQL (planetscale), Zustand, Stripe ✨ Source Codes: www.patreon.com/posts/next14-fullstack-96078849?Link& ✨ Playlist: czcams.com/play/PL63c_Ws9ecIR6_mdnPvcvytf5oDccT8Mj.html&si=B-tw4xxBOf8Q80OI ✨ Follow Me on Twitter: ChaooCharles ✨ Join My Discord Server discord.gg/WGqJ2CZebb 🤑 Buy Me A Co...
Zustand Global State Tutorial - 17 | Next14 FullStack Hotel Booking App
zhlédnutí 626Před 5 měsíci
Zustand Global State Tutorial - 17 | Next14 FullStack Hotel Booking App
Hotel Details Tutorial - 16 | Next14 FullStack Hotel Booking App
zhlédnutí 195Před 5 měsíci
Hotel Details Tutorial - 16 | Next14 FullStack Hotel Booking App
Hotel List Tutorial - 15 | Next14 FullStack Hotel Booking App
zhlédnutí 159Před 5 měsíci
Hotel List Tutorial - 15 | Next14 FullStack Hotel Booking App
Room Card Tutorial - 14 | Next14 FullStack Hotel Booking App
zhlédnutí 255Před 5 měsíci
Room Card Tutorial - 14 | Next14 FullStack Hotel Booking App
Create Room Tutorial - 13 | Next14 FullStack Hotel Booking App
zhlédnutí 271Před 5 měsíci
Create Room Tutorial - 13 | Next14 FullStack Hotel Booking App
Room Model/Dialogue Tutorial - 12 | Next14 FullStack Hotel Booking App
zhlédnutí 245Před 5 měsíci
Room Model/Dialogue Tutorial - 12 | Next14 FullStack Hotel Booking App
Hotel CRUD Operations Tutorial - 11 | Next14 FullStack Hotel Booking App
zhlédnutí 434Před 5 měsíci
Hotel CRUD Operations Tutorial - 11 | Next14 FullStack Hotel Booking App
Select Location Tutorial - 10 | Next14 FullStack Hotel Booking App
zhlédnutí 345Před 5 měsíci
Select Location Tutorial - 10 | Next14 FullStack Hotel Booking App
Uploading Images in Uploadthing Tutorial - 09 | Next14 FullStack Hotel Booking App
zhlédnutí 1,2KPřed 5 měsíci
Uploading Images in Uploadthing Tutorial - 09 | Next14 FullStack Hotel Booking App
FormField Tutorial - 08 | Next14 FullStack Hotel Booking App
zhlédnutí 326Před 5 měsíci
FormField Tutorial - 08 | Next14 FullStack Hotel Booking App
Form Schema in Zod Tutorial - 07 | Next14 FullStack Hotel Booking App
zhlédnutí 347Před 5 měsíci
Form Schema in Zod Tutorial - 07 | Next14 FullStack Hotel Booking App
HotelForm Initial Set-Up Tutorial - 06 | Next14 FullStack Hotel Booking App
zhlédnutí 424Před 5 měsíci
HotelForm Initial Set-Up Tutorial - 06 | Next14 FullStack Hotel Booking App
Prisma and My SQL Tutorial - 05 | Next14 FullStack Hotel Booking App
zhlédnutí 584Před 6 měsíci
Prisma and My SQL Tutorial - 05 | Next14 FullStack Hotel Booking App
DarkMode and NavMenu Tutorial - 04 | Next14 FullStack Hotel Booking App
zhlédnutí 389Před 6 měsíci
DarkMode and NavMenu Tutorial - 04 | Next14 FullStack Hotel Booking App
Creating The NavBar - 03 | Next14 FullStack Hotel Booking App
zhlédnutí 650Před 6 měsíci
Creating The NavBar - 03 | Next14 FullStack Hotel Booking App
very helpful
cool
It's really helpfull and your explaination were straightforward man.thank you so much guy for help.😊😊
I'm planning to start with this project, but my question is, how are you able to use 'test' details with Stripe for payments, and complete the order? How does it handle actual payments? Is it capable of handling actual customers or is it just for a demo purpose?
@rudyoactiv this course waa for education purposes only, if you want to take it to production you can activate stripe to receive payment, the stripe used is on dev demo mode.
@@ChaooCharles so is it possible to deploy it to be able to show employers a live project? I am still in college.
@rudyoactiv yes, last video of the series i show how to deploy
Really helpful, thank you
you are too much boss...... we really appriciate the effort u put🥰🥰
you are too much boss...... we really appriciate the effort u put🥰🥰
thanks for tutorial
cool
When I am sending mail, I am not getting the name and email, I am getting the message, what happened
cool
cool
Hey i made this project by your playlist but some errors r coming nd project is not running can you please help me in solving those errors
Lots of love ❤️ from Nigeria 🇳🇬 @charles 🇰🇪
@@onigbindedavid6630 ❤️❤️
@ChaooCharles please I have a question on this, how can we send the receipt of order created to the customer ??? Immediately the payment is successful or failed
Via email
react is trying to be react query now....wtf
New react versions always got crazy changes
Thanks so much again ♥
😊😊🎉🎉🎉🎉
Cool video, mate
thank you mate
Kazi fiti apa ndugu
Awesome tutorial, I am having an issue, Once I go to checkout and back without paying its not showing any transactions with incomplete? is that a new feature? or any error Only showing the succeededs
big up charles
Great ♥ Thanks a million.
instead of using stripe, is there any other application we can use? Because it's not supported in my country. Thank you
Great jab bro!
Thank you bro 😊
my backend api works well but still not able to work well i fetch it
this is secure or not? can i use real time project for company website
2 years later this still quite usuful. 👏🏼
hello my name is Oldis and i'm from benin, i tried to create a web like your hotel booking app on youtube but i'm running in to an issue It's about the payment method , i'm triying to use Fedapay instead of stripe but it didn't work
my ass source code. fk 3$.
hi charles I got error POST localhost:3000/api/create-payment-intent 500 (Internal Server Error) 7:19:00 Stripe is a filter in our country But in Stripe, I have the payments and they are added But it is not in orders in Mongodb can u help me
hi charles I got error POST localhost:3000/api/create-payment-intent 500 (Internal Server Error) 38:00 Stripe is a filter in our country But in Stripe, I have the payments and they are added But it is not in orders in Mongodb can u help me
nice bro can u share your linkedin
nice
i am encoupntering an error for no reason, the task is always failing, if someone can help please let me know(ps: I am coding in react itself for my portfolio website)
Which channel is best Guys In urdu from this
I have given the display flex to the card still image is not showing
Are you using bootstrap or same thing like that ?
great work
which font are you using in visual studio code?
Thank you 😉
does anybody else have a problem with OAuth? for me it only creates the User but not the Account i cant figure out why
Fantastic video. You explain things very well. Thank you.
i would like to hear your suggestions to my question sooner you saw it thanks
hey i know am watching your series some years after when u uplaoded can i ask " why should i use AsyncThunk to fetch data while i can opt to use async/wait or is it strictly neccesary to use asyncThunk when involvig in reduxToolkit "
This is the best explanation of useCallback hook that I have ever seen on CZcams, honestly I have been searching for a clearer explanation for weeks but finally, I found the best one which worths 1million likes, thank you Charles, Assalam aleykum from Uzbeksitan :)
Glad you found this useful 😊
🎉@@ChaooCharles
❌const history = useHistory() history.push('/cart') we now use: ✅ const navigate = useNavigate() navigate('/cart') current time now use this 😊
how can I add an admin authorization with middleware, is there any method to add a role taken from the currentUser?
hello can i get source code please i have a lot mistakes
I'm stuck at Userchat its value is appearing null even after having content in chats in mongodb i have checked the backend connection om postman its working, but don't know why its getting null value of Userchats plz someone help me here
Does anyone know what font name on the code he does ?
Plz reply I'm gettting null in Userchats, even after having chats in mongodb,what to do to solve this issue