Brett Westwood - Software Engineer
Brett Westwood - Software Engineer
  • 65
  • 582 990
I Created My OWN Components with Shadcn CLI and You Can Too!
Shadcn just updated their CLI with a lot of ground breaking new changes.
The biggest change is being able to install remote components using just a URL.
You can create a json file and make it publicly accessible allowing you to use the Shadcn CLI to work with your remote URL that is pointed toward that json file.
In this video, I will show you how to create your own component/block and configure it to make it accessible with the Shadcn CLI.
This allows you to share the command with yourself, friends and other developers so they can add that component your created to their codebase.
Link to Shadcn GitHub Open Source 👇
github.com/shadcn-ui/ui/tree/main/apps/www
Link to my side bar block 👇
www.uicart.io/docs/sidebar-01
Link to GitHub repo for script tag 👇
github.com/bwestwood11/ui-cart/blob/main/scripts/build-registry.ts
Link to Shadcn CLI docs 👇
ui.shadcn.com/docs/changelog
Join my Discord room to interact with other developers 👇
discord.gg/jThDV4nnwS
Timestamps
0:00 Intro
0:37 What is the Shadcn CLI and how to use it
2:14 Going over the changelog
3:26 Showing example of remote URL usage with CLI
4:49 Shadcn CLI I created and so can you
5:35 Shadcn CLI GitHub Repo Open Source
7:56 Step-by-Step on how to create a json file for custom component with Shadcn CLI
15:18 Outro
Переглядів: 2 302

Відео

