- Видео 33
- Просмотров 180 330
LiveCode247
Индия
Добавлен 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: ruclips.net/video/R75rzso0MC0/видео.htmlsi=ONOqftWxP9hycTXY
ShadCN/UI Forms: ruclips.net/video/GtXafkB6bkA/видео.htmlsi=f0uw7d24u2DtjR6v
---
Website: kavin.me
Blog: livecode247.com
Github: github.com/kavinvalli
Why ShadCN/UI: ruclips.net/video/R75rzso0MC0/видео.htmlsi=ONOqftWxP9hycTXY
ShadCN/UI Forms: ruclips.net/video/GtXafkB6bkA/видео.htmlsi=f0uw7d24u2DtjR6v
---
Website: kavin.me
Blog: livecode247.com
Github: github.com/kavinvalli
Просмотров: 4 944
Видео
How to build a multi-workspace Slack Bot connected to your NextJS App?
Просмотров 293Месяц назад
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...
Validations in form actions in NextJS made much easier with this library!!
Просмотров 3145 месяцев назад
In this video, we talk about Conform, a type-safe form validation library utilizing web fundamentals to progressively enhance HTML Forms with full support for server frameworks like Remix and Next.js. Website: conform.guide Code in Video: github.com/kavinvalli/form-validation-conform Website: kavin.me Blog: livecode247.com Github: github.com/kavinvalli
NextJS 15 is out??!!
Просмотров 2426 месяцев назад
Hey guys, in this video I'll be talking about the latest update to NextJS - NextJS 15 RC. Website: kavin.me Blog: livecode247.com Github: github.com/kavinvalli
I made a Poker Chips Manager with NextJS 14's Form and Server Actions!
Просмотров 4846 месяцев назад
Repository: github.com/kavinvalli/poker-chips 0:00 Intro 1:41 Sadman Sortable Reusable Component 4:02 Demo 11:20 Why Self Hostable? 12:39 Architecture 13:59 Code 14:26 Form Actions React Hook Form 17:50 Server Actions 19:41 Socket.io 20:30 How does Socket.io work? 23:30 React Strict Mode useEffect Issue 24:15 Back to the Code 26:22 Is there a better way to use form actions? Website: kavin.me Bl...
Is this the best authentication library, right now? | Lucia Auth
Просмотров 2,9 тыс.9 месяцев назад
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
Просмотров 9 тыс.Год назад
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,3 тыс.Год назад
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!
Просмотров 896Год назад
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!
Просмотров 827Год назад
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,1 тыс.Год назад
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,4 тыс.Год назад
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?
Просмотров 10 тыс.Год назад
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: ruclips.net/video/GtXafkB6bkA/видео.html Video on Server Side Table: ruclips.net/video/BsvjF5Y6-C8/видео.html Website: kavin.me Blog: livecode247.com Github: github.com/kavinvalli
How to implement Server Side Pagination with TanStack Table and NextJS 13?
Просмотров 16 тыс.Год назад
How to implement Server Side Pagination with TanStack Table and NextJS 13?
My favourite way to work with forms and mutations in NextJS 13!
Просмотров 1,7 тыс.Год назад
My favourite way to work with forms and mutations in NextJS 13!
What I do as a high school web developer and you should too!
Просмотров 588Год назад
What I do as a high school web developer and you should too!
Create your own Notion like WYSIWYG editor with Editor.JS!!
Просмотров 28 тыс.Год назад
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,5 тыс.Год назад
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
Просмотров 28 тыс.Год назад
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,4 тыс.Год назад
Building an In-Browser Markdown Editor using ReactJS and Tailwind CSS
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
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 :)
Bro what's your vim setup like, I'm trying to get into vim. Could you help me out or point me in the right direction
I'm using Neovim, and this is my own custom configuration which you can find here: kavin.me/dots Honestly, I would suggest to start off just use vim keybindings in VSCode or ay other code editor that you use to just get used to the motions.
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
Could we please get the code?
It's not an auth library, it's just a set of helper util functions. You are basically implementing auth yourself. It's too low level, unless you are nerd and have nothing to do
Can you make this editor video from scratch with next. Js
thank you. saved hours
conform is an excellent library but I have problems validating in real time. If I have an action that returns a data so it does not redirect to another route, in the first validation it fails and an error message is displayed, in the second validation it is successful and how do I remove the error message and at the same time show the data that the action returns?
Nice, what I was doing before was using Next Safe Action, which gives a syntax somewhat like React Query to handle errors.
Thanks for that brother! Exactly what i was looking for. Amazing!
I am getting issue with novel. i just created new nextjs project. added nodel using "npm -i novel" and update page.tsx as per their website. This does not work. Do i need any additional changes?