Simplest way to build Admin Area (Next.js, Shadcn, TypeScript, Forms)

[@orcdev]

Hope you enjoyed! Join the mighty Horde! Subscribe and wield the power! ⚔

[@cyrilalonzo7430]

Didn't realize how great shadcn/ui is until I see this vid! Thanks mate!

[@orcdev]

You're welcome! Glad you liked it! ⚔ Great thing is that Shadcn is constantly adding new components, and they are actually listening to developers on GitHub :D

[@AIDragonMusic]

I still can't believe how easy it is to implement a responsive data table. Thank you so much for this-it was incredibly helpful!

[@orcdev]

I'm glad you found the tutorial helpful! It's really so nice to work with Shadcn, that grabbing of data table in lift mode and just putting it inside the project feels good :D

[@techdomain382]

Slowly you're becoming a favourite of mine for tips and tricks. You've always preached shadcn but today you converted me. I am gougn to recreate thus completely and then hopefully integrate it into a minor project I'm working on.

[@orcdev]

Thank you very much for such a nice comment! ⚔️ Now you are hooked on Shadcn :D You’ll see it will be easy to create this admin page. If you need any help for that project tell me, I can make a video, or give you some tips if needed.

[@Lebacbemti]

So engaging and fun. You gained a new subscriber! :)

[@orcdev]

Thank you! Appreciate it! Hvala! :D

[@anuj7286]

This is a speedy tutorial to understand all these. Thank you!

[@orcdev]

You're welcome! I'm glad you found it useful! Thank you for the comment! ⚔

[@anuj7286]

I feel the voice is a little low.

[@orcdev]

@@anuj7286 You mean the sound of the video?

[@anuj7286]

@@orcdev Yes sir, rest of things are fine.

[@orcdev]

@@anuj7286 Thanks for the heads up. I'll try to deal with my mic :D

[@SuperArnie1974]

Loved it thank you used as a work project to replace Gdocs easy to understand and learnt a lot 😊

[@orcdev]

I'm glad you loved it! ⚔ Magic of Shadcn is easy usage, that's why it's so easy to understand :)

[@SuperArnie1974]

I don't suppose you will be adding anymore functionality to this to handle logged in users?

[@orcdev]

@@SuperArnie1974 Actually planned to create complete logic for this admin with NextAuth, Drizzle and tRPC. What do you think, would that be useful to you?

[@SuperArnie1974]

Sounds excellent

[@orcdev]

@@SuperArnie1974 Great! I'll publish that next week! ⚔

[@awakenwithoutcoffee]

this is great man, appreciated so much! Why don't you make this as a series and start building upon this ? I would love to see more on connecting databases, how to build out more pages, user Auth etc. :)

[@orcdev]

Thank you very much! I'm glad that you find it helpful. That's actually a great idea, adding db here, with users, auth, roles etc would be a great project for making more videos :) I'll try it out!

[@awakenwithoutcoffee]

@@orcdev looking forward to them! We have so much opportunity to create amazing applications. I am also eager to try out a python back-end to React front-end for AI applications.

[@orcdev]

@@awakenwithoutcoffee Absolutely! Combining Python for the back-end with React for the front-end opens up a world of possibilities, especially for AI applications. For me it's easier to use TypeScript on both ends, but that's just my personal preference :D

[@raheeldharolia2673]

Awesome. keep up the good work

[@orcdev]

@@raheeldharolia2673 Thank you very much! Appreciate the support! ⚔️

[@hitvaghani8039]

you are doing great work! Subscribed.

[@orcdev]

So glad to hear that! Thanks man, really appreciate it! Welcome to the mighty Horde! ⚔

[@rodrigosoares5207]

Amazing! You help me a lot. Thak you so much

[@orcdev]

Glad to hear that! You’re welcome! ⚔️

[@eliuddyn]

Amazing 🔥🔥

[@orcdev]

Thank you very much! Glad you liked it! ⚔️

[@SK_Covers]

Awesome 💯❤

[@orcdev]

Thank you! ⚔️

[@chautruongnguyenminh2696]

how can display result data after search in same page ?

[@orcdev]

Just by using server actions, and calling it asynchronously on the client side. Filters are coming from the url. If you have any specific questions, I'm here :)

[@vamsimonohar]

Your video is really good! I have to know, what keyboard are you using?

[@orcdev]

Thank you very much! Glad you liked it! I'm using Apple Magic Keyboard :D

[@terteyty6125]

nice project :)

[@orcdev]

Thank you brother! Appreciate it! ⚔

[@the_beckers_food]

What happened with the naming conversion for components? Components are added in lowercase instead. Any suggestion?

[@orcdev]

There is no real convention in Next.js for file names, you can basically name it MyComponent, myComponent or my-component. Thing is that Shadcn is adding all components in kebab case, so it's easier to just keep the same filename. I was also struggling with that, because previously I named all my components in pascal case "MyComponent". After changing to kebab gotta say it's little bit more neat, especially if you have storybook, tests and multiple files in your component directory. So if you have my-component dir, your component is my-component.tsx, story is my-component.stories.tsx, and test component my-component.test.ts This is a good subject for a video :D

[@the_beckers_food]

@@orcdevThank you for the explanation.

[@عليحامد-ك9ب]

very good video

[@orcdev]

Thank you! I'm glad you liked it!

[@amingrateful7661]

seems like we can add more than one shadcn component at the same time with: `npx shadcn@latest add sheet button input`

[@orcdev]

Yeah, that's a great point :D From some reason I always run bunch of: npx shadcn@latest add sheet npx shadcn@latest add button npx shadcn@latest add input Thanks for pointing it out :D

[@StephenRayner]

Decent

[@orcdev]

Thanks! ⚔️

[@pmshadow]

Thanks for the video. You could have used layout.tsx to mimic a more real dashboard application instead of page.tsx. Still, very good video!

[@orcdev]

You're welcome! Yes I agree, I should've placed everything in the `layout.tsx`. I'm planning on creating exactly the same admin panel, but this time with db, api calls, good component placement etc So I'll fix that for sure :) Thank you!

[@maduemeka6982]

❤❤❤❤

[@orcdev]

@@maduemeka6982 ⚔️⚔️⚔️

[@Nulimitz]

npm install "thingy"

[@orcdev]

If I said that I'm sorry :D Trying to be as clear as possible!

[@Nulimitz]

@@orcdev No I think its cool. I appreciate it. I struggle with Tailwind and this tutorial helped me out a lot. Also looking at the second admin tutorial.

[@orcdev]

@@Nulimitz I'm glad you find it helpful! That second one is bigger picture in some way. Making it fullstack makes it actually useful.

[@Racine14]

Good job @orcDev

[@orcdev]

Thank you! Appreciate it ⚔️

[@neerajverma9226]

We also want backend supports

[@orcdev]

What do you mean exactly? Videos with more backend?