Traversy Media
Traversy Media
  • Видео 977
  • Просмотров 213 796 928
Admin Dashboard From Scratch - Next.js, TypeScript, Shadcn/ui
In this video, we will build a dashboard interface from scratch.
Check out the sponsor, Mailtrap:
l.rw.rw/traversy_media
Full Source Code:
github.com/bradtraversy/traversypress-ui
This project will use the following technologies:
- React/Next.js
- Shadcn/ui
- TypeScript
- Tailwind CSS
- Recharts
- Lucide React
- React Hook Form & Zod
Full Next.js Course:
www.traversymedia.com/nextjs-from-scratch
Udemy Version:
www.udemy.com/course/nextjs-from-scratch
Timestamps:
0:00 - Intro
4:02 - Project Setup
9:18 - Initialize Shadcn/ui
10:37 - Using Shadcn Components
12:54 - Navbar, Avatar, Dropdown Components
24:04 - Sidebar & Command Component
33:40 - Dashboard Cards
39:55 - Make The Cards Dynamic
44:13 - Posts Data Array &...
Просмотров: 32 671

Видео

The Importance of Specialization in Coding
Просмотров 177 тыс.Месяц назад
Many people want to learn everything, which is impossible. Pick a tech stack and learn as much as you can about that group of technologies. It will make you more valuable than being a jack of all trades. Check out My Courses: traversymedia.com
Express Crash Course (2024 Revamp)
Просмотров 45 тыс.Месяц назад
Get started with the most popular web framework for Node.js. Code from Video: github.com/bradtraversy/express-crash/ Node.js Crash Course: ruclips.net/video/32M1al-Y6Ag/видео.html 14 Hour Node.js API Masterclass Course: www.traversymedia.com/node-js-api-masterclass Timestamps: 0:00 - Intro & Slides 0:53 - What is Express? 2:28 - Opinionated vs Unopinionated 4:10 - Prerequisites 5:18 - What we'l...
Node.js Crash Course (2024 Revamp)
Просмотров 94 тыс.Месяц назад
This is an intro to Node.js. No frameworks or libraries. We will look at a bunch of the core modules including building a server with the http module. Code: github.com/bradtraversy/nodejs-crash-2024 Express Crash Course: ruclips.net/video/CnH3kAXSrmU/видео.html Node.js API Masterclass: www.traversymedia.com/node-js-api-masterclass Timestamps: 0:00 - Intro & Slides 12:18 - Installation 13:22 - N...
20 Browser Extensions For Web Design & Development
Просмотров 47 тыс.2 месяца назад
Let's take a look at some browser extensions for web designers and developers. This includes Chrome extensions and Firefox Addons that help with design, testing, debugging, productivity and more. Full Article With Links: www.traversymedia.com/blog/20-browser-extensions Timestamps: 0:00 - Intro 2:10 - ColorZilla 2:53 - WhatFont 3:22 - Wappalyzer 4:13 - Web Developer 5:24 - Dark Reader 5:52 - JSO...
Microservices Crash Course & Moleculer JS Intro
Просмотров 37 тыс.2 месяца назад
An introduction to the microservices architecture and the Node.js Moleculer framework. Course Code: github.com/bradtraversy/microservices-example Moleculer Framework: moleculer.services/ Check out my courses: traversymedia.com Social Media: Github - github.com/bradtraversy Twitter - traversymedia Instagram - traversymedia Facebook - traversymedia Linkedin ...
React Crash Course 2024
Просмотров 298 тыс.2 месяца назад
Learn the basics of React, such as components, props, state, data fetching, and more, while building a job listing frontend. Code: github.com/bradtraversy/react-crash-2024 React Front To Back Full Course: www.traversymedia.com/Modern-React-Front-To-Back-Course Check out all my courses: traversymedia.com Social Media: Github - github.com/bradtraversy Twitter - traversymedia Instagram...
20 Essential VS Code Extensions In 2024
Просмотров 136 тыс.3 месяца назад
20 extensions for Visual Studio Code to increase your productivity. Check out my courses: traversymedia.com Social Media: Github - github.com/bradtraversy Twitter - traversymedia Instagram - traversymedia Facebook - traversymedia Linkedin - www.linkedin.com/in/bradtraversy Timestamps: 00:00 - Intro 1:08 - Prettier 1:56 - GitHub Copilot 3:05 - Live Server 3...
Exploring React 19 Features - use() Hook, Actions & More
Просмотров 55 тыс.3 месяца назад
In this video, we will look at some of the features of React 19 including the React compiler, use() hook, form actions, new hooks like useFormState(), useFormStatus() and useOptimistic(). Code: github.com/bradtraversy/react-19-playground Check out my courses: traversymedia.com Social Media: Github - github.com/bradtraversy Twitter - traversymedia Instagram - traversyme...
Tailwind & JavaScript Project - Products Filtering UI
Просмотров 25 тыс.3 месяца назад
In this project, we will create a product list using Tailwind CSS, and we will add filtering and add-to-cart functionality with JavaScript. Code: codepen.io/bradtraversy/pen/oNVKXBo 20 Projects Course: www.traversymedia.com/20-Vanilla-JavaScript-Projects Vanilla Projects Repo: github.com/bradtraversy/vanillawebprojects Blog Post: www.traversymedia.com/blog/product-filtering-ui 0:00 - Intro 2:02...
Next.js 14 Course Release With Promo
Просмотров 27 тыс.3 месяца назад
$15 PROMO CODE: NEXT2024 TRAVERSY MEDIA: www.traversymedia.com/nextjs-from-scratch UDEMY: www.udemy.com/course/nextjs-from-scratch/?couponCode=NEXT2024
Stop Worrying About AI!
Просмотров 48 тыс.4 месяца назад
In this quick video, I will share my opinion on AI and how it will affect software development. Check out my premium courses: traversymedia.com Social Media: Github - github.com/bradtraversy Twitter - traversymedia Instagram - traversymedia Facebook - traversymedia Linkedin - www.linkedin.com/in/bradtraversy
Web Development In 2024 - A Practical Guide
Просмотров 350 тыс.4 месяца назад
My annual guide to every web development technology that you can think of. We cover everything including frontend, backend, full stack, DevOps and more. Check Out My Courses: www.traversymedia.com Content Guide: www.traversymedia.com/guide Premium eBook Version: traversy.gumroad.com/l/web-dev-guide Timestamps: 0:00 - Intro 1:12 - About This Guide 2:43 - Developer Roles 7:15 - Developer Goals 11...
HTMX Crash Course | Dynamic Pages Without Writing Any JavaScript
Просмотров 134 тыс.5 месяцев назад
Learn HTMX by creating a couple of small projects with a Node.js and Express backend, including a contacts search, temperature converter, mock weather app with polling and form validation component. We will learn about the common HTMX attributes like hx-get, hx-post, hx-swap, etc. Final Code: github.com/bradtraversy/htmx-crash-course Alpine Crash Course: ruclips.net/video/r5iWCtfltso/видео.html...
Should You Test As A Web Developer?
Просмотров 28 тыс.5 месяцев назад
A chat about writing tests as a web developer. I talk about what testing is, the benefits, types of testing, and when and if you should write tests for your projects. Check out my premium courses: traversymedia.com Jest Crash Course: ruclips.net/video/7r4xVDI2vho/видео.html React Testing Course: ruclips.net/video/7r4xVDI2vho/видео.html TDD Course: ruclips.net/video/u5cLK1UrFyQ/видео.html Timest...
Astro Quick Start Course | Build an SSR Blog
Просмотров 49 тыс.5 месяцев назад
Astro Quick Start Course | Build an SSR Blog
Vue 3 & Composition API - Full Project
Просмотров 119 тыс.7 месяцев назад
Vue 3 & Composition API - Full Project
Are You Too Dumb To Code? A Chat About Imposter Syndrome
Просмотров 65 тыс.7 месяцев назад
Are You Too Dumb To Code? A Chat About Imposter Syndrome
Professional Website From Scratch | HTML & CSS For Beginners
Просмотров 120 тыс.8 месяцев назад
Professional Website From Scratch | HTML & CSS For Beginners
15 Web Developer-Related Career Paths
Просмотров 124 тыс.8 месяцев назад
15 Web Developer-Related Career Paths
Bun Crash Course | JavaScript Runtime, Bundler & Transpiler
Просмотров 66 тыс.8 месяцев назад
Bun Crash Course | JavaScript Runtime, Bundler & Transpiler
Prisma Crash Course
Просмотров 57 тыс.9 месяцев назад
Prisma Crash Course
New Course Alert - JS Challenges: Data Structures & Algorithms
Просмотров 34 тыс.9 месяцев назад
New Course Alert - JS Challenges: Data Structures & Algorithms
Modern JavaScript From The Beginning | First 12 Hours
Просмотров 522 тыс.10 месяцев назад
Modern JavaScript From The Beginning | First 12 Hours
Simple Next.js & React Authentication With Clerk
Просмотров 49 тыс.11 месяцев назад
Simple Next.js & React Authentication With Clerk
Write A ChatGPT Chatbot With Node.js
Просмотров 80 тыс.11 месяцев назад
Write A ChatGPT Chatbot With Node.js
Build A RealTime Chat App With React & Appwrite Cloud
Просмотров 62 тыс.11 месяцев назад
Build A RealTime Chat App With React & Appwrite Cloud
New Bootstrap 5 Course & Why Bootstrap?
Просмотров 40 тыс.11 месяцев назад
New Bootstrap 5 Course & Why Bootstrap?
MERN Crash Course | JWT Authentication, Redux Toolkit, Deployment & More
Просмотров 295 тыс.Год назад
MERN Crash Course | JWT Authentication, Redux Toolkit, Deployment & More
ChatGPT Crash Course | 10 Practical Use Cases For Developers
Просмотров 162 тыс.Год назад
ChatGPT Crash Course | 10 Practical Use Cases For Developers

