Cand Dev
Cand Dev
  • Видео 118
  • Просмотров 1 829 601
This is How I Create a Responsive Navbar
Learn how to create a responsive navbar using Next.js, Tailwind CSS, and Shadcn UI. This guide makes it super simple, helping you build a stylish and functional navbar with ease. Great for beginners and developers looking to save time.
👨‍💻Code:
[link code] github.com/candraKriswinarto/responsive-navbar
🔗Source:
[shadcn ui] ui.shadcn.com/docs/components/sheet
[lucide react] lucide.dev/icons/
#programming
Просмотров: 384

Видео

Auto Scroll with React Intersection Observer | Next.js
Просмотров 462Месяц назад
In this video, we continue from our previous tutorial on implementing infinite scroll in Next.js by adding auto scroll functionality using the React Intersection Observer. We'll walk you through the process of setting up the Intersection Observer to automatically load more content as you scroll, enhancing the user experience without the need for a "Load More" button. How to create load more but...
Implementing Infinite Scroll in Next.js Using Server Actions
Просмотров 1,1 тыс.Месяц назад
We will learn how to Iimplementing infinite scroll in Next.js with server actions. 👉Timestamps: 0:00 - Intro 01:15 - Install Next.js 01:59 - Create the UI Post List 11:53 - Api integration 🔗Source: [jsonplaceholder] jsonplaceholder.typicode.com/posts [jsonplaceholder params] github.com/typicode/json-server [next.js] nextjs.org/docs/getting-started/installation #programming
React DND Kit: Creating Vertical Sortable Lists Tutorial
Просмотров 2 тыс.2 месяца назад
Discover how to make sortable lists in React using DND Kit. This easy-to-follow guide walks you through every step. Great for beginners and pros! 👨‍💻Code: [github]: github.com/candraKriswinarto/vertical-sortable-list 🔗Source: [dnd kit docs]: docs.dndkit.com/presets/sortable [vite]: vitejs.dev/guide [tailwind css]: tailwindcss.com/docs/guides/vite #programming
Internationalization in NextJs 14 with Next-Intl | i18n
Просмотров 36 тыс.5 месяцев назад
In this video, we will explore the implementation of next-intl within the Next.js app router using server components. Additionally, we will demonstrate the creation of a select button in the navbar, allowing users to switch between the English and Indonesian languages. 👨‍💻Code: [github] github.com/candraKriswinarto/nextlingo 🔗Source: [next-intl docs] next-intl-docs.vercel.app 🚀Live: nextlingo-b...
Next.js 14 Authentication Tutorial with Clerk
Просмотров 17 тыс.5 месяцев назад
In this tutorial, we'll learn how to implement Clerk with Next.js, using the latest version of this technology. By following this video, you will see how easy it is to add authentication to your Next.js project 👨‍💻Code: github.com/candraKriswinarto/nextjs-auth-with-clerk 🔗Source: [Clerk docs] clerk.com/docs #programming
Horizontal Scroll Animation in React with Pure CSS
Просмотров 1,8 тыс.5 месяцев назад
This tutorial shows you how to create a smooth horizontal scroll in React using just CSS. Some websites use this slider to list brand images. 👨‍💻Code: github.com/candraKriswinarto/auto-horizontal-scroll #programming
Easy Grid Layouts with Tailwind CSS for Beginners
Просмотров 13 тыс.5 месяцев назад
Creating grids may seem complex, but in this video, I'll show you how it's actually really simple and easy. 👨‍💻Code: github.com/candraKriswinarto/grid-layout #programming
Add Authentication to Next.js: Login with Google
Просмотров 16 тыс.6 месяцев назад
Learn how to add Login with Google to your Next.js app using NextAuth.js, Prisma, and Supabase. Create the Form: ruclips.net/video/GkpEWkKQego/видео.htmlsi=Y1XGX-05jIf4Zgml Email and Password Auth: ruclips.net/video/bicCg4GxOP8/видео.htmlsi=7YFt3rPCEhN7wO8w 🔗Source: [supabase] supabase.com/ [prisma.io] www.prisma.io/ [next-auth] next-auth.js.org/getting-started/introduction [prisma-adapter] www...
3 Ways to Add Custom Google Fonts in Next.js 14
Просмотров 9 тыс.6 месяцев назад
Learn three simple ways to add Google Fonts to your Next.js 14 projects. Whether you're a beginner or an experienced developer, this quick tutorial will show you easy steps to customize your web design and make your sites stand out. 🔗Source: [nextjs docs] nextjs.org/docs/pages/building-your-application/optimizing/fonts 👋🏻 mynameischand.tech Timestamps: 0:00 - Demo 01:21 - Method 1 | variables a...
Simple Next.js Image Upload with UploadThing
Просмотров 13 тыс.7 месяцев назад
The essay way to upload file in next.js is use uploadthing 🔗Source: [uploadthing docs] docs.uploadthing.com/ 🛠️on progress: mynameischand.tech #programming
Build a Photo Gallery With React
Просмотров 4,7 тыс.7 месяцев назад
Let's create nice images gallery in react !! Wanna see how to create full stack image gallery? click here: ruclips.net/video/7mUnGh4XRek/видео.htmlsi=Ej9sR9zXa62BQijH 👨‍💻Code: github.com/candraKriswinarto/react-images-gallery 🔗Source: [package-github] github.com/igordanchenko/yet-another-react-lightbox [package-docs] yet-another-react-lightbox.com/ 🚀Live: react-images-gallery-nu.vercel.app/ 🛠️o...
Full-Stack Blog App Tutorial | Next.js and Prisma
Просмотров 12 тыс.7 месяцев назад
Let's dive into creating a blog app with Next.js where we'll explore a variety of concepts. For authentication, we'll implement Google login using NextAuth and store user data in a PostgreSQL database. Additionally, we'll leverage Prisma for efficient database querying. I hope this video proves helpful to you all! Complete Sign-Up and Sign-In with Next.js ruclips.net/video/bicCg4GxOP8/видео.htm...
How to Create Horizontal Scroll Animation with Just CSS
Просмотров 1,5 тыс.8 месяцев назад
Animation is always fun, so let's create a horizontal image scroll effect with pure CSS. 🔗Source: [learn flexbox in here] css-tricks.com/snippets/css/a-guide-to-flexbox 👋🏻 mynameischand.tech 🌎 Find Me Here: Instagram : candra_kriswinarto GitHub: github.com/candraKriswinarto/ Linkedin: www.linkedin.com/in/candra-kriswinarto/ #programming
How to Create Infinite Scroll in React | TanStack React Query
Просмотров 15 тыс.8 месяцев назад
In this video we are gonna learn how to create infinite scroll in react, we can use button "load more" to show more data, also we are gonna use "react-intersection-observer" to make it auto fetch when we scroll down. 👨‍💻Code: github.com/candraKriswinarto/infinite-scrolling 🔗Source: [api] jsonplaceholder.typicode.com/ [react-intersection-observer] www.npmjs.com/package/react-intersection-observe...
How to Intercept Routes in Next js | Image Gallery
Просмотров 3,3 тыс.8 месяцев назад
How to Intercept Routes in Next js | Image Gallery
How to Fetch Data Effectively on Search Input | React
Просмотров 1,5 тыс.8 месяцев назад
How to Fetch Data Effectively on Search Input | React
Full-Stack Next.js Blog App with Prisma and Tanstack React Query
Просмотров 31 тыс.9 месяцев назад
Full-Stack Next.js Blog App with Prisma and Tanstack React Query
Build a Complete Sign-Up and Sign-In with Next.js, NextAuth, PostgreSQL, and Prisma
Просмотров 72 тыс.10 месяцев назад
Build a Complete Sign-Up and Sign-In with Next.js, NextAuth, PostgreSQL, and Prisma
Create Form and Validation With Shadcn UI | NextJs 13
Просмотров 30 тыс.11 месяцев назад
Create Form and Validation With Shadcn UI | NextJs 13
First Impression: What is Shadcn UI and How to Use It?
Просмотров 5 тыс.11 месяцев назад
First Impression: What is Shadcn UI and How to Use It?
Building a Marvel-Pedia App: Next.js 13 Project
Просмотров 2,4 тыс.Год назад
Building a Marvel-Pedia App: Next.js 13 Project
Build Age Calculator App in React: Project for beginner
Просмотров 3,1 тыс.Год назад
Build Age Calculator App in React: Project for beginner
Full Stack Image Gallery App Tutorial | React, Firebase, Firestore
Просмотров 12 тыс.Год назад
Full Stack Image Gallery App Tutorial | React, Firebase, Firestore
Learn React by Building a Gradient Generator App
Просмотров 881Год назад
Learn React by Building a Gradient Generator App
Create a To-Do App with Next.js 13: Learn CRUD Operations and Tailwind CSS UI
Просмотров 65 тыс.Год назад
Create a To-Do App with Next.js 13: Learn CRUD Operations and Tailwind CSS UI
Next.js 13: What's New and How to Use It?
Просмотров 1,5 тыс.Год назад
Next.js 13: What's New and How to Use It?
React Pagination with Tanstack Query: Using keepPreviousData and isPreviousData
Просмотров 4,4 тыс.Год назад
React Pagination with Tanstack Query: Using keepPreviousData and isPreviousData
Building a CRUD App with TanStack React-Query and React
Просмотров 29 тыс.Год назад
Building a CRUD App with TanStack React-Query and React
Build a Real-Time Chat App with React, Firebase, and Tailwind CSS
Просмотров 19 тыс.Год назад
Build a Real-Time Chat App with React, Firebase, and Tailwind CSS

