- 7
- 106 602
WebDevJan
Germany
เข้าร่วมเมื่อ 15 พ.ย. 2022
Hi there! I'm Jan, a web developer and solopreneur from Germany.
And this is my TH-cam channel all about React, Next.js, and modern web development.
I created this channel to bring more people into the wonderful world of React and Next.js, helping them build better apps.
If you're learning to build websites and web apps, especially using JavaScript frameworks like React or Next.js, then this is the place for you.
And this is my TH-cam channel all about React, Next.js, and modern web development.
I created this channel to bring more people into the wonderful world of React and Next.js, helping them build better apps.
If you're learning to build websites and web apps, especially using JavaScript frameworks like React or Next.js, then this is the place for you.
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
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
มุมมอง: 42 179
วีดีโอ
Watch This One Zustand Video and You're Set | Beginner Tutorial
มุมมอง 4662 หลายเดือนก่อน
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
มุมมอง 9665 หลายเดือนก่อน
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
มุมมอง 11K6 หลายเดือนก่อน
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
มุมมอง 39K7 หลายเดือนก่อน
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
มุมมอง 9K7 หลายเดือนก่อน
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
มุมมอง 4.2K7 หลายเดือนก่อน
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.
really fantastic ...please we need videos like this
you sound like the "one whiskey and one coke" bear meme
Does this support svelte?
Thank you so much. This is helpful! Btw, do you have this kind of builder for vue.js?
would like to see this but with shadcn-vue
So cool!
Does it have hidden fields? so I can pass utm and other variables?
bro spitting facts. thank you
Thanks
The tool is very much buggy!
Fuck yeah! Thank you !
Can't wait till you hear about "WYSIWYG" editors xD
great video, this tool is a game changers, please share more
I still think autoform is much faster
Its more extensible, all code based and combined with z.infer and z.custom, it takes pretty much no time
It would be great to see how to handle sessions for both cases (credentials and something like google) and with roles management off course.
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
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
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
@@peterhryhorukyour 6th point answers your question :)
Thanks for sharing
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?
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
@@webdevjan can you explain more please?
Hey web , I really enjoyed your latest video! Your content has a lot of potential, and I specialize in helping creators grow their TH-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!
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.
ill take a builder over a nondeterministic AI that has rate limits, outages & is slow AF. what a weird thing to say.
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.
@@pookiepatsthey’re both tools, use whatever makes you more productive
This is awesome... I hope it stays maintained
I will be. I'll update weekly.
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 😅😂
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.
Insta sub when game changer is really a game changer
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
Would love to check that out. Do you have that shared somewhere?
@@adriandewinter7262 Schema from FormKit? But only for Vue, dunno for react.
@@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.
@@adriandewinter7262 what the hell, i replied and it got deleted
@@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
Omg 🙌 thanks for sharing my project. Thats the best video explains the work. I understand the feedbacks. I'll update agan in soon
You're welcome! Thanks for sharing this amazing tool for free with the community, keep it up. :)
It definitely caught my eye. Writing out zod form validation takes forever
@@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.
That's an amazing project man. Will definitely use in my projects.
Superheroes don't always wear capes ❤
thanks for sharing 🙏
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.
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. :)
Good job
Really amazing
Wow, you explaining skill are so good. Subbed you and turned on notification as well. Please keep making more videos like this
always making top notches video ❤
Appreciate it!!
Holy shit! This is a game changer! Thank you so much for sharing this!
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
Great video, thanks for sharing!
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
Probably not, since the components have code snippets that have "use client" at the top, which means it's rather made for nextjs users. :)
@@webdevjan Yh I noticed that.
Thanks!! It will save so much time.
awesome !
thanks for sharing 'Jan" , Jan in Urdu /Hindi mean Dear Loverly
You're welcome! Always nice to learn something new
It's the same in Bangla too 😅
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
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.
@@haskupthanks a lot
Best Video Straight To The Point ❤
Please a part 2 series !!! I like your style of tutorial. Thankssss
best tutorial
Very much appreciated. Thanks for the video. 👍
OK but you're just using localhost in your GitHub setup, that's not going to work in production so what's the point?
change it to live when ready?
Apparently they changed it to be GitHubProvider (Hub is capitalized)
In their documentation they say to make a file called [...nextauth].js but you are making a folder called that. Why the difference?
du bist ne süße maus
So great! Thank you!
No BS guide to Oauth with a very minimal example , really great work