JavaScript Unleashed
JavaScript Unleashed
  • 14
  • 63 675
Note Taking App using Next.js | Credentials Provider Auth.js | Server Actions
In this video, we will build full stack note taking app using Next.js. You'll learn how to implement secure user authentication using Auth.js with the Credentials Provider. We'll also implement CRUD operations with Next.js Server Actions.
⏰ Chapters:
0:00 App Overview
1:10 Project Setup
2:00 Layout And Routing
14:05 Auth.js Credentials Provider
58:12 CRUD using Server Actions
2:09:40 Pagination
2:34:01 Pin Note Functionality
2:45:22 react-hot-toast
Stay tuned for upcoming videos.
🚀 Let's craft something extraordinary together! 🚀
zhlédnutí: 1 026

Video

Server Side Pagination in Next.js 14 | Pagination in Server Components
zhlédnutí 239Před měsícem
Learn how to implement server side pagination in Next js 14 server component. By the end of this tutorial, you'll have a fully functional pagination system integrated into your Next.js application. Stay tuned for upcoming videos. 🚀 Let's craft something extraordinary together! 🚀 #pagination #notetakingapp
Build a Video Call App in Next js14 using ZEGOCLOUD UIKits
zhlédnutí 428Před 2 měsíci
In this video we will build a Video Call App in Next.js 14 using ZEGOCLOUD UIKits. 📲 Get 10,000 free minutes with UIKits: bit.ly/3L4s3ey 📘 Learn more about ZEGOCLOUD: bit.ly/3XDeuKI 🔧 100% customized video call SDK: bit.ly/45Lpgkf 📚 How to build a video call App: bit.ly/3XJpZ3o ZEGOCLOUD video call SDK &API allows you to easily build your live video chat apps within minutes. #zegocloud #videoca...
CRUD using Server Actions in Next.js 14 | Note Taking App
zhlédnutí 1,5KPřed 2 měsíci
In this video, we'll implement CRUD operations using Server Actions in Next.js 14. This tutorial shows how to use Server Actions to create, read, update, and delete (CRUD). ⏰ Chapters: 0:00 Overview 0:40 Create 13:10 Read Basics 16:40 Read Advanced 38:00 Delete 48:10 Update Stay tuned for upcoming videos. 🚀 Let's craft something extraordinary together! 🚀
Note Taking App using Next.js 14 | Auth.js Credentials Provider
zhlédnutí 2,1KPřed 3 měsíci
In this video, we'll guide you through building a note-taking app using Next.js 14. Learn how to integrate the Auth.js Credentials Provider for secure user authentication. ⏰ Chapters: 0:00 Introduction and Overview 1:00 Setting Up the Next.js App 2:12 Understanding Routing Basics 4:30 Designing the App's Layout 12:00 Connecting to MongoDB Database 16:30 Implementing NextAuth 26:10 Adding Login ...
Note Taking App using Next.js 14 | App Overview | Coming Soon
zhlédnutí 190Před 4 měsíci
Get ready for an epic journey as we kick off the series on building a Note-Taking App with the Next.js 14. Here's what we'll cover: ✔️ Routing ✔️ Next Auth v5 ✔️ Pagination ✔️ CURD with Server Actions and many more. Stay tuned for upcoming videos. 🚀 Let's craft something extraordinary together! 🚀
How to connect NextJS 14 App and MongoDB with Mongoose
zhlédnutí 774Před 4 měsíci
In this tutorial, you will learn how to seamlessly integrate MongoDB into your Next.js 14 application using Mongoose. Whether you're a beginner or an experienced developer, follow along as we walk you through each step of the process. From setting up your Next.js environment to establishing a robust connection to MongoDB using Mongoose, this video covers it all. By the end, you'll have the know...
The #1 Mistake Nextjs14 Developers Make | Misusing "use client"
zhlédnutí 683Před 5 měsíci
In Next.js 14, developers often misuse the 'use client' directive, leading to common pitfalls in their applications. In this video, we'll dive deep into the proper use of the 'use client' directive in Next.js 14. Discover how to sidestep common pitfalls and optimize your application's performance to its fullest potential.
Next.js 14 Server Actions: Success and Error Handling with React-Hot-Toast
zhlédnutí 1,1KPřed 7 měsíci
Unlock the power of Next.js 14 server actions with seamless success and error handling using React-Hot-Toast! In this tutorial, dive into the intricacies of managing responses from your server actions, ensuring a flawless user experience. Elevate your development skills as we guide you through practical examples and tips for optimal integration. Join us on this journey to enhance your Next.js p...
Next.js 14 Authentication with NextAuth | NextAuth with Credentials
zhlédnutí 36KPřed 9 měsíci
Unlock the power of authentication in Next.js 14 with our comprehensive guide on implementing NextAuth for credentials-based authentication. Learn step-by-step how to secure your Next.js applications with the latest features, as we walk you through the seamless integration of NextAuth. Subscribe for more videos. Thanks for watching. #nextauth #nextjs14
Implement Pagination in Next.js 14 | Server-side Pagination in Next.js 14
zhlédnutí 8KPřed 10 měsíci
Implement Pagination in Next.js 14 Throughout this tutorial, we'll cover the essential concepts and practical techniques for creating a seamless pagination system. You'll gain a thorough understanding of how pagination works in the context of Next.js 14 using server components. Thanks for watching #nextjs14
Todo App using Next.js 14 Server Actions
zhlédnutí 8KPřed 10 měsíci
In this video, we will be building Todo App using Next.js 14 Server Actions. It is the one of the best feature of Next.js 14. Thanks for watching #serveractions #nextjs #nextjs14
How to Add Custom SVG Icons in Next.js
zhlédnutí 3,8KPřed 10 měsíci
In this tutorial, you'll learn how to effortlessly add custom SVG icons to your Next.js projects without using npm package svgr/webpack. Thanks for watching.
Weather App using HTML CSS and JavaScript
zhlédnutí 93Před 10 měsíci
In this step-by-step tutorial, we'll guide you through the process of building a dynamic Weather App using HTML, CSS, and JavaScript. Discover how to seamlessly integrate a weather API to fetch real-time weather conditions for any location. Learn how to design an intuitive user interface and leverage the power of JavaScript to display accurate weather data. With this tutorial, you'll not only c...