Комментарии

  • @mayankomar1616
    @mayankomar1616 3 минуты назад

    how do we handle Errors using usehook

  • @ROKKama
    @ROKKama 50 минут назад

    Hello Brad, thank you very much for this tutorial , newbie to astro and typescript here 😅.

  • @muhammadzoraizkhan8654
    @muhammadzoraizkhan8654 Час назад

    Appreciate It! Thanks. You Got Yourself A New Subscriber. That's The Least What I Can Do To Thank You.

  • @user-dz1dr6wq1u
    @user-dz1dr6wq1u 3 часа назад

    PLEASE! WRITE DOWN what extensions he uses?

  • @Sam-de8tc
    @Sam-de8tc 4 часа назад

    Some features are missing compared to the hosted version were could I get the complete tutorial.

  • @moofymoo
    @moofymoo 5 часов назад

    I can! just stop making new javascript frameworks, please!

  • @thomaswatson4927
    @thomaswatson4927 9 часов назад

    Looks like I'm a late bloomer. All of the comments are 5 years ago. Love the tutorial, helps me a lot. Wish the link to the file was still good though. Maybe it would be helpful? But since I cant see it I dont know.

  • @phonlawutchansri7083
    @phonlawutchansri7083 20 часов назад

    Seem easy

  • @vabhynadar
    @vabhynadar 21 час назад

    Really great tutorial. I enjoyed following along.

  • @bigtynsonly3866
    @bigtynsonly3866 22 часа назад

    How can i access the link for the figma file? Whenever i click on it, it automatically downloads but i can't access it.

  • @Piyush_Kumbhare
    @Piyush_Kumbhare 22 часа назад

    You saved me a lot of time by making this usefull tutorial. I've been looking for resources to learn command line and there you came! Thank you so much for the lovely tutorial.

  • @user-qu1yb7ym1q
    @user-qu1yb7ym1q День назад

    thank you for the easy explanation!

  • @AshuChoudhary-tx4ve
    @AshuChoudhary-tx4ve День назад

    I am unable to import item_todo components to my TodoAdapter file, pls help

  • @qqwertyzzxcvb1921
    @qqwertyzzxcvb1921 День назад

    Nice tutorial .

  • @amosfigueira894
    @amosfigueira894 День назад

    Fantastic Brad, thanks for sharing

  • @enzigenes
    @enzigenes День назад

    People feel they need to learn everything because jobs want you to know everything. To be a master of everything. Which is why I stopped job searching for jobs as a developer. I just code for fun and keep learning.

  • @ayoolagabriel5147
    @ayoolagabriel5147 День назад

    Thanks so much Brad, for words of encouragement. You helped me so much as a front end developer. All your contents on any courses are always great and impactful. Thanks for impacting life in the area of Tech.

  • @jayjenous7601
    @jayjenous7601 День назад

    men, I finished the whole course, this helped me a lot to understand react

  • @Piyush-yp2po
    @Piyush-yp2po 2 дня назад

    revised entire vanilla js from your playlist this week, loved them.

  • @michelesherokee567
    @michelesherokee567 2 дня назад

    Thanks Brandon! I learned a significant amount of things in this video. Many things that we covered in my BootCamp were and then some! You're super easy to follow. Best!

  • @stephenlittle7688
    @stephenlittle7688 2 дня назад

    Getting error Missing "./env/setup" specifier in "astro" package not sure what I missed

  • @jkbrodotdev
    @jkbrodotdev 2 дня назад

    At 34:27, wasn't Live Server doing the reload on save for the HTML doc? My assumption was you were supposed to update the .ts file and that should have updated the bundle.js

  • @omarjones8481
    @omarjones8481 2 дня назад

    how do you get the dark theme when creating new react app? I have dark mode on my chrome but my Vite + React page is bright. Thanks in advance

  • @charlesjojovandyck3275
    @charlesjojovandyck3275 2 дня назад

    Finally done with this course the fulfillment you feel within. Thank Champ

  • @AfolabiJude
    @AfolabiJude 2 дня назад

    TypeError: program.version is not a function solution: const { program } = require('commander');

  • @Doxa-wl4hb
    @Doxa-wl4hb 2 дня назад

    wow

  • @brunob.7792
    @brunob.7792 2 дня назад

    on my 29 year carreer assuming different roles in different businesses areas, i can confirm you technical people, MUST know a bit of everything. All these years i had to face difficulties interacting with IT personnel, that were completely lost and confuse to deal with. Had to deliver several projects, and everytime i had the need to interact with IT personnel i've noticed this same problem ocurring. People very smart, but focused in a specific area or language and my projects needed a holistic view, considering multiple factors. Never pay attention for those you need to be specialist. World is completely different now. YES, you need to know everything and well

  • @MiladJoodi
    @MiladJoodi 2 дня назад

    Great. Thank a million ♥

  • @hiendinh3871
    @hiendinh3871 2 дня назад

    Sat 15 Jun 08:51 Status: Completed (but yesterday) happy learning!

  • @WernerDeKesel
    @WernerDeKesel 2 дня назад

    Also for me this is the best and most extensive version. Thanks, learned a lot.

  • @coderschannel4270
    @coderschannel4270 3 дня назад

    nice video sir I learn a lot about netlify

  • @jayjenous7601
    @jayjenous7601 3 дня назад

    I liked the react course, I finished it, thanks again Brad

  • @sorcererstone3303
    @sorcererstone3303 3 дня назад

    Since the video said node.js built on v8 engine, does it work in browser other than Chrome such as Firefox?

  • @oliver.studio
    @oliver.studio 3 дня назад

    Great, Thank you for the video.

  • @sunilc2290
    @sunilc2290 3 дня назад

    I have been working on Angular. Net core. I see on LinkedIn job postings and see that majority jobs need react and node. So what to do

  • @m24661
    @m24661 3 дня назад

    You're a real world hero Brad !

  • @wondersled5948
    @wondersled5948 3 дня назад

    You're an amazing teacher! All of the concepts were masterfully explained, and I grasped them almost immediately. I'll mess around with Kotlin a little to get a hold of its in and outs, and then I'll watch your video lesson on app development. Thanks again!

  • @rossinidesigner1
    @rossinidesigner1 3 дня назад

    Thank you so much! What an amazing material!!!

  • @lindas8898
    @lindas8898 3 дня назад

    25:05 "Let me just snap this over here". What was done there? Did that browser window then become part of VS Code?

  • @stanleylafond4650
    @stanleylafond4650 3 дня назад

    Go Celtics!

  • @mahendranm2699
    @mahendranm2699 3 дня назад

    give next js revamp

  • @Piyush-yp2po
    @Piyush-yp2po 3 дня назад

    As a java programmer it was very familiar to learn.

  • @jordigonzalez6672
    @jordigonzalez6672 3 дня назад

    Really helpful, thanks

  • @codingman313
    @codingman313 3 дня назад

    Brad is 37.

  • @EhabReda-gd2mr
    @EhabReda-gd2mr 3 дня назад

    Thank you Brad

  • @Mari_Selalu_Berbuat_Kebaikan
    @Mari_Selalu_Berbuat_Kebaikan 3 дня назад

    Let's always do alot of good

  • @Sijo2
    @Sijo2 3 дня назад

    Thank you for your video. I hate grid and try to avoid it as much as possible. This video on flex really helped

  • @prathamsrivastava5232
    @prathamsrivastava5232 3 дня назад

    completed

  • @Sijo2
    @Sijo2 3 дня назад

    I hate grid, because it has so many components. Your video really helped me understand how to use various tools in grid. Thank you

  • @user-kh6rp6yx1j
    @user-kh6rp6yx1j 4 дня назад

    Hey man,