- 30
- 188 931
LiveCode247
India
Приєднався 15 лют 2020
All things Javascript, Typescript, React and Web Development!
This channel is designed for anyone looking to learn and expand their knowledge of these essential tools for modern web development. The videos and tutorials cover a range of topics, from the fundamentals of Javascript and Typescript, to more advanced techniques in React and web development.
With engaging and informative content, you'll learn everything you need to know to build dynamic, responsive web applications. So, subscribe to this channel today and join the community of learners who are taking their web development skills to the next level!
This channel is designed for anyone looking to learn and expand their knowledge of these essential tools for modern web development. The videos and tutorials cover a range of topics, from the fundamentals of Javascript and Typescript, to more advanced techniques in React and web development.
With engaging and informative content, you'll learn everything you need to know to build dynamic, responsive web applications. So, subscribe to this channel today and join the community of learners who are taking their web development skills to the next level!
Adding a sidebar to your website just got a whole lot more easier with ShadCN!!
You can easily add sidebars to your application with the ShadCN/UI Library now, and it's as simple as one terminal command!
Why ShadCN/UI: ua-cam.com/video/R75rzso0MC0/v-deo.htmlsi=ONOqftWxP9hycTXY
ShadCN/UI Forms: ua-cam.com/video/GtXafkB6bkA/v-deo.htmlsi=f0uw7d24u2DtjR6v
---
Website: kavin.me
Blog: livecode247.com
Github: github.com/kavinvalli
Why ShadCN/UI: ua-cam.com/video/R75rzso0MC0/v-deo.htmlsi=ONOqftWxP9hycTXY
ShadCN/UI Forms: ua-cam.com/video/GtXafkB6bkA/v-deo.htmlsi=f0uw7d24u2DtjR6v
---
Website: kavin.me
Blog: livecode247.com
Github: github.com/kavinvalli
Переглядів: 7 081
Відео
How to build a multi-workspace Slack Bot connected to your NextJS App?
Переглядів 4153 місяці тому
A guide to how you can build a slack bot which can be connected to multiple workspaces from your NextJS Application Final Code: github.com/kavinvalli/multi-workspace-slack-bot Starter Code: github.com/kavinvalli/multi-workspace-slack-bot/tree/starter Timestamps: 00:45 Demo 02:30 Starter Code Explanation 05:30 Start Building the Integration 07:25 Slack API Explanation 09:43 Back to Building Webs...
Is this the best authentication library, right now? | Lucia Auth
Переглядів 2,9 тис.11 місяців тому
In this video, I'll talk about how Lucia Auth works and why it might be the right amount of abstraction needed in the authentication space. Should you use it over NextAuth? Well, that's for you to decide! Website: kavin.me Blog: livecode247.com Github: github.com/kavinvalli
A WYSIWYG editor with AI powered autocomplete! | Novel.sh
Переглядів 10 тис.Рік тому
In this video, I talk about Novel.sh, a Notion-style WYSIWYG editor with AI-powered autocompletion, built with Tiptap and the Vercel AI SDK. Novel: novel.sh Novel Github Repository: github.com/steven-tey/novel Code in video: github.com/kavinvalli/novel-demo Twitter: kavinvalli Website: kavin.me Blog: livecode247.com Github: github.com/kavinvalli
Chat with your custom data (PDF Files) using LangChain and OpenAI!
Переглядів 2,4 тис.Рік тому
In this video, I'll be talking about how to use Langchain with your own custom data and combine it with OpenAI to create an amazing chatbot! Website: kavin.me Blog: livecode247.com Github: github.com/kavinvalli
An Incoming Freshman + Web Developer's Setup in mid-2023!
Переглядів 918Рік тому
Hello everyone! In this video, I'll be talking about my developer setup, which comprises of Neovim, Tmux, Visual Studio Code, some scripts, etc. There's also a more detailed view of what all plugins I use inside of Neovim. To end it, I've talked about my Hardware just a bit Website: kavin.me Blog: livecode247.com Github: github.com/kavinvalli
This latest update makes ShadCN UI even more powerful and easier to work with!
Переглядів 2 тис.Рік тому
In this video, I'll be talking about the latest update to ShadCN UI, which introduces theming to the amazing package. Just select the colour, radius you want and copy paste the updated global css variables, and you're up and running in no time! Tweet: shadcn/status/1688622631183069184?s=20 Docs: ui.shadcn.com/themes Website: kavin.me Blog: livecode247.com Github: github.com/kavinvalli
This makes Valibot even better and exciting to use!
Переглядів 860Рік тому
In this video, I'll be talking about a new resolver added to the react hook form library for Valibot which makes it even easier to use with forms! Website: kavin.me Blog: livecode247.com Github: github.com/kavinvalli
Writing emails with React using React Email and Resend!
Переглядів 2,2 тис.Рік тому
Hey Guys! In this video, I'll be talking about how to send emails with React Email and Resend! Website: kavin.me Blog: livecode247.com Github: github.com/kavinvalli
How to integrate Stripe Subscriptions with NextJS 13? | A Guide to Stripe Webhooks
Переглядів 10 тис.Рік тому
In this video, I will be talking about how to integrate Stripe Subscriptions using the Webhook API in your NextJS 13 application. Demo: stripe-demo.livecode247.com Final Code: github.com/kavinvalli/stripe-subscriptions-demo Starter Code: github.com/kavinvalli/stripe-subscriptions-demo/tree/starter 00:00 - Intro 00:20 - Demo 03:08 - Setup from starter and explain 09:14 - Setup subscriptions data...
Better validation library than Zod?
Переглядів 1,5 тис.Рік тому
In this video, I'll be talking about a Zod alternative named Valibot, which has far smaller bundler size compared to Zod. Valibot Website: valibot.dev Github: github.com/fabian-hiller/valibot Blog Post: www.builder.io/blog/introducing-valibot Website: kavin.me Blog: livecode247.com Github: github.com/kavinvalli
Why use shadcn/ui and how to customise it?
Переглядів 11 тис.Рік тому
In this video, I'll be talking about why you should use ShadCN's UI library and how you can easily customise it to your own liking? Video on Forms: ua-cam.com/video/GtXafkB6bkA/v-deo.html Video on Server Side Table: ua-cam.com/video/BsvjF5Y6-C8/v-deo.html Website: kavin.me Blog: livecode247.com Github: github.com/kavinvalli
Best React Table Component To Use??
Переглядів 14 тис.Рік тому
In this video, I'll be talking about a component created by Sadman Sakib and myself, which gets ShadCNs table component to work with Server Side Pagination, Filtering and Sorting! Take a look: shadcn-table-v2.vercel.app/?page=1 Repo Link: github.com/sadmann7/shadcn-table-v2 Sadman Shakib: sadmann17 ShadCN UI: ui.shadcn.com Website: kavin.me Blog: livecode247.com Github: github.com/k...
How to implement Server Side Pagination with TanStack Table and NextJS 13?
Переглядів 17 тис.Рік тому
In this video, we'll be talking about how we can implement pagination on the server side using TanStack table and NextJS 13 using search params. Website: kavin.me Blog: livecode247.com Github: github.com/kavinvalli
My favourite way to work with forms and mutations in NextJS 13!
Переглядів 1,7 тис.Рік тому
In this video, I'll be talking about my favourite way to work with forms and mutations in NextJS 13 using Zod, React Hook Forms, TanStack React Query and any of your favourite component libraries. Website: kavin.me Blog: livecode247.com Github: github.com/kavinvalli
What I do as a high school web developer and you should too!
Переглядів 599Рік тому
What I do as a high school web developer and you should too!
Create your own Notion like WYSIWYG editor with Editor.JS!!
Переглядів 30 тис.Рік тому
Create your own Notion like WYSIWYG editor with Editor.JS!!
Best way to work with forms in NextJS?!!
Переглядів 10 тис.Рік тому
Best way to work with forms in NextJS?!!
How to stream realtime data from OpenAI in NextJS 13? | Creating a Mini ChatGPT Clone
Переглядів 4,6 тис.Рік тому
How to stream realtime data from OpenAI in NextJS 13? | Creating a Mini ChatGPT Clone
How to sync Clerk authenticated users with your own database in NextJS 13?! | Clerk Pt. 2
Переглядів 29 тис.Рік тому
How to sync Clerk authenticated users with your own database in NextJS 13?! | Clerk Pt. 2
How to integrate Stripe into your NextJS 13 application in just a few minutes? | E-Commerce App
Переглядів 3,1 тис.Рік тому
How to integrate Stripe into your NextJS 13 application in just a few minutes? | E-Commerce App
Understand NextJS 13.3 Route Interception and Parallel Routing in under 6 minutes!
Переглядів 12 тис.Рік тому
Understand NextJS 13.3 Route Interception and Parallel Routing in under 6 minutes!
How to implement user authentication in your NextJS 13 application in minutes using Clerk?
Переглядів 6 тис.Рік тому
How to implement user authentication in your NextJS 13 application in minutes using Clerk?
Master NextJS 13 Data Fetching with this Step-by-Step Guide
Переглядів 1,7 тис.Рік тому
Master NextJS 13 Data Fetching with this Step-by-Step Guide
Try using this authentication method in your next NextJS Project!! (Hint: Magic Links)
Переглядів 2,1 тис.Рік тому
Try using this authentication method in your next NextJS Project!! (Hint: Magic Links)
Building an In-Browser Markdown Editor using ReactJS and Tailwind CSS
Переглядів 2,6 тис.Рік тому
Building an In-Browser Markdown Editor using ReactJS and Tailwind CSS
can u please source code it is not available on github or your website is down
Is it possible to make and easy starter guide without a database please.
How can I implement loading while query, sorting or paginating though in your code you implement suspense but it doesn't show while the above task is running... Thanks for this video.
the setup seem different now
why are you not using neovim ?
Hey can I please get the code????
Awesome, I am doing this with Mongoose and MongoDB project for a friend. I see a lot of people doing tutorials for this using Prisma so is their a reason why you prefer Prisma?
hey dude i love your neovim config! would you mind sharing the colorscheme?
Hey man I actually dont remember what I was using back then. You can check out my neovim config at github.com/kavinvalli/dotfiles
cool video. i guess the question is 'do i want to implement it this way?' kinda feel like a table should probably be implemented client side 9 times out of 10?
this work is so so good, well done man <3
Nice content but where is the longer version of this video ?
always has an India guy better than you :D
I wasted days to make a flexible data table component myself which works server side. Thanks for the repo, I will improve my implementation using yours.
Does anyone got issues with vercel ? I have to submit twice
clarification: It is not a component library sir
then what it is? :D Literally shadcn site headline starts with this: "Build your component library Beautifully designed components that you can copy and paste into your apps. Made with Tailwind CSS. Open source."
how to change text color?
your EditorJS stopped???
@@andreyuriel3305 editorjs dose not suppoert nextjs server side rendering, i weill try another
Great video! im actualy having a problem with my sidebar where the main content does not fit the whole screen, there's a wrapper on the provider that im not managing to fix, is it common?
Hello, Im having an issue which is makes all my content inside the editor with the same font size, even if I try to add a header 1 or 2, everything the same font size
wish there was a version with react and nodejs :((
Dude, thanks a lot!!
Man you're life saver. Subscribed
Is it just me or the sidebar state reset after every hard refresh of the page
Good English communication skills you will get job because of your communication school
oh boy i didnt know this existed.
For last 20 mins i was trying to do it using dom and event listeners(basically i dont know how to do it)and damn..youtube recommended me this
thanks for sharing
Thanks for watching!
Keep up !
Since I found out about shadcn, my designing time is significantly reduced, It is a boon for developers ngl
great video buddy ,
Thanks man! Appreciate it
@@livecode247 this video will definitely change my life as a developer! Thanks a bunch for the awareness 💪🤝
Hey Kavin! Are you using Screen studio to record videos?
I usually record in obs when i have longer videos, but ya this one was screen studio since i knew it was a shorter one
Great 👍
Awesome tutorial
Thank you!
33:21 if " please knock " had a expression
Haha yes!
Bro could you recommend some projects that i should include in my resume as a frontend dev
Pick any project that you like and try to recreate it, it can be really intimidating but break it down into small parts and try to build them one by one. What has worked for me which my employers and companies I've gotten interviews from have specifically mentioned is my youtube channel - it showcases that I keep myself up to date with things and I have a good knowledge of things
shout out to @justinsunyt for putting me on this amazing channel
thanks bro u saved my project
Glad to be of help!
what nextjs version ?
Thanks :)
is it possible connect clerk with mariadb? Thanks <3
Yes, of course, you can connect to any other data source since you're the one controlling the db write anyways
Thank you for video! I have a question about to change directory architecture.. do you happen to know how to change the path of component/ui after install shadcn/ui? I want to change my project folder architecture thank you@!
I believe this should help: github.com/shadcn-ui/ui/pull/2266#issue-2062403008
@@livecode247 I already solved it! But thank you!
which code editor is that?
That's Neovim!
Thank you for this!!! It would be really cool for beginners to go into further details regarding integrating this onto another database table, new cols, new filtering, etc. But, you did amazing man!!!!!!
Thanks for the input! I wanted to make a short video and introduce the repository itself and didn't want to make it too long, but will keep the input in mind
my goat, right when i needed to build an editor
Bro does it work for react
novel editor continue Wiring content Generate but remove why ? please give me solution as soon as possible
Excelent video. Thanks for sharing!
I like the switching of windows, how can I achieve that kind of animation?
I think that's the default animation when you use Stage Manager in MacOS
Good works thanks
As novel editor storing content in json format but i want in mdx format how can i achieve it as it support mdx please reply me, anyone guys have any solution