WebDevJan
WebDevJan
  • 7
  • 120 077
Build Forms 10x Faster with This Shadcn Tool
Build Forms 10x Faster with This Shadcn Tool
Tired of writing forms from scratch? In this video, I'll show you a game-changing Shadcn Form Builder that will revolutionize how you create forms in React.
Useful Resources:
➡️The form builder tool: shadcn-form-build.vercel.app/playground
➡️The custom dependencies, such as the multi select, can be found under "Resources" here: shadcn-form-build.vercel.app/readme
About Me
🐦 Twitter: x.com/WebDevJan
📁 GitHub: github.com/janhbnr
Переглядів: 46 342

Відео

Watch This One Zustand Video and You're Set | Beginner Tutorial
Переглядів 4934 місяці тому
Hey everyone! Today we're diving into Zustand, this cool new React library that's making waves in state management. If you're tired of wrestling with React's Context API or passing props all over the place, you're gonna love this. I'll walk you through creating store hooks, and show you how to grab, change, and update your state from any component. It's seriously straightforward stuff, perfect ...
Migrate NextAuth from V4 to V5 with Ease | Server Components Tutorial
Переглядів 1,1 тис.7 місяців тому
Migrate NextAuth from V4 to V5 with Ease | Server Components Tutorial In this video, I'll show you how to easily migrate from NextAuth V4 to V5 and take advantage of server components in Next.js 14. Follow along as I break down the steps and share some tips to make the process smooth and hassle-free. Update: To use the server actions provided by NextAuth inside client components, I moved the fu...
Credentials Provider, Session Updates etc. | Authentication with Next Auth and Next.js 14 Part 2
Переглядів 11 тис.8 місяців тому
Authentication with Next Auth and Next.js 14 | Credentials Provider, Session Updates In this tutorial, you'll learn how to implement authentication in a Next.js 14 application using the popular Next Auth library. We'll cover the Credentials Provider, which allows you to integrate your application with any authentication system, including your own custom backend API. You'll also learn how to man...
Authentication with Next Auth and Next.js 14 | Protected routes, Server & Client Sessions
Переглядів 44 тис.9 місяців тому
Authentication with Next Auth and Next.js 14 | Protected routes, Server & Client Sessions In this tutorial, I walk you through the process of implementing the latest version of NextAuth into Next.js 14. I cover how to set up OAuth login with both GitHub and Google, as well as creating protected routes by obtaining the session on the client and server. Find the github repository here: bit.ly/4aA...
How to Add Google Adsense in Next.js 14
Переглядів 11 тис.9 місяців тому
How to Add Google Adsense in Next.js 14 Hey there! In this tutorial, I'll guide you through the process of adding Google Adsense to your Next.js 14 application. By following these steps, you'll be able to display auto ads seamlessly. Additionally, I'll demonstrate how to create a personalized "AdBanner" component, giving you the flexibility to manually position custom adbanners anywhere within ...
How to Add Google Analytics 4 (GA4) in Next.js 14
Переглядів 6 тис.9 місяців тому
How to Add Google Analytics 4 (GA4) in Next.js 14 Hey there, in this video I'll show you how to integrate the newest Google Analytics version (GA4) into your NextJs 14 app using the app directory. Official NextJs documentation: nextjs.org/docs/messages/next-script-for-ga - This is my first tutorial, I hoped you like it. If you need any help feel free to ask me in the comment section below.

