LiveCode247
LiveCode247
  • Видео 33
  • Просмотров 180 330
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
Просмотров: 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
Best React Table Component To Use??
Просмотров 12 тыс.Год назад
Best React Table Component To Use??
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

Комментарии

  • @bessimboujebli1076
    @bessimboujebli1076 16 часов назад

    this work is so so good, well done man <3

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

    Nice content but where is the longer version of this video ?

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

    always has an India guy better than you :D

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

    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.

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

    Does anyone got issues with vercel ? I have to submit twice

  • @ut_yuji
    @ut_yuji 14 дней назад

    clarification: It is not a component library sir

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

    how to change text color?

    • @andreyuriel3305
      @andreyuriel3305 11 дней назад

      your EditorJS stopped???

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

      @@andreyuriel3305 editorjs dose not suppoert nextjs server side rendering, i weill try another

  • @natancruz2499
    @natancruz2499 18 дней назад

    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?

  • @kemmouneismail3087
    @kemmouneismail3087 20 дней назад

    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

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

    wish there was a version with react and nodejs :((

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

    Dude, thanks a lot!!

  • @adarsh-chakraborty
    @adarsh-chakraborty Месяц назад

    Man you're life saver. Subscribed

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

    Is it just me or the sidebar state reset after every hard refresh of the page

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

    Good English communication skills you will get job because of your communication school

  • @22hoursago
    @22hoursago Месяц назад

    oh boy i didnt know this existed.

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

    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

  • @Saurav-xx
    @Saurav-xx Месяц назад

    thanks for sharing

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

    Keep up !

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

    Since I found out about shadcn, my designing time is significantly reduced, It is a boon for developers ngl

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

    great video buddy ,

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

      Thanks man! Appreciate it

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

      @@livecode247 this video will definitely change my life as a developer! Thanks a bunch for the awareness 💪🤝

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

    Hey Kavin! Are you using Screen studio to record videos?

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

      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

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

    Great 👍

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

    Awesome tutorial

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

    33:21 if " please knock " had a expression

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

    Bro could you recommend some projects that i should include in my resume as a frontend dev

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

      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

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

    shout out to @justinsunyt for putting me on this amazing channel

  • @growuptips
    @growuptips 2 месяца назад

    thanks bro u saved my project

  • @husniunii97
    @husniunii97 2 месяца назад

    what nextjs version ?

  • @abdullahmanafikhi4438
    @abdullahmanafikhi4438 2 месяца назад

    Thanks :)

  • @AbhilashShibu-d4u
    @AbhilashShibu-d4u 2 месяца назад

    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

    • @livecode247
      @livecode247 2 месяца назад

      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.

  • @Insane.18_7
    @Insane.18_7 2 месяца назад

    is it possible connect clerk with mariadb? Thanks <3

    • @livecode247
      @livecode247 2 месяца назад

      Yes, of course, you can connect to any other data source since you're the one controlling the db write anyways

  • @shkim4127
    @shkim4127 3 месяца назад

    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@!

    • @livecode247
      @livecode247 2 месяца назад

      I believe this should help: github.com/shadcn-ui/ui/pull/2266#issue-2062403008

    • @shkim4127
      @shkim4127 2 месяца назад

      @@livecode247 I already solved it! But thank you!

  • @prateekkukreja9664
    @prateekkukreja9664 3 месяца назад

    which code editor is that?

  • @JordanGigg-07
    @JordanGigg-07 3 месяца назад

    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!!!!!!

    • @livecode247
      @livecode247 3 месяца назад

      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

  • @angadsingh5636
    @angadsingh5636 3 месяца назад

    my goat, right when i needed to build an editor

  • @programingwithsanthosh6937
    @programingwithsanthosh6937 3 месяца назад

    Bro does it work for react

  • @BansiKhokhariya-w6w
    @BansiKhokhariya-w6w 3 месяца назад

    novel editor continue Wiring content Generate but remove why ? please give me solution as soon as possible

  • @ViniciusFeitosaDaSilva
    @ViniciusFeitosaDaSilva 4 месяца назад

    Excelent video. Thanks for sharing!

  • @cererec9766
    @cererec9766 4 месяца назад

    I like the switching of windows, how can I achieve that kind of animation?

    • @livecode247
      @livecode247 3 месяца назад

      I think that's the default animation when you use Stage Manager in MacOS

  • @krishnarajuyoutube
    @krishnarajuyoutube 4 месяца назад

    Good works thanks

  • @RajKumar-u2y3z
    @RajKumar-u2y3z 4 месяца назад

    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

  • @shreyAtJob
    @shreyAtJob 4 месяца назад

    Could we please get the code?

  • @iraniannuclearprogram3382
    @iraniannuclearprogram3382 4 месяца назад

    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

  • @RajKumar-u2y3z
    @RajKumar-u2y3z 5 месяцев назад

    Can you make this editor video from scratch with next. Js

  • @maxmurakami-moses4728
    @maxmurakami-moses4728 5 месяцев назад

    thank you. saved hours

  • @darkel5578
    @darkel5578 5 месяцев назад

    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?

  • @imkir4n
    @imkir4n 5 месяцев назад

    Nice, what I was doing before was using Next Safe Action, which gives a syntax somewhat like React Query to handle errors.

  • @romulororizz
    @romulororizz 6 месяцев назад

    Thanks for that brother! Exactly what i was looking for. Amazing!

  • @satyak1337
    @satyak1337 6 месяцев назад

    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?