The BEST Way To Create Server Actions - Next.js
Переглядів 1 тис.3 місяці тому
zsa is a library that allows for developers to create typesafe server actions inside a Next.js application. zsa actually stands for Zod Server Actions and utilizes zod for creating type safety within your code. We will go over how to create server actions with the zsa library, how to create procedures (aka middleware) and much more. Timestamps 0:00 Intro 0:32 What is zsa (Zod Server Actions)? 1...
I Built A Startup in 1 Month (SaaS)
Переглядів 1,6 тис.4 місяці тому
ChatBuild.io is the startup I built which is an AI chatbot builder that can be trained on your own data points and then integrated onto your website. In this video, I go over what I built, why I built it, how I built in, marketing techniques for SaaS/startup businesses and how many customers I currently have. I used Next.js to code the startup, along with other technologies that aide in the dev...
Stripe Webhooks - The Ultimate Guide
Переглядів 8 тис.5 місяців тому
In this video, I go step by step on how you can use Stripe webhooks in a React.js/Next.js application. Stripe webhooks listen to events in your Stripe account and allow you to trigger functions when a specific event is triggered. You can test out the Stripe webhook in your development server with the Stripe CLI. After watching this video, you should be able to successfully setup Stripe webhooks...
How To Send A Verification Email using Next-Auth - Step by Step (Detailed)
Переглядів 2,9 тис.5 місяців тому
GitHub Repo Link 👇 github.com/bwestwood11/verification-email-token-authjs Join our Discord server to interact with other developers 👇 discord.gg/rKXNDnE32N In this video, I teach you how to create a verification token so you can send it to the user after they register for an account. This will allow them to verify their email by clicking the link we send them which in turn will allow them to lo...
Build a Form with Validation using Shadcn/ui - Step by Step
Переглядів 12 тис.7 місяців тому
Build a Form with Validation using Shadcn/ui - Step by Step
Create A Fully Functional Search Bar in Next.js 14 - Step by Step
Переглядів 7 тис.7 місяців тому
Create A Fully Functional Search Bar in Next.js 14 - Step by Step
How To Use The Email Provider - Auth.js
Переглядів 4,1 тис.8 місяців тому
How To Use The Email Provider - Auth.js
How To Use MongoDB Triggers - Super Easy
Переглядів 1,9 тис.10 місяців тому
How To Use MongoDB Triggers - Super Easy
How To Use Next.js 14 Server Actions
Переглядів 26 тис.10 місяців тому
How To Use Next.js 14 Server Actions
The Ultimate Guide To Next.js Route Handlers - CRUD
Переглядів 6 тис.Рік тому
The Ultimate Guide To Next.js Route Handlers - CRUD
Create A Simple Booking Component - Full Stack
Переглядів 3,4 тис.Рік тому
Create A Simple Booking Component - Full Stack
Send Emails with Next.js 13 - The Best & Easiest Way
Переглядів 23 тис.Рік тому
Send Emails with Next.js 13 - The Best & Easiest Way
Shadcn/ui - Game Changer UI Library
Переглядів 7 тис.Рік тому
Shadcn/ui - Game Changer UI Library
Next Auth - JWT & Session Callback & How to Update User Session
Переглядів 48 тис.Рік тому
Next Auth - JWT & Session Callback & How to Update User Session
Next Auth Credentials Provider - Ultimate Guide
Переглядів 51 тис.Рік тому
Next Auth Credentials Provider - Ultimate Guide
5 Tailwindcss Tips & Tricks You Should Know
Переглядів 1,3 тис.Рік тому
5 Tailwindcss Tips & Tricks You Should Know
Connect Google Provider to Database - Next Auth
Переглядів 12 тис.Рік тому
Connect Google Provider to Database - Next Auth
Next.js 13 Crash Course | App Directory, Route Handlers, Server Components & More
Переглядів 10 тис.Рік тому
Next.js 13 Crash Course | App Directory, Route Handlers, Server Components & More
Build A Functional Search Bar with Next.js (SearchParams)
Переглядів 20 тис.Рік тому
Build A Functional Search Bar with Next.js (SearchParams)
Next.js 13 Data Fetching - The Ultimate Guide
Переглядів 40 тис.Рік тому
Next.js 13 Data Fetching - The Ultimate Guide
The Ultimate Beginners Guide to Building a Chatbot with OpenAI API - Chat GPT
Переглядів 457Рік тому
The Ultimate Beginners Guide to Building a Chatbot with OpenAI API - Chat GPT
Build A Fully Responsive Website Section with TailwindCSS and NextJS 13
Переглядів 3,4 тис.Рік тому
Build A Fully Responsive Website Section with TailwindCSS and NextJS 13
How to Use NextJS 13 Link and useRouter Like a Pro
Переглядів 10 тис.Рік тому
How to Use NextJS 13 Link and useRouter Like a Pro
Next Auth Google Provider - Tutorial - NextJS 13
Переглядів 10 тис.Рік тому
Next Auth Google Provider - Tutorial - NextJS 13
The Ultimate Guide to Next Auth - Everything You Need
Переглядів 58 тис.Рік тому
The Ultimate Guide to Next Auth - Everything You Need
How To Easily Upload Folders/Files/Projects on GitHub - QuickStart Guide Repositories
Переглядів 338Рік тому
How To Easily Upload Folders/Files/Projects on GitHub - QuickStart Guide Repositories
Build a NextJS Fully Functional Register Page with API Endpoint, MongoDB & Prisma
Переглядів 4,6 тис.Рік тому
Build a NextJS Fully Functional Register Page with API Endpoint, MongoDB & Prisma
Build a Stripe Checkout with Next.js 13
Переглядів 23 тис.Рік тому
Build a Stripe Checkout with Next.js 13
Build a Fullstack Login & Register Page with MERN (react.js, mongo, express, bcrypt, jwt & more)
Переглядів 86 тис.Рік тому
Build a Fullstack Login & Register Page with MERN (react.js, mongo, express, bcrypt, jwt & more)

