![Cand Dev](/img/default-banner.jpg)
- Видео 118
- Просмотров 1 829 601
Cand Dev
США
Добавлен 14 ноя 2014
Create project is a good way to learn web development technology, in this channel you will be learn HTML, CSS, Javascript and the awesome library like REACT, framework and another cool stuff. please join. :) and #enjoyCoding
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
👨💻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
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, }, }, };
can you provide source code?
indonesian?
thank you bang. you explained very well
hey! what extension do you use for the code snippets?
Love your tutorial, you guide very clear. You saved my day :)
I almost not find this video back 😦i suscribe.
bro if u are indonesian i think better for u make new youtube account for speak bahasa only, your explanation are great anyway
plis jgn. soalnya sambil belajar bahasa inggris. dia ngomong nya mudah di pahamin entah kenapa dr sebelum tau dia bisa speak bahasa
thank you so much .i just found this way
soo cool
where is the video with google login?
here: ruclips.net/video/k1TL-AzavvY/видео.htmlsi=gJXa-sF8jKcS7J9u
Your explanation is pretty awesome. As a senior software engineer, I learn a lot from you. many thanks buddy.
Simply explain well 🍏🙏💯
Can you make a tutorial for clerk metamask authentication
Thanks
this was an amazing explanation and the illustrations made it even better. Thank you
Thanks! I try my best despite my poor english.
@@CandDev Certainly! It’s wonderful that you’re making an effort despite the language challenges. keep pushing
11.15
Thank you for your time and effort you put to create such a nice tutorial. much appreciated.
I am so happy if my video is helpful
Does redirection of homepage affects SEO?
Epic tutorial, I don't need to buy a course🎉
Yeah, it's free... but you gotta subscribe. Think of it as a 'thank you' tax 😁
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?
amazing
saved me twice on two different projects 😃
the best and only tutorial on youtube
Thank you so much, teacher! That was more than helpful 👍
Thank you so much! clear explaination sir
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?
bang buatin horizontal scroll dari render map api dong :)
kurang lebih sama sih, cuma datanya get dari api, jngn lupa tambahin loading skeleton supaya lebih keren lagi.
धन्यवाद (Thanks)🙏
great video, to the point. Thank you
Thanks a ton! Easy explanation
Whatif I have deeply nested routes? How would the router replace work?
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
Thanks a lot! Straight forward tut! Learned something nice 👌🏼
Amazing 🔥🔥
Thanks 🔥
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.
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.)
Excellent bro!! i learned a lot!! thnks!! :D:D
Excellent project bro!!! keep going!! cheers from Argentina!! :D:D
Thank you! Cheers!
Thanks for sharing buddy
Thank you. This was very helpful and well-explained.
Excellent! Straight to the point!
How to get the console information into div section
Makasih banggg, sangat membantu ini
Yes It is actually helpful ❤ thanks for video
Glad it was helpful 🤍
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.
how did u add camera icon??
on mac you can press Control + Command + Space
Thank you for this great video - amazing explanation!
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!
Yes its a lot lagging
my cursor is pretty laggy ... do you happen to know why?
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!!!
Can you provide us a one with Next14 with clerk , the middleware seems to have a conflict