КОМЕНТАРІ

  • @shaikhzeeshan7
    @shaikhzeeshan7 День тому

    How to download or add to our project those input fields Example datetime-picker They provide code but this field is imported from components/ui How to get that

  • @9YRR
    @9YRR 2 дні тому

    what are your VSCode extensions ?

  • @kad6448
    @kad6448 3 дні тому

    Hi , when i used themeprovider within the body , it works , but gives a hydration error . Is there any possible fixes for that?

    • @baazigar5
      @baazigar5 2 дні тому

      yes, you have to use one attribute

  • @eilronescalante4807
    @eilronescalante4807 8 днів тому

    Finally, simple explanation and implementation that makes sense, Thank you!

  • @codefinity
    @codefinity 14 днів тому

    This is a great start, but gets a bit more complex when we need to be GDPR compliant. Now, we need an interactive (client-side) banner to ask the user to accept/deny and then we need to store that in `localStorage`, but `layout` can't access that... 🤔...

  • @ichoupettev4661
    @ichoupettev4661 Місяць тому

    that video was great !

  • @gikenye101
    @gikenye101 Місяць тому

    Hats off man !

  • @vigneshbaskaran631
    @vigneshbaskaran631 Місяць тому

    My product doesn’t have any payment.. I want to design in such a way that user should see one minute ad for one credit. It is a blogging platform and I don’t want to keep banner ads all over the place to maintain the clean design

  • @rtdev8512
    @rtdev8512 Місяць тому

    mr. what authstrategy you used? is it jwt? local session? database session or other strategy? this nextauth makes me dying even premium chatgpt doesnt gave answer, i think learn trough experienced is still a better method

  • @josepservat211
    @josepservat211 Місяць тому

    Can I know how we can get this nice background desktop ?

  • @ahmedabdelmeguid1131
    @ahmedabdelmeguid1131 2 місяці тому

    really fantastic ...please we need videos like this

  • @over_kill
    @over_kill 2 місяці тому

    you sound like the "one whiskey and one coke" bear meme

  • @Akosiyawin
    @Akosiyawin 2 місяці тому

    Does this support svelte?

  • @pwendell2
    @pwendell2 2 місяці тому

    Thank you so much. This is helpful! Btw, do you have this kind of builder for vue.js?

  • @rokix101
    @rokix101 2 місяці тому

    would like to see this but with shadcn-vue

  • @K.Huynh.
    @K.Huynh. 2 місяці тому

    So cool!

  • @rubening
    @rubening 2 місяці тому

    Does it have hidden fields? so I can pass utm and other variables?

  • @antonhorvath808
    @antonhorvath808 2 місяці тому

    bro spitting facts. thank you

  • @serychristianrenaud
    @serychristianrenaud 2 місяці тому

    Thanks

  • @aamironline
    @aamironline 2 місяці тому

    The tool is very much buggy!

  • @0xBerto
    @0xBerto 2 місяці тому

    Fuck yeah! Thank you !

  • @gregoriodia
    @gregoriodia 2 місяці тому

    Can't wait till you hear about "WYSIWYG" editors xD

  • @LearnAlongFaizan
    @LearnAlongFaizan 2 місяці тому

    great video, this tool is a game changers, please share more

  • @AbhiShake-pl3cf
    @AbhiShake-pl3cf 2 місяці тому

    I still think autoform is much faster

    • @AbhiShake-pl3cf
      @AbhiShake-pl3cf 2 місяці тому

      Its more extensible, all code based and combined with z.infer and z.custom, it takes pretty much no time

  • @bohdanromanovich4912
    @bohdanromanovich4912 2 місяці тому

    It would be great to see how to handle sessions for both cases (credentials and something like google) and with roles management off course.

  • @pescamuilesviavelez
    @pescamuilesviavelez 2 місяці тому

    But with your approach in relation with SessionProvider wrappering all your application, are you losing any options of having server components? Because you are forced to use always components in client-side

  • @peterhryhoruk
    @peterhryhoruk 2 місяці тому

    Form and UI at all is basically the simplest thing in whole frontend. I don’t get why people get crazy about this shadcn stuff

    • @peterhryhoruk
      @peterhryhoruk 2 місяці тому

      But I’ve implemented it to my commercial frontend project and I have something to stay First of all I hate tailwind and I don’t get why some of you and developers of shadcn do. Secondly, yea it has comfort cli 3. It still has pretty annoying setup process because of tailwind most of all)) 4. I didn’t get why do I need to install libraries inside shadcn. So my deps look like bs. And also ide recommendations now look like bs 5. The only pros from shadcn I got that I don’t need to care about making UI for inputs element 6. Though I still need to make custom UI from shadcn input which took origin from some framermotion or another “useful” library )) It’s some sort of crazy

    • @AbhiShake-pl3cf
      @AbhiShake-pl3cf 2 місяці тому

      ​@@peterhryhorukyour 6th point answers your question :)

  • @Akshaypmna
    @Akshaypmna 2 місяці тому

    Thanks for sharing

  • @omarmohamedfaheem2198
    @omarmohamedfaheem2198 2 місяці тому

    This is very good content and explanation, I really enjoyed it. However, I have a question there is a one second split delay where it shows the index page then the dashboard when logged in, is there a way to prevent this?

    • @webdevjan
      @webdevjan 2 місяці тому

      You are performing the session check on the client with useSession which causes that delay. Perform the check on the server instead to avoid any layout shifts

    • @omarmohamedfaheem2198
      @omarmohamedfaheem2198 2 місяці тому

      @@webdevjan can you explain more please?

  • @Divyv520
    @Divyv520 2 місяці тому

    Hey web , I really enjoyed your latest video! Your content has a lot of potential, and I specialize in helping creators grow their UA-cam channels through proven strategies that have worked for my clients. If you're ever interested in taking your channel to the next level, I'd love to discuss how I can assist you with everything from planning to execution. Let me know if you'd like to connect!

  • @moggedau
    @moggedau 3 місяці тому

    Open claude - pass form fields - ask for ShadCn component use, Lucide Icons, and zod validation with correct typescript use. Gen AI is too OP for basic web applications now that it makes tools like this quite redundant.

    • @pookiepats
      @pookiepats 2 місяці тому

      ill take a builder over a nondeterministic AI that has rate limits, outages & is slow AF. what a weird thing to say.

    • @pookiepats
      @pookiepats 2 місяці тому

      you also completely ignore the iteration speed and context, you've really reached on this it is upsetting. it gets more wrong the more i think about your statement.

    • @SpaghettiRealm
      @SpaghettiRealm 2 місяці тому

      @@pookiepatsthey’re both tools, use whatever makes you more productive

  • @mathesonstep
    @mathesonstep 3 місяці тому

    This is awesome... I hope it stays maintained

    • @haskup
      @haskup 2 місяці тому

      I will be. I'll update weekly.

  • @RandomGuy34-j1u
    @RandomGuy34-j1u 3 місяці тому

    Got a new project idea 😈😈 Will try to make this and add even more features like a multi step form probably...maybe extend it even further than form ?? What else idk though 😅😂

    • @haskup
      @haskup 2 місяці тому

      It is on the roadmap. Will be added in November. You can contribute to the project if you want. I haven't started that part yet.

  • @wagyumedia
    @wagyumedia 3 місяці тому

    Insta sub when game changer is really a game changer

  • @avivshvitzky2459
    @avivshvitzky2459 3 місяці тому

    This is super cool. But I am suggesting what I have done - I've created a dynamic form creator that generates a form based on a json config. It easier to manage than to see a huge html/jsx section, you can make macro or micro changes to any form, and there's less DRY issue

    • @adriandewinter7262
      @adriandewinter7262 3 місяці тому

      Would love to check that out. Do you have that shared somewhere?

    • @kaedriz
      @kaedriz 3 місяці тому

      @@adriandewinter7262 Schema from FormKit? But only for Vue, dunno for react.

    • @avivshvitzky2459
      @avivshvitzky2459 2 місяці тому

      ​@@adriandewinter7262 You basically create a simillar json: const formLayout = [ { layout: 'grid grid-cols-1 gap-4', fields: [ { field: 'input', type: 'text', value: state.title, label: 'Title', placeholder: 'Title', name: 'title', }, // more fields } ] each child represents a form group, and each of its children is a form field. you can define diff attributes and even design. Then make a form-creator file that loops over this json and renders accordingly. there you can write once how fields look, instead of doing it many times in your code.

    • @avivshvitzky2459
      @avivshvitzky2459 2 місяці тому

      @@adriandewinter7262 what the hell, i replied and it got deleted

    • @adriandewinter7262
      @adriandewinter7262 2 місяці тому

      @@avivshvitzky2459 if you included a link it is likely auto deleted because of a url being there (to prevent spam) if its a repo link you can just put the repo destination instead of a full url

  • @haskup
    @haskup 3 місяці тому

    Omg 🙌 thanks for sharing my project. Thats the best video explains the work. I understand the feedbacks. I'll update agan in soon

    • @webdevjan
      @webdevjan 3 місяці тому

      You're welcome! Thanks for sharing this amazing tool for free with the community, keep it up. :)

    • @gamemak0r
      @gamemak0r 2 місяці тому

      It definitely caught my eye. Writing out zod form validation takes forever

    • @haskup
      @haskup 2 місяці тому

      @@gamemak0r I'll try to add more options while editing but it likes a hell, I wrote so many converters for zod. I can say that we need much simpler validation system. It is solid but it gets complicated for a specific validation types.

    • @SandeepSingh-jm1lv
      @SandeepSingh-jm1lv 2 місяці тому

      That's an amazing project man. Will definitely use in my projects.

    • @Confidencerobionsion
      @Confidencerobionsion 2 місяці тому

      Superheroes don't always wear capes ❤

  • @mahfoudh_arous
    @mahfoudh_arous 3 місяці тому

    thanks for sharing 🙏

  • @PenguinjitsuX
    @PenguinjitsuX 3 місяці тому

    This looks cool, but I'm not sure what advantage this has to just writing the code yourself. Each field element would be one line of code anyways and you just have to set the name and label.

    • @webdevjan
      @webdevjan 3 місяці тому

      I think it's just a no brainer that saves you time when you for some reason don't feel like working on your own custom form and just want to get things done fast. :)

  • @KnowledgeDBman
    @KnowledgeDBman 3 місяці тому

    Good job

  • @asimalqasmi7316
    @asimalqasmi7316 3 місяці тому

    Really amazing

  • @keshavakumar9828
    @keshavakumar9828 3 місяці тому

    Wow, you explaining skill are so good. Subbed you and turned on notification as well. Please keep making more videos like this

  • @mdalmamunit427
    @mdalmamunit427 3 місяці тому

    always making top notches video ❤

    • @webdevjan
      @webdevjan 3 місяці тому

      Appreciate it!!

  • @davidnguyen9065
    @davidnguyen9065 3 місяці тому

    Holy shit! This is a game changer! Thank you so much for sharing this!

  • @wizlock007
    @wizlock007 3 місяці тому

    my friend sent me few days ago, i checked it similar to shadcn u have all the docs and it has few things like conditional rendering based on user interaction and support for any custom component

  • @aghileslounis
    @aghileslounis 3 місяці тому

    Great video, thanks for sharing!

  • @nanaassumadu4997
    @nanaassumadu4997 3 місяці тому

    I think most likely he is using shadcn-vue. The multiselect component is there and just so easy to use... A great resource thanks so much

    • @webdevjan
      @webdevjan 3 місяці тому

      Probably not, since the components have code snippets that have "use client" at the top, which means it's rather made for nextjs users. :)

    • @nanaassumadu4997
      @nanaassumadu4997 3 місяці тому

      @@webdevjan Yh I noticed that.

  • @misajid2264
    @misajid2264 3 місяці тому

    Thanks!! It will save so much time.

  • @jacquesmatike9289
    @jacquesmatike9289 3 місяці тому

    awesome !

  • @FrontendNerd-lg3oh
    @FrontendNerd-lg3oh 3 місяці тому

    thanks for sharing 'Jan" , Jan in Urdu /Hindi mean Dear Loverly

    • @webdevjan
      @webdevjan 3 місяці тому

      You're welcome! Always nice to learn something new

    • @faisal.fs1
      @faisal.fs1 3 місяці тому

      It's the same in Bangla too 😅

  • @webdevjan
    @webdevjan 3 місяці тому

    My bad, you can find the custom dependencies (such as the multi select shown in the video) by clicking on the names under the resources section here: shadcn-form-build.vercel.app/readme

    • @haskup
      @haskup 3 місяці тому

      I updated this part. If you click non-official-shadcn component there will be a notice and link above the tabs. thanks for the great feedback.

    • @ernst367
      @ernst367 3 місяці тому

      ​@@haskupthanks a lot