КОМЕНТАРІ

  • @chefnabil171
    @chefnabil171 19 годин тому

    Nice work Brett thank you so much

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

    Thank you bro, you helped me a lot!!!!

  • @dev-akeel
    @dev-akeel 5 днів тому

    kakwas 💖

  • @paulmothapo
    @paulmothapo 5 днів тому

    Can you cover stripe add on pricing🚨 Anyone worked with it, I need Help….

  • @adammo6661
    @adammo6661 5 днів тому

    Maaaan this literally saved my life. I was struggling to get both credentials with next auth working, but it does now. THANK YOU SOOOO MUCH

  • @furycorp
    @furycorp 5 днів тому

    shadcn cli is great for when you want to download code from random third parties on the internet and then immediately execute it.

    • @brettwestwooddeveloper
      @brettwestwooddeveloper 5 днів тому

      hahaha yea, but you can see the dependencies and review the json file quickly to make sure

  • @wesleycoder
    @wesleycoder 5 днів тому

    Awesome! I was planning on diving into shadcn's repo and figuring out how to do exactly this and your video appeared for me. This will save a lot of time. Also I don't know how shadcn handles it yet but I would recommend not using ` ` for line breaks as it screws with Mac and linux users if possible stick to only ` `.

    • @brettwestwooddeveloper
      @brettwestwooddeveloper 5 днів тому

      Thanks glad you enjoyed the video! And true /n probably is better over the contrary. I have to see how shadcn handles that

  • @DilukshanN7
    @DilukshanN7 6 днів тому

    Bro is underrated

  • @aayushdangi9558
    @aayushdangi9558 6 днів тому

    Thank you bro worked for me

  • @mohammadabdullahakbar3134
    @mohammadabdullahakbar3134 6 днів тому

    superb🤩

  • @jonathankurtis
    @jonathankurtis 7 днів тому

    nice job figuring out how it works without any docs yet.

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

    Amazing video

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

    Epic 🎉

  • @PavanSibal
    @PavanSibal 11 днів тому

    Nice tutorial Brett. Thanks. Can we further optimize by just pulling search based rows instead of filtering the whole table.

  • @marcelomatheus3959
    @marcelomatheus3959 11 днів тому

    The best video of MERN in YT

  • @CalkyesWebDevelopment-h4v
    @CalkyesWebDevelopment-h4v 12 днів тому

    for the sake of the tutorial I used mongoose instead of mongodb, I normally use mongodb but just so that I can follow along i'll use mongoose

  • @judoScott
    @judoScott 12 днів тому

    Greate video! Thank you so much for sharing!

  • @artalfredbernales8848
    @artalfredbernales8848 12 днів тому

    Can you create a tutorial on how to deploy mern app in Vercel

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

    very great tutorial, I have a question about redirection on the localhost with CORS, for some reason it did not work for me

  •  15 днів тому

    Great Tutorial man

  • @brendansullivan4872
    @brendansullivan4872 15 днів тому

    If you put those in a .env file a nice way to get hacked is to look in your build folder an retrieve it from inspect menu.

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

      Curious, so you are saying somebody can hack a .env file?

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

      It blew my mind when I saw it but while at work what happened was a friend of mine goes into the build (sources I believe) and you can see the values directly in there because it gets injected when you build. The good news is the config file for firebase with the api key measurement etc is meant to be public facing. Not very usable for the hacker since you set the rules on the backend for Firestore and the real-time db etc. what you want to add though is app check. That buries any hacker trying to pull some shit because you can put recaptcha v3 where it’s automatic. When you do this you can choose any firebase add on to be enforced with it and they are blocked.

  • @webshipon1941
    @webshipon1941 17 днів тому

    Joss sir 🔥🔥🥰🥰

  • @ritwikpai2517
    @ritwikpai2517 18 днів тому

    Thanks a lot! I was struggling to find the correct solution. Your video helped a lot. 👍👍

  • @darlinmanuelcasadoperez1092
    @darlinmanuelcasadoperez1092 20 днів тому

    Thank you for the great tutorial! keep up the good work buddy!

  • @artsypavi
    @artsypavi 23 дні тому

    bro i need help how do i add logout to this and also the frontend css for the pages??

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

      I will be adding a new tutorial going over a full authentication process using the MERN stack.

  • @justinrivera6749
    @justinrivera6749 24 дні тому

    Definitely best tutorial I’ve seen for forms with shadcn, RHF and Zod. Curious if there’s a reason you validate passwords matching on the backend versus validating this on the client side? I’m just a hobby developer starting to learn about backend. Would it not be quicker to validate this as they’re filling out the form vs sending data to the backend and then waiting for an error response?

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

      Hi thanks for the kind words! Best practice is to check if passwords match on both the client and server side. I am pretty sure you can use React Hook Forms for client side validation. Also, you should check it in backend before sending to your database.

  • @UJJAWALKAUL
    @UJJAWALKAUL 25 днів тому

    can you add protecting dashboard route in this tutorial THE REST OF IT WAS ABSOLUTELY SPOT ON The only thing you missed was protecting route..im facing some problems there

    • @brettwestwooddeveloper
      @brettwestwooddeveloper 25 днів тому

      Yes, I will add protected routes in a new video. I am planning on creating another video going over next auth version 5

  • @co4160
    @co4160 25 днів тому

    GREEAAAT TUTORIAL!!

  • @singularity8027
    @singularity8027 26 днів тому

    thanks a lot dude.

  • @dipendrasingh4874
    @dipendrasingh4874 28 днів тому

    bro content was good , few issue i cant see the code , 2nd when u copy paste the code its really hard for a beginner to understand things

    • @brettwestwooddeveloper
      @brettwestwooddeveloper 25 днів тому

      Thank you and yes I will try to make the code more readable and try not to copy and paste.

  • @physicsimpossible73
    @physicsimpossible73 29 днів тому

    Hey this looks very nice! I have a question about how do you embed the chat widget onto the customer's website? Is it with web components?

    • @brettwestwooddeveloper
      @brettwestwooddeveloper 25 днів тому

      Thank you! And no, currently there is two ways to embed a chat widget on any website. One is to use a script tag that we provide so we can inject the chatbot's JavaScript and CSS into the website. Secondly, we have created a npm package mainly for Next.js websites and developers.

    • @physicsimpossible73
      @physicsimpossible73 25 днів тому

      @@brettwestwooddeveloper Got it, thanks for the reply. I'm trying to figure out how this injection works from a technical standpoint. If you build it using React (maybe with Next.js or CRA), how do you then extract it to a snippet that can be embedded by users with script tag? I heard this can be done using something called web components but you are not using them in this case?

  • @CarlosTello-m8h
    @CarlosTello-m8h Місяць тому

    nice video

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

    thank you sir think you

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

    This is what I was looking for, very well explained, thanks! Also, do you think you can build an app entirely with server actions and ditch apis?

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

      Thanks for the kind words! Yes, you can build an entire app with just server actions for sure. However, some apps that are more complex may need API endpoints.

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

    Bro you look like AI generated 🎉

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

    thx

  • @programmer.ngapak
    @programmer.ngapak Місяць тому

    thanks, dude. usefull video.

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

    thanks man ❤️❤️❤️

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

    Great tutorial💌

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

    Great video! Can u make other Models for example "gadgets" and connect them with users (one to one relation). Thanks

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

      Thanks for the kind words. I have been using Prisma and Next.js to create one to one relations. Haven't been using the MERN stack for a little bit now.

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

    wouldn't having the config secrets directly in the React app put security at risk? As it's Javascript and might be accessible in the UI. Is it possible to do the token generation on the backend? similar to when we do email/password login

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

      Yes you should have the config secrets in an .env file. Yes ideally you should do the token generation on the backend.

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

    please how we can rotat refresf token if we use a custome APi ?

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

      Thanks for the sub. I have never done this so I honestly can't answer this. I can definitely take a look into this more if I stumble upon it!

  • @CodeX-P2
    @CodeX-P2 Місяць тому

    Legend

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

    How did you fix the cookie in request header?

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

    Man, thanks!

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

    Great tutorial! For the next one, could you consider using an in-memory database like SQLite? It would help beginners avoid setting up accounts and real databases.

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

      Thanks for the comment. I don't use SQLite so I wont be able to make a tutorial video on it.

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

    Very nice and concise tutorial! I learned a lot from it. 👍

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

    great work. you're such a cool dude just subscribed. I wish you success

  • @FaridDiraf-l1b
    @FaridDiraf-l1b Місяць тому

    8:10 , if you want to import a component automatically, you should just keep this component open in your VS code tabs bar. You managed to import automatically only login and register components because they were open

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

    Thank you excellent work. Do you have any videos that might show how to add to this current build of booking certain rooms