- 54
- 208 533
Ankita Kulkarni
Canada
เข้าร่วมเมื่อ 8 ต.ค. 2011
Hey there! 👋 My goal is to teach you everything about Frontend development as a Software Engineer in an efficient and practical manner. I cover everything from getting a job as a Frontend Developer to becoming really good at it.
I'm an Educator, Developer and a Senior Engineering Leader in Tech.
I work and live in Toronto, Canada. I am also a Educator so you'll learn all about growing in your career technically and career development.
Whether you're trying to transition into a software developer role, a beginner developer, want to know how to level up or someone looking to further enhance their skills - this is the channel for you 😃
I'm an Educator, Developer and a Senior Engineering Leader in Tech.
I work and live in Toronto, Canada. I am also a Educator so you'll learn all about growing in your career technically and career development.
Whether you're trying to transition into a software developer role, a beginner developer, want to know how to level up or someone looking to further enhance their skills - this is the channel for you 😃
Meet the Creator of TanStack / React Query (Tanner Linsley Interview)
#tanstack #react #typescript #javascript #nextjs
Tanner Linsley is the creator of TanStack Query also known as React query and the creator of the entire ecosystem TanStack. Tanner talks about the architecture decisions that shaped TanStack, his unique take on react server components, the journey of building type-safe APIs and why they shouldn’t be an after thought, his vision for Tanstack start and more.
👉 Sign up for the Premium Next.js Course Waitlist (Launching on November 25)
bit.ly/nextjscourse
👉 FREE Next.js Best Practices Course:
bit.ly/nextjshottips
⏰ Timeline
00:00 - What we are planning to cover?
2:31 - Tanner's Journey into building TanStack
4:41 - Impact at Nozzle - Developer to Co-Founder
7:36 - What got you to start TanStack start?
10:09 - How did you leverage TanStack Query?
18:19 - I Built a Framework with just Types
22:52 - How do you Adopt TanStack in a very interactive app?
28:28 - How did you achieve a Robust coverage with TypeScript?
31:26 - The Impact of Right Architecture Decisions
31:42 - React Server Components in Tanstack
38:31 - How can Developers get to where you are today?
42:58 - The Future of TanStack Start
44:00 The Awesome Contributors of the TanStack Ecosystem
🔗 RESOURCES:
💌 Frontend Newsletter:
Frontend Snacks 🍿 bit.ly/fesnacks
If you liked this video, you will also love my newsletter Frontend Snacks. You will learn a new topic each week with cool visuals and snippets, the latest frontend news and behind-the-scenes exclusive updates that I don't share anywhere else.
✨ FREE Goodies: kulkarniankita.com/goodies
☎️ Book a 1:1 coaching session with me
Opened a few coaching calls, grab them before they are gone: bit.ly/30mins-coaching-with-ankita
🐤 Find me here
Twitter: kulkarniankita9/
LinkedIn: www.linkedin.com/in/kulkarniankita/
Tanner Linsley is the creator of TanStack Query also known as React query and the creator of the entire ecosystem TanStack. Tanner talks about the architecture decisions that shaped TanStack, his unique take on react server components, the journey of building type-safe APIs and why they shouldn’t be an after thought, his vision for Tanstack start and more.
👉 Sign up for the Premium Next.js Course Waitlist (Launching on November 25)
bit.ly/nextjscourse
👉 FREE Next.js Best Practices Course:
bit.ly/nextjshottips
⏰ Timeline
00:00 - What we are planning to cover?
2:31 - Tanner's Journey into building TanStack
4:41 - Impact at Nozzle - Developer to Co-Founder
7:36 - What got you to start TanStack start?
10:09 - How did you leverage TanStack Query?
18:19 - I Built a Framework with just Types
22:52 - How do you Adopt TanStack in a very interactive app?
28:28 - How did you achieve a Robust coverage with TypeScript?
31:26 - The Impact of Right Architecture Decisions
31:42 - React Server Components in Tanstack
38:31 - How can Developers get to where you are today?
42:58 - The Future of TanStack Start
44:00 The Awesome Contributors of the TanStack Ecosystem
🔗 RESOURCES:
💌 Frontend Newsletter:
Frontend Snacks 🍿 bit.ly/fesnacks
If you liked this video, you will also love my newsletter Frontend Snacks. You will learn a new topic each week with cool visuals and snippets, the latest frontend news and behind-the-scenes exclusive updates that I don't share anywhere else.
✨ FREE Goodies: kulkarniankita.com/goodies
☎️ Book a 1:1 coaching session with me
Opened a few coaching calls, grab them before they are gone: bit.ly/30mins-coaching-with-ankita
🐤 Find me here
Twitter: kulkarniankita9/
LinkedIn: www.linkedin.com/in/kulkarniankita/
มุมมอง: 1 538
วีดีโอ
5 NEW Features in Next.js 15 You Should Know About
มุมมอง 1.3K21 วันที่ผ่านมา
#nextjs #react #typescript #javascript We'll look into 5 exciting features in Next.js 15, 2 breaking changes and some quality of life improvements in Next.js 15. 👉 Sign up for the Premium Next.js Course Waitlist: bit.ly/nextjscourse 👉 FREE Next.js Best Practices Course: bit.ly/nextjshottips → 'use cache' Blog Post: www.nextjscourse.dev/courses/nextjs-course/use-cache-deep-dive ⏰ Timeline 00:00 ...
NEW Next.js 15 Feature! A Caching Mechanism
มุมมอง 1.4Kหลายเดือนก่อน
#nextjs #react #typescript #javascript Next.js 15 is out with another caching mechanism directive called use cache. It is different than unstable_cache. Let's do a deep dive in this video. 👉 Sign up for the Premium Next.js Course Waitlist: bit.ly/nextjscourse 👉 FREE Next.js Best Practices Course: bit.ly/nextjshottips ⏰ Timeline 00:00 Intro 00:43 What is use cache? 1:23 Entry Route Caching 3:37 ...
What's New in Next.js 15 RC2
มุมมอง 2.3Kหลายเดือนก่อน
#nextjs #react #typescript #javascript In this video, we'll review the latest features and breaking changes in NextJs 15 Release Candidate (RC) 2 before the upcoming stable release 👉 Sign up for the Premium Next.js Course Waitlist: bit.ly/nextjscourse 👉 FREE Next.js Best Practices Course: bit.ly/nextjshottips Server Actions leaking data You’re leaking data with Server Actions in Next.js (accide...
Build a Full Stack Splitwise Clone app - Next.js, ShadCN, NeonDB, Claude AI, Cursor AI
มุมมอง 4.3Kหลายเดือนก่อน
Build a SplitWise clone app without writing a single line of code yourself but using AI to do it. We'll be using Galileo AI, Claude AI and Cursor AI to build the SPlitwise clone app. This app allows you to split expenses with your friends. Built with Galileo AI, Claude AI and Cursor AI and Next.js 14 App Router, Clerk for Authentication, React, NeonDb for database management, ShadCN UI library ...
Cursor AI Tutorial for Beginners in 10 minutes! (VSCode killer?)
มุมมอง 6K2 หลายเดือนก่อน
Cursor AI is an advanced AI Code Editor that makes coding much faster. It predicts your code, auto completes your code and you can build really cool advanced features with it. This video will show you everything you need to know to use Cursor AI, how you can use to build apps with Next.js and show you where it fits in your AI developer toolkit. You can download Cursor AI here: bit.ly/cursorai #...
How I migrated from Pages to App Router in Next.js
มุมมอง 8992 หลายเดือนก่อน
In this video, we will cover the process of migrating a Next.js app from the pages router to the app router from Next.js 12 to 14 by migrating my website and show you the common mistakes to avoid during the migration process. #nextjs #react #javascript #typescript ⭐️ Sign up for the Premium Next.js Course Waitlist: bit.ly/nextjscourse 👉 FREE Next.js Best Practices Course: bit.ly/nextjshottips ⏰...
Build a Full Stack AI SaaS with Next.js, TypeScript, ShadCN, Payments | Full Course 2024
มุมมอง 26K2 หลายเดือนก่อน
Hi all 👋 In this 5 hour tutorial, you will learn how to create an end-to-end full stack AI SaaS app that converts your video into a Blog Post in seconds with the power of AI! This app is built with the Next.js 14 App Router, Clerk for Auth - with Passkeys, Github and Google Sign in, React, OpenAI - Whisper API, ShadCN UI library for components, React Markdown, NeonDb for databases, UploadThing,...
Learn Zod in 5 minutes (makes TypeScript better)
มุมมอง 9623 หลายเดือนก่อน
#zod #typescript #nextjs #react Learn how to easily validate form inputs with Zod in this quick tutorial in 5 minutes! From setting up schemas to handling errors and transforming data, I'll walk you through creating a robust form validation system in just a few steps. Watch now to see how Zod can simplify your TypeScript workflow! ⭐️ Sign up for the Premium Next.js Course Waitlist: bit.ly/nextj...
You’re leaking data with Server Actions in Next.js (accidentally)
มุมมอง 2.1K3 หลายเดือนก่อน
#nextjs #react #javascript #typescript You need to be careful while using ‘use server’ in Server Actions as it’s too easy to leak data. Because there is so much confusion already with use client and use server, i.e. client and server components so I don’t blame you but this one is too easy to fall through the cracks. So if you are making these mistakes, learn how you can avoid the mistake, how ...
A New Way to Render Pages in Next.js | NeonDB, Server Actions
มุมมอง 1.2K3 หลายเดือนก่อน
Discover the power of combining static and dynamic rendering with Next.js experimental Partial Pre-rendering (PPR) feature. Learn how to optimize your app's performance by pre-rendering static content while dynamically fetching data for specific components. Improve SEO, user experience, and development efficiency through this innovative technique. Also, learn how it differs from incremental sta...
Build and Deploy a Full Stack AI Todoist Clone: Next.js, Convex & TypeScript
มุมมอง 47K5 หลายเดือนก่อน
Hi all 👋 In this 7 hour tutorial, you will learn how to create an end-to-end full stack Todoist clone, with AI features to help you organize and suggest missing items in your list with adding, deleting tasks, authentication, search using Zod, Next.js, Convex, React, Next.js Auth V5 i.e. Auth.js, Google Sign in, ShadCN UI library, React hook forms, TypeScript, OPenAI, TailwindCSS and more 🌟 Be s...
How does React Compiler ACTUALLY work?
มุมมอง 1.6K5 หลายเดือนก่อน
How does React Compiler ACTUALLY work?
The Most Underrated feature in Nextjs 15
มุมมอง 7665 หลายเดือนก่อน
The Most Underrated feature in Nextjs 15
Next.js 14 Authentication Crash Course with Clerk and Lucia (super EASY!)
มุมมอง 6K6 หลายเดือนก่อน
Next.js 14 Authentication Crash Course with Clerk and Lucia (super EASY!)
5 Biggest Mistakes Slowing Down Next.js Apps
มุมมอง 2.5K7 หลายเดือนก่อน
5 Biggest Mistakes Slowing Down Next.js Apps
The New Tailwind CSS V4 Blew My Mind 🤯
มุมมอง 1.7K8 หลายเดือนก่อน
The New Tailwind CSS V4 Blew My Mind 🤯
Next.js Crash Course for Beginners 2024 | Build a Full Stack App
มุมมอง 26K8 หลายเดือนก่อน
Next.js Crash Course for Beginners 2024 | Build a Full Stack App
One Simple Step to Add Page Transitions in NextJS
มุมมอง 8K9 หลายเดือนก่อน
One Simple Step to Add Page Transitions in NextJS
Next.js App vs Pages Router - Which One is Better?
มุมมอง 4.8K9 หลายเดือนก่อน
Next.js App vs Pages Router - Which One is Better?
Create React App is dead 💀 - Now What?
มุมมอง 2.7K9 หลายเดือนก่อน
Create React App is dead 💀 - Now What?
Frontend Developer Roadmap that Actually works in 2024
มุมมอง 3K9 หลายเดือนก่อน
Frontend Developer Roadmap that Actually works in 2024
The Real Difference between React and Next.js | 2024
มุมมอง 2.1K10 หลายเดือนก่อน
The Real Difference between React and Next.js | 2024
Is Facebook's StyleX a TailwindCss Killer?
มุมมอง 6K11 หลายเดือนก่อน
Is Facebook's StyleX a TailwindCss Killer?
Avoid these Server Actions mistakes at all costs | Next.js
มุมมอง 3K11 หลายเดือนก่อน
Avoid these Server Actions mistakes at all costs | Next.js
Server Actions in Next.js (useFormStatus, useFormState, Error Handling)
มุมมอง 7Kปีที่แล้ว
Server Actions in Next.js (useFormStatus, useFormState, Error Handling)
The REAL reason you’re not a Senior Engineer
มุมมอง 405ปีที่แล้ว
The REAL reason you’re not a Senior Engineer
From india I can pay Rs1100
I can pay Rs. 1111
Hey thanks for the offer! Although it won’t be fair to others so I will respectfully decline, the course does have PPP so keep an eye 👁️
Its daily Live on TH-cam?
No just today for launching www.nextjscourse.dev/
Thank you for your wonderful videos..
Hope you see you in the course!
so basically have to separate file functions for action and getdata ?
the site showing "not safe tool " in Microsoft edge
this interview was definately done around Diwali lol
haha yeah, I decorated the entire condo! :)
Mh, aham, mh, mh, aham
Awesome Tanstack Query is one of my favorite library when building react app
Mine too!
Please keep sharing insights. You have taught me how to teach. Respect to you mam
Thank you for your kind words! Means a lot :)
I have a problem after deployment database stripe credentials isn't updating the ui even if it is stored in db and webhooks all are working fine
Did you set the environment variables on vercel?
@Kulkarniankita yes mam done everything env variables of both stripe and neon db are working fine because webhooks are ok and the checkout data is also saving in the db with all info then it isn't updating in the ui for basic plan pro plan etc even it is shown in db
@ did you change the price ids? I remember they were hardcoded for dev vs prod
@@Kulkarniankita yep my issue is solved and app is overall working fine.. Thanks❤❤ need more ai driven projects like this 😍
@ coming up in December! Just busy launching www.nextjscourse.dev/
Hi Ankita You are brilliantl. Please give discount on engineering manager content or please make more content on the same :)
Thanks! Yes join my newsletter to know about the sale. I’ll be running a Black Friday sale now
great video ankita
Thank you! 😊 who should we have on next?
please bring the creator of solid
And yeah Ryan would be great :)) I haven’t really explored Solid. Would you say Solid is solid? Lol
@Kulkarniankita, solid is the best! I would like to see Tanner and Ryan at the same time
@@luka1790 good idea! what would you like to know more about?
@Kulkarniankita their vision for the vinixi ecosystem, web dev, and if they are going to work together in the future. I heard rumors that tanstack router is going to be made compatible with solidstart. I think just having these two talk to each other will make for an interesting conversation.
great video nice ..to see this channel growing
Thank you!
Thanks everyone for watching this video! Who else should we bring next on the channel?
I love the tool name Todovex
Haha thanks! Me too :)
Basically one needs to know everything about the everything they are gonna use with AI editors :)
One needs to know what tools to use for sure as a blind can’t direct a blind lol the more you are specific the better AI gets imo!
Hi Sir, ✳ You said that "Video Editor for my TH-cam channel." and I can get it done with Stunning results and fast delivery. You can check the strong portfolio to make sure. ✳ Would you like to see the 77-page portfolio pitch deck? Thanks, - Naomi.
can you please answer me on upwork :drive.google.com/file/d/1wwWkxGdSVrGnxB8FsXkaBqfOgVBnQB8S/view?usp=drive_link
This is so cool!
Thank you!
so no one ever uses lemonsqueezy?
I do for everything but when it comes to teaching how to use it, we go how LemonSqueezydoes it internally like how LS uses stripe internally so you know how to do it!
1. Become a mentor to someone 2. Lead a small project 3. Shadow your manager 4. Find out a mentor who is a leader in your organization 5. Know how to grow people at different skill levels 6. Communicating thoughtfully and effectively 7. Create physchological safety, praise publicly, provide feedback privately 8. You dont need to solve every problem as you used to solve as developer 9. Lead by an example 10. Set an example
Haha thanks!
Amazing now i don't need to depend on other library ❤📚
Great tutorial! However, I do have a question, seeing as you still need to code those Convex functions and create the tables and everything, what is the advantage of using Convex over using a stored database somewhere (i.e. AWS, VPS, etc) and server actions within NextJS to access that data? (putting the reporting and graphs aside)
Did anyone build the project recently? does it work following the tutorial?
Many did and yes it does work!
At the 1:34:33 you have AUTH_SECRET but before you have changes it from AUTH_SCRET to CONVEX_AUTH_ADAPTER_SECRET so from where you get this AUTH_SCRET and pasted it on convex can you explain it would be helpful.
Auth secret is the same as adapter secret, I created it using npx secret package that I showed in the video
@@Kulkarniankita got it , thanks for the reply...
Why aren't you using supabase? Instead of clerk and neon db ? Any specific reason?
I did use Supabase in a crash course and their auth is confusing to me plus I love clerk and Neon. Their docs and integration is much better
@Kulkarniankita thank you for your response
Ppr?
Yes!
Happy Diwali Ma'am 🙏🙏🙏
Happy Diwali ! 🪔
is nextjs 15 stable should I upgrade my nextjs 14 production app to nextjs 15? thanks for the video!!
Even though it is stable, it points to react 19 RC which you should be careful of!
I thought I could cache requests in the client component. I don't see much use for it since fetch already has the cache property.I think it's good that it's stable. now I can use it with prisma requests.
It’s experimental still but it gives you not just fetch but also component level caching, route level and also layouts, functions!
@@Kulkarniankita If this caches at the function level it could replace Memcached. Is that what you mean? to a reusable function used in different routes.
Great tutorial! Thank you so much for this!
Glad you liked it!
I love this channel. Regarding the next 15, there are some issues: I'm getting a hydration error during installation. Also, Shadcn/UI install will cause a problem, assuming they haven't fixed the issue yet.
Shadcn released something today so it should be good but until then I forced install it as I knew nothing would break and it worked fine! I’ll try doing a fresh install - which version are you on?
@@Kulkarniankita I just read the docs and followed the peer legacy fix. And regarding the hydration errors, i believe Next 15 doesn't play well with browser extensions. I think one has to deactivate certain extensions as a fix. Actually, I ran across the same issue in Next JS 14. Thanks again!
@ oh yeah? Thanks for looking into this and sharing the fix! 👏
npm config set legacy-peer-deps true
npm config set legacy-peer-deps true
Mam there is a hydration error when instal next is 15
what's the error? I've upgraded and it worked beautifully!
@ just forget it but I’ve installed twice and getting the hydration error. The Ui doesn’t break but the error always displayed when save changes
@ ohh did you upgrade an existing app?
@@Kulkarniankita I’ve installed the latest app which is 15.2 I think
@ I know but did you upgrade an existing app or did you create a fresh install? And what does the hydration error say?
What should I cover in Next.js 15 next?
An app where we can implement 'use cache'
@@Kulkarniankita mam make a project which is production grade
good idea! Did you check out my use cache video? th-cam.com/video/jK8NLWZIUfA/w-d-xo.htmlsi=uBbrqp21Z4Uxgd1S
Forms please
Bueno sería que le pudiéramos dar una URL de youtube y que tenga ia y tipo chatbot para mejorar el escript
Where does this leave usememo, memo and use callback, and are next page not cached by default?
They are things you can still use to optimize your apps when you want client interactivity
@@Kulkarniankita Alright. Thank you for your response 🙏
"use cache" on layout.tsx caches whole project?
Yup
Do you have a project in mind where we can use Nextjs 15 and maybe a backend in bun and hono ? it would be interesting, greetings.
well you can build whatever you like with Next 15!
Can you share the Github repo?
It’s not on GitHub yet
If the basic tier is made free, I would have give it a try
It is free!
@@Kulkarniankita it's not entirely free, I saw online that after 2000 suggestions nothing more. Or am I missing something. Like basic tier of cursor AI is free like that of chatGPT?
@@victormayowa7989 yeah not entirely but it is quite generous that you can do a lot with it so it shouldn’t stop you from giving a try!
What is the extension that you are using to display those cache miss and cache hit?
Check the “how to use cache section” here www.nextjscourse.dev/courses/nextjs-course/use-cache-deep-dive
@@SH-lt2iv Check the “how to use cache section” here www.nextjscourse.dev/courses/nextjs-course/use-cache-deep-dive
How to Delete the Created Group?
you need to implement that feature, I believe I show you!
That is why your are my favorite pussi
Great video ❤🙂
Thank you!
which screen recorder do use use in your videos and how layout of camera , Display is mode - in screen recorder or made while editing
Learnt that the hard way lol now I use actions and i'm fine
lol I hear you!
Which is best tech stack for SaaS which is also cost effective? nextjs,drizzle,neondb,stripe ?
next, mongo, stripe or next, neon, stripe and clerk for auth so you can focus on core functionalities