Komentáře

  • @hardikupadhyay2178
    @hardikupadhyay2178 Před 13 dny

    can you provide github repo for this project?

  • @uPhanBa
    @uPhanBa Před 18 dny

    next15 ?

  • @c_charlie
    @c_charlie Před 24 dny

    Awesome tutorial! I'm asking my self why don't you used TS. I'm starting as a developer and always saw people talking about TS. There's some kind of advantage not using it? Thank you!

    • @JavaScriptUnleashed
      @JavaScriptUnleashed Před 24 dny

      TS is ideal for large-scale projects, but this tutorial is for beginners, so I kept it simple by not using TS.

  • @yash-c7l5b
    @yash-c7l5b Před 24 dny

    Can you provide the source code for it? A GitHub repository or a Google Drive link would work. Also, how are you applying CSS styling to the tags? From what i can see this is not module.css way as you are not even importing module.css file to components

  • @alexdin1565
    @alexdin1565 Před 25 dny

    woow thats amazing please can you make a video about Auth.js login using facebook?

  • @hendisantika
    @hendisantika Před měsícem

    Very informative video. Pls post the source code. Thanks

  • @UsmanKhan-oi8er
    @UsmanKhan-oi8er Před měsícem

    imagine writing css in 2024

  • @lixiangshiziyou
    @lixiangshiziyou Před měsícem

    Why use javascript instead of typescript?

  • @atishkumarsahu6095
    @atishkumarsahu6095 Před měsícem

    bro code ka github link nahi hai kya? hai to please mention kijiye bro

  • @mohammedzakir8012
    @mohammedzakir8012 Před měsícem

    Very informative video. Pls post the source code. Thanks

  • @JavaScriptUnleashed
    @JavaScriptUnleashed Před 2 měsíci

    📲 Get 10,000 free minutes with UIKits: bit.ly/3L4s3ey 📘 Learn more about ZEGOCLOUD: bit.ly/3XDeuKI 🔧 100% customized video call SDK: bit.ly/45Lpgkf 📚 How to build a video call App: bit.ly/3XJpZ3o

  • @teiteiwisdom6635
    @teiteiwisdom6635 Před 2 měsíci

    Short,precise and straight to the point nice ome

  • @kaushalgharat3574
    @kaushalgharat3574 Před 2 měsíci

    i am encountering an error. after adding todo the ui is not getting changed. the data is getting added in the mongoDB tho. can you please help me??

  • @vectorxdev
    @vectorxdev Před 2 měsíci

    Nice vid♥️

  • @AhmadOwais-jx2lq
    @AhmadOwais-jx2lq Před 2 měsíci

    Do you have a git repo of this ?

  • @mikhacavin
    @mikhacavin Před 3 měsíci

    have you ever try to deploy it on vercel? cause auth.js is sucks. my page become 404

  • @Akas766
    @Akas766 Před 3 měsíci

    excellent. From Bangladesh.

  • @rahulvishwakarma5332
    @rahulvishwakarma5332 Před 3 měsíci

    Awesome best video on next auth credentials

  • @AyushGupta-jk1gi
    @AyushGupta-jk1gi Před 4 měsíci

    Can you please provide the code?

  • @callmeadil910
    @callmeadil910 Před 4 měsíci

    sir kindly tell me which vscode theme you can use??

  • @manojbadiger2324
    @manojbadiger2324 Před 4 měsíci

    Hi bro Can you sell me this channel ready to pay

  • @manojbadiger2324
    @manojbadiger2324 Před 4 měsíci

    Hi bro Can you sell me this channel ready to pay

  • @somerandomdude-hoyeaaaaa
    @somerandomdude-hoyeaaaaa Před 5 měsíci

    Nice thumbnail

  • @outlawzrv3053
    @outlawzrv3053 Před 5 měsíci

    Use Js extensions not need to define use client or use server

  • @cas818028
    @cas818028 Před 5 měsíci

    You could also turn that delete into a server action

    • @JavaScriptUnleashed
      @JavaScriptUnleashed Před 5 měsíci

      Yeah, but the user wouldn't be able to get feedback when the button is clicked. That's why we have use server action for delete functionality and to implement react-hot-toast we have to make it client component.

  • @sohachauhan1911
    @sohachauhan1911 Před 5 měsíci

    Thanks you so much. This tutorial was exactly what i wanted. Can you also provide a tutorial on authentication with google provider? Also how to implement the my profile page.

  • @thrifterspoint1002
    @thrifterspoint1002 Před 5 měsíci

    token verification missing

  • @xiaoguabushigua
    @xiaoguabushigua Před 5 měsíci

    middleware.js file should be in src path!!! (next-auth@4.24.7)

  • @CarlosSa-gq1hd
    @CarlosSa-gq1hd Před 5 měsíci

    JS + mongo

  • @DebmalyaMazumdar
    @DebmalyaMazumdar Před 5 měsíci

    its nice i can now revise concepts in a10 minutes thankss

  • @sagarkashyap3397
    @sagarkashyap3397 Před 5 měsíci

    Where i can get the GitHub code

  • @saurabhu6458
    @saurabhu6458 Před 5 měsíci

    Thanks 👌

  • @Olamide-ny6wp
    @Olamide-ny6wp Před 5 měsíci

    Dude you help alot i will keep your channel, you do what most experice user were unable to do the JWT and Cllack hlpes

  • @GSCoder
    @GSCoder Před 6 měsíci

    Source code

  • @user-xh5ry1yb8y
    @user-xh5ry1yb8y Před 6 měsíci

    Easy guide but please provide logout and email, username showing system in profile

  • @nithishar2781
    @nithishar2781 Před 7 měsíci

    Thank you so much it was very helpful, such a great video

  • @vitech_solution
    @vitech_solution Před 7 měsíci

    can I get the GitHub repo?

  • @sumonchandrapaul9922
    @sumonchandrapaul9922 Před 7 měsíci

    tnx a lot

  • @Foused87
    @Foused87 Před 7 měsíci

    Github link

  • @ShamimSarker-lj5mo
    @ShamimSarker-lj5mo Před 7 měsíci

    How do I get the session data?

  • @devikidon
    @devikidon Před 7 měsíci

    Nice! <3

  • @1illustration56
    @1illustration56 Před 7 měsíci

    Its all good but how do i get the session data.

  • @qkdrk262
    @qkdrk262 Před 7 měsíci

    goat!

  • @navadentallab
    @navadentallab Před 7 měsíci

    sorry please i see you tutorial and i can't do the session get other variables only show email, on user object. if you can help me where is the crucial configuration to get id and username on my session.user object?, i actually have the same code like you in [...nextauth] file. i asign values from user to token, and from token to session and return session but still haved only email on session. i am using prisma for ORM. and postgresSQL for DB. thank for video new subscribe.

  • @j7coder
    @j7coder Před 7 měsíci

    I was trying to do the same but i get this error from my browser "localhost:3000/api/auth/callback/credentials 403 (Forbidden)" . What it could be?

  • @nithin3476
    @nithin3476 Před 7 měsíci

    github code??

  • @fareedshaikh4030
    @fareedshaikh4030 Před 7 měsíci

    Plz give a source code 🙏

  • @shortstube34
    @shortstube34 Před 7 měsíci

    Can you do recently released auth.js v5 with mongodb

  • @snehpaghdal
    @snehpaghdal Před 8 měsíci

    Nice work, It should be appreciated. Please make more videos on it.

  • @cesiodomeia-ponte444
    @cesiodomeia-ponte444 Před 8 měsíci

    Perfect