Комментарии

  • @user-oq1nf5eq9d
    @user-oq1nf5eq9d 17 часов назад

    Whoever is placing the problem of lagging..🟥🟥🟥 Replace the variants part with this ✅, adding the transition smooth property: const variants = { default: { x: mousePosition.x - 16, y: mousePosition.y - 16, transition: { type: "smooth", duration: 0, }, }, text: { height: 150, width: 150, x: mousePosition.x - 75, y: mousePosition.y - 75, backgroundColor: "yellow", mixBlendMode: "difference", transition: { type: "smooth", duration: 0, }, }, };

  • @shan_singh
    @shan_singh День назад

    can you provide source code?

  • @afebriansyah805
    @afebriansyah805 3 дня назад

    indonesian?

  • @diantanjung713
    @diantanjung713 3 дня назад

    thank you bang. you explained very well

  • @YardenNegri
    @YardenNegri 4 дня назад

    hey! what extension do you use for the code snippets?

  • @duccloud4101989
    @duccloud4101989 4 дня назад

    Love your tutorial, you guide very clear. You saved my day :)

  • @mondistributeur326
    @mondistributeur326 5 дней назад

    I almost not find this video back 😦i suscribe.

  • @alannofrialdi7937
    @alannofrialdi7937 5 дней назад

    bro if u are indonesian i think better for u make new youtube account for speak bahasa only, your explanation are great anyway

    • @hooyah
      @hooyah 4 дня назад

      plis jgn. soalnya sambil belajar bahasa inggris. dia ngomong nya mudah di pahamin entah kenapa dr sebelum tau dia bisa speak bahasa

  • @abdurrahaman9522
    @abdurrahaman9522 7 дней назад

    thank you so much .i just found this way

  • @aldotugasumb2366
    @aldotugasumb2366 7 дней назад

    soo cool

  • @samuelmartinez7680
    @samuelmartinez7680 7 дней назад

    where is the video with google login?

    • @CandDev
      @CandDev 7 дней назад

      here: ruclips.net/video/k1TL-AzavvY/видео.htmlsi=gJXa-sF8jKcS7J9u

  • @sandunmadushan1732
    @sandunmadushan1732 9 дней назад

    Your explanation is pretty awesome. As a senior software engineer, I learn a lot from you. many thanks buddy.

  • @tikkyfoxyt6831
    @tikkyfoxyt6831 9 дней назад

    Simply explain well 🍏🙏💯

  • @soltsdev
    @soltsdev 10 дней назад

    Can you make a tutorial for clerk metamask authentication

  • @prashlovessamosa
    @prashlovessamosa 10 дней назад

    Thanks

  • @mugangaeric1064
    @mugangaeric1064 12 дней назад

    this was an amazing explanation and the illustrations made it even better. Thank you

    • @CandDev
      @CandDev 10 дней назад

      Thanks! I try my best despite my poor english.

    • @mugangaeric1064
      @mugangaeric1064 10 дней назад

      @@CandDev Certainly! It’s wonderful that you’re making an effort despite the language challenges. keep pushing

  • @Lamberson_
    @Lamberson_ 13 дней назад

    11.15

  • @mkhalidumer
    @mkhalidumer 15 дней назад

    Thank you for your time and effort you put to create such a nice tutorial. much appreciated.

    • @CandDev
      @CandDev 10 дней назад

      I am so happy if my video is helpful

  • @razvlekashka
    @razvlekashka 15 дней назад

    Does redirection of homepage affects SEO?

  • @Trust3D
    @Trust3D 21 день назад

    Epic tutorial, I don't need to buy a course🎉

    • @CandDev
      @CandDev 10 дней назад

      Yeah, it's free... but you gotta subscribe. Think of it as a 'thank you' tax 😁

  • @rokkazmvm
    @rokkazmvm 22 дня назад

    Hey, is there a way to have one language(lets say english) not have any prefix by default? And others have like shown on video?

  • @Jeridi
    @Jeridi 23 дня назад

    amazing

  • @ThisIsLiving__
    @ThisIsLiving__ 23 дня назад

    saved me twice on two different projects 😃

  • @osvaldoaguilalafont5052
    @osvaldoaguilalafont5052 26 дней назад

    the best and only tutorial on youtube

  • @user-de3bw9ny3z
    @user-de3bw9ny3z 26 дней назад

    Thank you so much, teacher! That was more than helpful 👍

  • @leevu12
    @leevu12 27 дней назад

    Thank you so much! clear explaination sir

  • @user-uz9me3nb6n
    @user-uz9me3nb6n 28 дней назад

    If i want to keep the manual scroll with load more button, how can i make the button disappear when there is no more data to show?

  • @Aufafkri
    @Aufafkri 28 дней назад

    bang buatin horizontal scroll dari render map api dong :)

    • @CandDev
      @CandDev 10 дней назад

      kurang lebih sama sih, cuma datanya get dari api, jngn lupa tambahin loading skeleton supaya lebih keren lagi.

  • @parassalve
    @parassalve 28 дней назад

    धन्यवाद (Thanks)🙏

  • @ManiSingh-gr7zi
    @ManiSingh-gr7zi 29 дней назад

    great video, to the point. Thank you

  • @itsanuragjoshi
    @itsanuragjoshi 29 дней назад

    Thanks a ton! Easy explanation

  • @naolfekadu6101
    @naolfekadu6101 Месяц назад

    Whatif I have deeply nested routes? How would the router replace work?

    • @user-lh8lf9cm1x
      @user-lh8lf9cm1x 29 дней назад

      I am wondering the samething... I thought about asking chatGPT to create a function to detect the current URL path like I dont know localhost:4000/en/dashboard?userId=xjhf123fd09dslkj2123123 and the function could get a string "es | de | en" and inside that function and replace the current url param but replace the "en" for "es" or "de" on the current path for the string coming from the function.. It could be a function that could be called from anywhere and be placed inside of "src/utils/" or I'm full of bad practices haha I'm just a junior doing things for 1st time

  • @rayusaki88
    @rayusaki88 Месяц назад

    Thanks a lot! Straight forward tut! Learned something nice 👌🏼

  • @eliuddyn
    @eliuddyn Месяц назад

    Amazing 🔥🔥

    • @CandDev
      @CandDev 10 дней назад

      Thanks 🔥

  • @MartinRojas
    @MartinRojas Месяц назад

    this is not server actions. You are still calling the third Party REST API from the client components. If this was a true server actions then the network tab would show traffic to localhost not the third-party API.

    • @alias-wh1et
      @alias-wh1et 27 дней назад

      I sorta agree. `getPosts` is called from the server when called from the server component `Home` in `src/app/page.tsx`, but is called from a client component as @MartinRojas mentioned when the "load more" button is clicked. Luckily, `getPosts` can be turned into a server action simply by adding 'use server' at the top of the `get-posts.ts` file. Then, `getPosts` would be called from the server even when called by a client component. (You can confirm by console-logging and looking at where the logs appear.)

  • @lic.sebastianrodrigonajle964
    @lic.sebastianrodrigonajle964 Месяц назад

    Excellent bro!! i learned a lot!! thnks!! :D:D

  • @lic.sebastianrodrigonajle964
    @lic.sebastianrodrigonajle964 Месяц назад

    Excellent project bro!!! keep going!! cheers from Argentina!! :D:D

    • @CandDev
      @CandDev 10 дней назад

      Thank you! Cheers!

  • @prashlovessamosa
    @prashlovessamosa Месяц назад

    Thanks for sharing buddy

  • @bsimelane
    @bsimelane Месяц назад

    Thank you. This was very helpful and well-explained.

  • @pelumini
    @pelumini Месяц назад

    Excellent! Straight to the point!

  • @SasiPreetham-im8zg
    @SasiPreetham-im8zg Месяц назад

    How to get the console information into div section

  • @Pressurehandler228
    @Pressurehandler228 Месяц назад

    Makasih banggg, sangat membantu ini

  • @nightfury1250
    @nightfury1250 Месяц назад

    Yes It is actually helpful ❤ thanks for video

    • @CandDev
      @CandDev Месяц назад

      Glad it was helpful 🤍

  • @preciousnwaoha3123
    @preciousnwaoha3123 Месяц назад

    I cannot remember any other coding tutorial that was as well done in terms of following up as this one. And I have been on this for years.

  • @lakhangarg5602
    @lakhangarg5602 Месяц назад

    how did u add camera icon??

    • @CandDev
      @CandDev Месяц назад

      on mac you can press Control + Command + Space

  • @shamana-om
    @shamana-om Месяц назад

    Thank you for this great video - amazing explanation!

  • @manansoni2598
    @manansoni2598 Месяц назад

    Hello! I tried implementing it and it's working... But the response time seems very off. It's lagging VERY much! How to resolve it? and BTW thanks for the tutorial!

  • @julienheng3880
    @julienheng3880 Месяц назад

    my cursor is pretty laggy ... do you happen to know why?

  • @germancardosodesousa5183
    @germancardosodesousa5183 Месяц назад

    Great video! I have a question, how could i do if i want to add another router, like app/bio/page.tsx ... I have to put it into my [locale] folder, or into app folder? Thanks!!!

  • @zqgAFf
    @zqgAFf Месяц назад

    Can you provide us a one with Next14 with clerk , the middleware seems to have a conflict