React Crash Course 2024 @TraversyMedia

Traversy Media 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:
traversymedia.com/Modern-React-Front-To-Back-Course

Check out all my courses:
traversymedia.com

Social Media:
Github - github.com/bradtraversy
Twitter - twitter.com/traversymedia
Instagram - instagram.com/traversymedia
Facebook - facebook.com/traversymedia
Linkedin - linkedin.com/in/bradtraversy

Timestamps:

0:00 - Intro
1:55 - What Is React? (Slide)
3:43 - Why React? (Slide)
7:19 - What Are Components? (Slide)
8:21 - What Is State? (Slide)
10:00 - What Are Hooks? (Slide)
11:17 - What Is JSX? (Slide)
12:42 - SPA, SSR, SSG (Slide)
15:38 - Vite (Slide)
16:30 - Project Demo
19:53 - Setup React With Vite
22:29 - File Explanation
25:11 - Boilerplate Cleanup
26:48 - Tailwind CSS Setup
30:24 - JSX Crash Course
39:37 - Start Homepage
42:00 - Navbar Component
43:56 - Image Import
45:24 - Hero Component
46:17 - Props
48:00 - Default Props
48:51 - Wrapper Components
55:14 - JobListings Component
58:50 - Create Lists With map()
1:03:20 - Single JobListing Component
1:05:49 - Limit Jobs to 3
1:07:50 - useState() Hook & Desc Toggle
1:13:07 - Creating an Event
1:14:20 - Updating Component State
1:16:00 - React Icons Package
1:18:00 - React Router Setup
1:20:21 - Create Routes From Elements
1:21:36 - Router Provider
1:22:36 - Homepage Component/Route
1:24:40 - Layouts
1:29:06 - Jobs Page Component/Route
1:30:50 - Link Component
1:34:20 - Custom 404 Page
1:36:55 - Active Links With NavLink
1:41:00 - Conditional Rendering
1:43:10 - JSON Server Setup
1:47:00 - useEffect() & Data Fetching
1:53:07 - Loading Spinner
1:51:06 - Conditional Fetching
1:59:45 - Proxying
2:03:38 - Single Job Page
2:09:04 - useParams() to Get ID
2:12:25 - Data Loaders
2:16:36 - Single Job Output
2:22:00 - Add Job Page
2:23:40 - Working With Forms
2:30:05 - Form Submission
2:35:27 - Pass Function as Prop
2:39:32 - POST Request to Add Job
2:41:45 - Delete Job Button/function
2:45:12 - DELETE Request to Remove Job
2:46:50 - React Toastify Package
2:50:08 - Edit Job Page/Form
2:56:05 - Update Form Submission
2:58:54 - PUT Request to Update Job
3:02:10 - Build Static Assets For Production

updated 7 months ago

React Crash Course 2024

Traversy Media 2024-03-18 | 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:
traversymedia.com/Modern-React-Front-To-Back-Course

Check out all my courses:
traversymedia.com

Social Media:
Github - github.com/bradtraversy
Twitter - twitter.com/traversymedia
Instagram - instagram.com/traversymedia
Facebook - facebook.com/traversymedia
Linkedin - linkedin.com/in/bradtraversy

Timestamps:

0:00 - Intro
1:55 - What Is React? (Slide)
3:43 - Why React? (Slide)
7:19 - What Are Components? (Slide)
8:21 - What Is State? (Slide)
10:00 - What Are Hooks? (Slide)
11:17 - What Is JSX? (Slide)
12:42 - SPA, SSR, SSG (Slide)
15:38 - Vite (Slide)
16:30 - Project Demo
19:53 - Setup React With Vite
22:29 - File Explanation
25:11 - Boilerplate Cleanup
26:48 - Tailwind CSS Setup
30:24 - JSX Crash Course
39:37 - Start Homepage
42:00 - Navbar Component
43:56 - Image Import
45:24 - Hero Component
46:17 - Props
48:00 - Default Props
48:51 - Wrapper Components
55:14 - JobListings Component
58:50 - Create Lists With map()
1:03:20 - Single JobListing Component
1:05:49 - Limit Jobs to 3
1:07:50 - useState() Hook & Desc Toggle
1:13:07 - Creating an Event
1:14:20 - Updating Component State
1:16:00 - React Icons Package
1:18:00 - React Router Setup
1:20:21 - Create Routes From Elements
1:21:36 - Router Provider
1:22:36 - Homepage Component/Route
1:24:40 - Layouts
1:29:06 - Jobs Page Component/Route
1:30:50 - Link Component
1:34:20 - Custom 404 Page
1:36:55 - Active Links With NavLink
1:41:00 - Conditional Rendering
1:43:10 - JSON Server Setup
1:47:00 - useEffect() & Data Fetching
1:53:07 - Loading Spinner
1:51:06 - Conditional Fetching
1:59:45 - Proxying
2:03:38 - Single Job Page
2:09:04 - useParams() to Get ID
2:12:25 - Data Loaders
2:16:36 - Single Job Output
2:22:00 - Add Job Page
2:23:40 - Working With Forms
2:30:05 - Form Submission
2:35:27 - Pass Function as Prop
2:39:32 - POST Request to Add Job
2:41:45 - Delete Job Button/function
2:45:12 - DELETE Request to Remove Job
2:46:50 - React Toastify Package
2:50:08 - Edit Job Page/Form
2:56:05 - Update Form Submission
2:58:54 - PUT Request to Update Job
3:02:10 - Build Static Assets For Production

Create A Booking App From Scratch | React, Next.js, Appwrite, Tailwind

Traversy Media 2024-10-07 | In this 4-hour project-based course, we will build a booking app for meeting/conference rooms. We will be using React/Next along wth Appwrite, which is an open-source, all-in-one platform with databases, authentication, storage and more.

Visit Appwrite and claim $50 in free Appwrite Cloud Pro credits:
https://apwr.dev/traversymedia50

Final Code & Theme Files:
github.com/bradtraversy/bookit-app

Check Out My Courses:
traversymedia.com

Timestamps:
0:00 - Intro
1:30 - Project Demo
5:00 - Create Next App
6:40 - Prep & Clean Up
10:18 - Header Component
18:32 - Footer Component
19:53 - Homepage Rooms (JSON data)
22:32 - RoomCard Component
27:48 - Heading Component
28:49 - Room Details Page
38:20 - Apppwrite Project Setup
40:26 - Rooms Database, Collections & Attributes
44:10 - Add User & Room Data
47:03 - Permissions & API Key
48:15 - Environment Variables
51:16 - Create Appwrite Clients
57:52 - Get All Rooms
1:04:44 - Get Single Room
1:06:53 - Login & Register Pages/Forms
1:11:39 - Middleware in Next.js
1:15:21 - Protecting Routes
1:18:07 - Login & Create Session
1:26:00 - React Toastify Setup
1:34:36 - Logout & Destroy Session
1:43:18 - checkAuth Action
1:47:05 - Show/Hide Nav Links
1:51:00 - Global Auth Context
1:59:20 - Auth Wrapper
2:05:40 - Finish Route Protection
2:07:15 - Create User
2:16:50 - Add Room
2:32:04 - Storage Buckets & Image Upload
2:44:51 - Single Room Page Image
2:46:06 - My Rooms Page
2:59:04 - Delete Room
3:03:58 - DeleteRoomButton Component
3:08:38 - Bookings Collection Setup
3:11:32 - Book Room Action
3:21:32 - Booking Form
3:25:40 - Show Bookings
3:31:50 - BookedRoomCard Component
3:39:58 - Cancel Booking
3:51:07 - Check Room Availability
4:07:18 - Deploy To Vercel

Course Announcement - Laravel From Scratch

Traversy Media 2024-09-24 | $15 PROMO - LARAVEL2024
traversymedia.com/laravel-from-scratch

UDEMY:
udemy.com/course/laravel-from-scratch/?couponCode=LARAVEL2024

Encore Crash Course - TypeScript Backend Framework & Toolset

Traversy Media 2024-09-02 | This is a first look and crash course for Encore, which is a backend framework & entire backend toolset with a Rust runtime, API validation, integrated infrastructure, developer dashboard and much more. We will be building a URL shortener service.

Code:
github.com/bradtraversy/encore-url-shortener

Encore Website:
https://encore.dev

Timestamps:

0:00 - Intro
1:29 - Slides
7:41 - Installation & Setup
10:43 - Running Encore & Dev Dashboard
11:40 - Create Your First Endpoint
14:28 - URL Params
15:52 - Query Params
18:55 - Start URL Shortener
20:22 - URL POST Endpoint
23:41 - PostgreSQL & Migration
27:49 - Encore DB Shell
28:50 - URL GET Endpoint
32:41 - Deploy To The Cloud
33:51 - Test Cloud API With CURL

Ultimate Guide To Web Scraping - Node.js & Python (Puppeteer & Beautiful Soup)

Traversy Media 2024-08-13 | In this guide you will learn all about web scraping. We will go through some slides and then scrape a website using Node.js and the Puppeteer library as well as Python and the Beautiful Soup library.

Check Out Our Sponsor: Bright Data @BrightData
brdta.com/traversy

Code:
github.com/bradtraversy/web-scraper-youtube

Timestamps:
0:00 - Intro
2:01 - What Is Web Scraping?
2:58 - Legal & Ethical Considerations
3:42 - History Of Web Scraping
4:41 - Why Use Web Scraping?
5:53 - How Do Scrapers Work?
6:57 - Tools & Libraries
8:32 - Basic Steps
10:28 - Additional Steps
12:15 - What Are We Scraping?
15:03 - Node.js Web Scraper
33:44 - Python Web Scraper

15 Myths & Misconceptions In Web Developement

Traversy Media 2024-08-01 | In this video, we will discuss some common myths that surround web development.

Check Out My Courses:
traversymedia.com

Timestamps:
0:00 - Intro
1:01 - #1 One & Done
2:00 - #2 You Need To Learn Everything
2:34 - #3 You Need a Degree
3:37 - #4 Web Development is Easy
4:51 - #5 Front & Backend Are Completely Separate
6:09 - #6 Web Development Is Dead
7:23 - #7 Web Dev Is Just About Writing Code
8:16 - #8 Wordpress Developers Are Not Real Developers
9:45 - #9 You Need A Fancy Design
11:09 - #10 The More Features, The Better
11:46 - #11 You Need A Team
12:38 - #12 Not All Websites Need To Be Responsive
13:37 - #13 Websites Need To Be Perfect Before Launch
14:44 - #14 SEO Is Only About Keywords
15:35 - #15 You Always Need The Latest Technologies

5 Reasons Why Your Side Projects Are Failing

Traversy Media 2024-07-16 | Web development side projects often fail, including many of my own. Let's talk about some of the reasons why this happens with some examples from my own experience.

Check Out My Courses:
traversymedia.com

Social Media:
https://x.com/traversymedia
instagram.com/traversymedia
facebook.com/traversymedia
github.com/bradtraversy

Timestamps:
0:00 - Intro
1:28 - My History With SIde Projects
2:32 - Taking On Too Much
3:53 - Lack Of Proper Planning
5:59 - Unreasonable Expectations
7:37 - Neglecting Market Research
8:34 - No Or Bad Marketing

Vue.js Crash Course 2024

Traversy Media 2024-07-01 | 3 Hour crash course of the Vue.js framework. You will learn all the fundamentals including components, directives, lifecycle, events and much more.

Check Out Our Sponsor Daily.dev:
https://daily.dev/traversy-media

Full Project Code:
github.com/bradtraversy/vue-crash-2024

Blog Post:
traversymedia.com/blog/vue-crash-course

Check Out My Courses:
traversymedia.com

Timestamps:
0:00 - Intro
2:19 - Daily.dev Sponsor
3:11 - What is Vue.js?
4:45 - Prerequisites
6:17 - Role of Frontend Frameworks
8:40 - Why Vue.js?
11:14 - Vue Components
13:39 - Getting Setup
15:40 - Using The Vue CDN
20:54 - Create-Vue Setup
22:30 - Vue Official Extension
22:58 - Exploring Folders & Files
26:10 - Boilerplate Clean Up
26:50 - Component Structure
27:25 - Options API data() & Interpolation
28:36 - v-if, v-else & v-else-if Directives
30:43 - v-for Directive & Looping
32:17 - v-bind Directive
33:36 - v-on Directive, Events & Methods
35:55 - Composition API - Long Form
39:08 - ref() & Reactive Values
40:35 - Composition API Short Form
42:41 - Forms & v-model
46:38 - Delete task
48:36 - Lifecycle Methods
49:50 - onMounted & Fetching Data
51:58 - Vue Jobs Project Start
52:26 - Tailwind CSS Setup
56:47 - Theme Files & Images
58:16 - Navbar Component
1:01:20 - Hero Component
1:02:30 - Props
1:04:57 - HomeCards & Card Container Component
1:10:20 - JobListings Component & JSON Data
1:16:47 - JobListing Component
1:20:53 - JobListings Limit & showButton Props
1:24:26 - computed() & Truncate Description
1:30:41 - PrimeIcons
1:32:35 - Vue Router & Home View
1:39:52 - Jobs View
1:41:55 - RouterLink
1:46:07 - Navbar Active Link
1:50:42 - Not Found Page
1:56:27 - JSON Server REST API
1:59:50 - Fetch Data For JobListings
2:03:42 - reactive() Function
2:05:15 - JobListings Refactor To reactive()
2:07:26 - Vue Spinner
2:09:50 - Fetch Single Job & Display Data
2:19:06 -BackButton Component
2:21:03 - Proxying
2:23:54 - Add Job Page
2:32:20 - Save Job POST
2:37:15 - Toast Notifications
2:40:08 - Delete Job
2:44:14 - Edit Page
2:47:06 - Fetch Job To Edit
2:50:58 - Update Job
2:52:50 - Netlify Deployment

Full App Build - Dev to Deployment - Next.js, Prisma, Neon & Clerk

Traversy Media 2024-06-25 | Let's build a full stack app with some of my favorite technologies:

Neon (Sponsor) - https://fyi.neon.tech/traversy
Clerk (Sponsor) - go.clerk.com/BsG2XQJ
Prisma - prisma.io
Next.js - nextjs.org

Full Code Repo:
github.com/bradtraversy/expense-tracker-nextjs

Timestamps:
0:00 - Intro
2:04 - Links & Docs
3:24 - Create Next App
5:58 - Layout File
7:54 - Neon Project Setup
9:45 - New Database & Role
10:56 - Neon SQL Editor Demo
14:18 - Prisma Setup & Schema
15:20 - User Model
18:06 - Transaction Model
20:19 - Generate Client & Migrate
22:25 - Database File
25:29 - Clerk Authentication Setup
28:21 - Header Component
29:35 - SignIn, SignOut & UserButton
32:29 - Save User To Neon Database
42:26 - Guest Component
44:58 - AddTransaction Component
50:48 - addTransaction Action
59:36 - Get & Validate User
1:01:47 - React Toastify Setup
1:04:08 - Save Transaction to Neon Database
1:07:53 - useRef To Clear Form
1:09:36 - Balance Component
1:11:17 - getUserBalance Action
1:15:36 - addCommas() Utility Function
1:19:03 - Clerk Dashboard Users
1:19:49 - IncomeExpense Component
1:21:26 - getIncomeExpense Action
1:27:06 - TransactionList Component
1:29:22 - Transaction Type
1:30:40 - getTransactions Action
1:34:00 - TransactionItem Component
1:38:28 - Delete Button
1:41:07 - deleteTransaction Action
1:45:07 - Commas & Decimal Places
1:47:30 - Email/Password Test
1:48:35 - Vercel Deployment

Admin Dashboard From Scratch - Next.js, TypeScript, Shadcn/ui

Traversy Media 2024-06-03 | In this video, we will build a dashboard interface from scratch.

Check out the sponsor, Mailtrap:
https://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:
traversymedia.com/nextjs-from-scratch
Udemy Version:
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 & Types
47:50 - Posts Table
59:13 - Limit & Sort Posts
1:02:27 - Analytics Data & Types
1:04:30 - Analytics Chart & Recharts
1:11:10 - Posts Page
1:13:50 - Back Button Component
1:16:38 - Pagination Component
1:18:00 - Edit Post Page & Form
1:23:34 - Zod Form Schema
1:25:17 - Get Post Data
1:27:00 - useForm Hook
1:28:45 - Create Form
1:38:03 - Toast Component
1:42:29 - Dark Mode Toggler
1:49:48 - Auth Page & Layout
1:55:26 - Tabs Component
2:00:47 - Login Form
2:10:50 - Register Form
2:13:52 - Auth Page Theme Toggler

The Importance of Specialization in Coding

Traversy Media 2024-05-14 | 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

Traversy Media 2024-05-07 | Get started with the most popular web framework for Node.js.

Code from Video:
github.com/bradtraversy/express-crash

Node.js Crash Course:
youtube.com/watch?v=32M1al-Y6Ag

14+ Hour Node.js API Masterclass Course:
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'll cover
6:45 - Express Setup
9:00 - Basic Server
13:10 - --watch Flag & NPM Scripts
15:25 - res.sendFile() Method
18:00 - Static Web Server
19:48 - Working with JSON
22:35 - Postman Utility
23:45 - Environment Variables (.env)
26:30 - Request Params (req.params)
29:35 - Query Strings (req.query)
33:19 - Setting Status Codes
36:40 - Multiple responses
37:35 - Route Files
41:40 - Using ES Modules
43:47 - Request Body Data
47:53 - POST Request
50:23 - PUT Request
53:23 - DELETE Request
55:44 - Middleware
1:00:24 - Custom Error Handler
1:08:30 - Catch All Error Middleware
1:10:47 - Colors Package
1:14:17 - Using Controllers
1:20:45 - __dirname Workaround
1:24:29 - Making Requests From Frontend
1:30:03 - Submit Form to API
1:36:00 - EJS Template Engine Setup
1:41:15 - Pass Data to Views
1:42:50 - Pass and Loop Over Arrays
1:44:20 - Template Partials

Node.js Crash Course

Traversy Media 2024-04-23 | 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:
youtube.com/watch?v=CnH3kAXSrmU

Node.js API Masterclass:
traversymedia.com/node-js-api-masterclass

Timestamps:
0:00 - Intro & Slides
12:18 - Installation
13:22 - Node REPL
15:05 - Setup & package.json Init
16:51 - Running JavaScript Files
19:36 - CommonJS Modules
23:13 - ES Modules
27:20 - HTTP Module & Create Server
35:06 - NPM Scripts
36:15 - NPM Modules & Nodemon
38:45 - .gitignore File
41:06 - Environment Variables & .env
44:00 - Req Object
46:10 - Marking Requests From Postman
47:28 - Simple Routing
51:52 - Loading Files
59:45 - Building a Simple API
1:10:27 - Middleware
1:13:24 - Cleanup (Middleware & Handlers)
1:19:08 - Get Req Body For POST
1:24:20 - File System Module
1:33:43 - Path Module
1:39:50 - OS Module
1:42:13 - URL Module
1:47:46 - Crypto Module
1:54:08 - Emitting Events
1:59:04 - Process Object

20 Browser Extensions For Web Design & Development

Traversy Media 2024-04-11 | 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:
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 - JSON Formatter
6:21 - Session Buddy
6:52 - Fake Filler
7:25 - Quick Source Viewer
7:51 - CSS Viewer
8:27 - User Agent Switcher
8:58 - Visbug
9:39 - Daily.Dev
10:12 - LT Debug
11:10 - Check My Links
11:32 - Web Developer Checklist
12:01 - Click Up
12:23 - Checkbot
13:00 - IE Tab
13:40 - Lorem Ipsum Generator
14:06 - Outro

Microservices Crash Course & Moleculer JS Intro

Traversy Media 2024-04-02 | An introduction to the microservices architecture and the Node.js Moleculer framework.

Course Code:
github.com/bradtraversy/microservices-example

Moleculer Framework:
https://moleculer.services/

Check out my courses:
traversymedia.com

Social Media:
Github - github.com/bradtraversy
Twitter - twitter.com/traversymedia
Instagram - instagram.com/traversymedia
Facebook - facebook.com/traversymedia
Linkedin - linkedin.com/in/bradtraversy

Timestamps:
00:00 - Intro
1:11 - Monolithic Architecture
3:07 - Microservices Architecture
6:31 - API Gateway
8:32 - Service Oriented Architecture (SOA)
10:51 - Pros & Cons
13:28 - Moleculer JS Intro
15:57 - Moleculer Setup
16:42 - Your First Microservice
21:24 - User Service
29:30 - Email Service
33:54 - Auth Service

20 Essential VS Code Extensions In 2024

Traversy Media 2024-03-11 | 20 extensions for Visual Studio Code to increase your productivity.

Check out my courses:
traversymedia.com

Social Media:
Github - github.com/bradtraversy
Twitter - twitter.com/traversymedia
Instagram - instagram.com/traversymedia
Facebook - facebook.com/traversymedia
Linkedin - linkedin.com/in/bradtraversy

Timestamps:
00:00 - Intro
1:08 - Prettier
1:56 - GitHub Copilot
3:05 - Live Server
3:35 - Multiple Cursor Case Preserve
4:29 - Git History
4:48 - Git Lens
5:26 - Code Runner
5:49 - Markdown Preview Enhanced
6:21 - Console Ninja
6:56 - RegEx Snippets
7:30 - Polacode
8:05 - Code Spell Checker
8:53 - Document This
9:19 - ChatGPT
9:57 - Peacock
10:41 - Postman
11:17 - REST Client
11:45 - Bookmarks
12:07 - Codiumate/Codium AI
12:44 - Quokka
13:24 - Wrap Up

Exploring React 19 Features - use() Hook, Actions & More

Traversy Media 2024-03-06 | 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 - twitter.com/traversymedia
Instagram - instagram.com/traversymedia
Facebook - facebook.com/traversymedia
Linkedin - linkedin.com/in/bradtraversy

Timestamps:
0:00 - Intro
1:24 - Compiler Info (Slide)
3:05 - Automatic Memoization (Slide)
4:04 - use() Hook Info (Slide)
4:57 - use client & use server (Slide)
5:43 - Actions (Slide)
6:54 - useOptimistic (Slide)
7:40 - Metadata (Slide)
8:06 - Other Changes (Slide)
9:48 - React 19 Playground Intro
10:53 - use() Hook to Fetch Joke
15:34 - use() Hook to Fetch Posts
17:05 - use() Hook with Promise
21:16 - use() Hook with Context
23:32 - Action Example 1 - Post Form
29:25 - Action Example 2 - Shopping Cart Form
35:25 - useFormStatus()
39:49 - useFormState()
44:12 - useOptimistic()

Tailwind & JavaScript Project - Products Filtering UI

Traversy Media 2024-02-27 | 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:
traversymedia.com/20-Vanilla-JavaScript-Projects

Vanilla Projects Repo:
github.com/bradtraversy/vanillawebprojects

Blog Post:
traversymedia.com/blog/product-filtering-ui

0:00 - Intro
2:02 - Start The HTML
4:35 - Navbar / Search Area
9:00 - Main Products & Categories Area
14:26 - Hardcode HTML Items
19:30 - Start The JavaScript
20:25 - Select DOM Elements & Init
22:42 - Loop Over Products & Create Elements
27:53 - Refactor To Function
29:22 - Update Cart Item Count
35:23 - Filter Products

Next.js 14 Course Release With Promo

Traversy Media 2024-02-20 | $15 PROMO CODE: NEXT2024

TRAVERSY MEDIA:
traversymedia.com/nextjs-from-scratch

UDEMY:
udemy.com/course/nextjs-from-scratch/?couponCode=NEXT2024

Stop Worrying About AI!

Traversy Media 2024-02-06 | 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 - twitter.com/traversymedia
Instagram - instagram.com/traversymedia
Facebook - facebook.com/traversymedia
Linkedin - linkedin.com/in/bradtraversy

Web Development In 2024 - A Practical Guide

Traversy Media 2024-01-23 | My annual guide to every web development technology that you can think of. We cover everything including frontend, backend, full stack, DevOps and more.

Need a Place To Start?
traversymedia.com/modern-html-css-from-the-beginning

Check Out All Courses:
traversymedia.com

Content Guide:
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:38 - Essential Tools
16:02 - HTML & CSS
18:35 - CSS Frameworks
22:28 - Sass
24:17 - Other Helpful Tools
29:59 - Design Principles
31:34 - JavaScript
34:00 - WordPress
35:54 - Basic Deployment
38:46 - Checkpoint #1
41:49 - Where To Next?
45:12 - Evolving Frontend Architecture
49:05 - Frontend Frameworks
49:33 - React
52:17 - Vue
54:05 - Angular
56:30 - Svelte
58:32 - React Ecosystem
1:06:14 - Vue Ecosystem
1:10:00 - Angular Ecosystem
1:12:50 - Svelte Ecosystem
1:15:11 - TypeScript
1:16:36 - Headless CMS
1:20:03 - Other Frontend Tools
1:24:23 - Web APIs
1:27:10 - Testing
1:29:16 - Checkpoint #2
1:30:49 - Server-Side Language
1:42:29 - Server-Side Framework
1:53:50 - REST API
1:54:37 - GraphQL
1:56:09 - Databases
2:04:27 - Database ORMs
2:09:14 - Authentication
2:12:03 - Serverless Architecture
2:13:54 - Full Stack Deployment
2:17:09 - Bun.js
2:18:36 - Checkpoint #3
2:20:25 - Containerization
2:23:00 - Web Assembly
2:24:15 - Mobile Development
2:27:18 - Progressive Web Apps
2:28:53 - Desktop Apps
2:31:56 - Design Trends
2:34:12 - IoT & Metaverse
2:35:03 - Artificial Intelligence
2:36:50 - DevOps
2:38:00 - Animation
2:39:50 - VR & AR
2:40:58 - Web3 & Blockchain
2:42:37 - Outro

HTMX Crash Course | Dynamic Pages Without Writing Any JavaScript

Traversy Media 2024-01-01 | 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:
youtube.com/watch?v=r5iWCtfltso

Check out my courses:
traversymedia.com

Social Media:
Github - github.com/bradtraversy
Twitter - twitter.com/traversymedia
Instagram - instagram.com/traversymedia
Facebook - facebook.com/traversymedia
Linkedin - linkedin.com/in/bradtraversy

Timestamps:
0:00 - Intro
3:42 - Node.js/Express Server Setup
9:23 - Simple request with hx-get & hx-trigger
11:12 - hx-swap
11:58 - Route to get a list of users
16:04 - hx-target
17:00 - hx-confirm
17:30 - Get users from jsonplaceholder
18:40 - hx-indicator
21:06 - hx-vals
23:27 - Temperature converter with hx-post
29:44 - Polling
33:23 - Mock weather app with polling
36:44 - Contacts search widget
39:50 - Backend route for search
47:08 - Inline form validation
50:12 - Backend route for validation
56:01 - Wrap up

Should You Test As A Web Developer?

Traversy Media 2023-12-28 | 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:
youtube.com/watch?v=7r4xVDI2vho

React Testing Course:
youtube.com/watch?v=7r4xVDI2vho

TDD Course:
youtube.com/watch?v=u5cLK1UrFyQ

Timestamps:
0:00 - Intro
0:54 - What Is Testing?
1:56 - TDD (Test Driven Development)
3:19 - Types Of Testing
5:28 - When Should You Write Tests?

Social Media:
Github - github.com/bradtraversy
Twitter - twitter.com/traversymedia
Instagram - instagram.com/traversymedia
Facebook - facebook.com/traversymedia
Linkedin - linkedin.com/in/bradtraversy

Astro Quick Start Course | Build an SSR Blog

Traversy Media 2023-12-18 | In this course, you will learn the fundamentals of the Astro web framework while building a server-side rendered (SSR) tech blog.

Final Code:
github.com/bradtraversy/astro-blog

Course Page:
traversymedia.com/astro-quick-start

Become a Traversy Media Member:
traversymedia.com/offers/2NFSzqDt/checkout

Use the promo TRAVERSYMEMBER to get the first 3 months for $15 per month.

Timestamps:
0:00 - Intro
3:32 - What Is Astro?
7:35 - Install & Setup
12:27 - Pages Folder & Routing
17:26 - Image Component
24:58 - Component Script
29:06 - Layout & Slots
36:45 - Component Props
39:31 - Using Constants
42:52 - Navbar & Footer Components
46:51 - Custom 404 Page
51:18 - Collections & Markdown
55:27 - Collection Schema
58:17 - Querying Collections
01:07:02 - Format & Sort By Date
01:12:36 - Article Card Component
01:15:52 - Homepage Articles
01:25:08 - Most Recent Article
01:31:11 - Slug & getStaticPaths
01:37:12 - SSR Config & Single Article
01:47:30 - Tags Component
01:53:18 - Tag Page
01:59:34 - Footer Tags
02:04:29 - Search Page
02:16:15 - API Endpoints
02:25:55 - Pagination Component
02:34:05 - Disable Prev & Next
02:39:36 - Vercel Deployment

Vue 3 & Composition API - Full Project

Traversy Media 2023-11-08 | Build an expense tracker application from scratch using Vue.js 3 and the composition API with the latest syntax from version 3.2.

3-Hour Vue.js Crash Course:
youtube.com/watch?v=VeNfHj6MhgA

Final Code:
github.com/bradtraversy/vue-expense-tracker

Vanilla JS Project Repo:
github.com/bradtraversy/vanillawebprojects

Blog Post:
traversymedia.com/blog/vue-expense-tracker

Check Out My Courses:
traversymedia.com

Timestamps:
0:00 - Intro & Demo
3:21 - Vue.js Setup
4:57 - File Structure
7:44 - Boilerplate Clean Up
9:06 - Create Component Files & Templates
12:30 - Create and import Components
18:50 - TransactionList Display
28:37 - Transactions in Global State
30:12 - Pass & Recieve Props (defineProps)
32:30 - Balance Component & computed()
37:21 - Income & Expenses Component
42:34 - AddTransaction Form Component
44:58 - Binding Form Inputs
46:41 - Validation & Toasts
52:05 - Emit Custom Events (defineEmits)
54:45 - Add Transaction to State
59:30 - Deleting Transactions
1:03:30 - Fetch From Local Storage & OnMounted()
1:06:09 - Save to Local Storage

Are You Too Dumb To Code? A Chat About Imposter Syndrome

Traversy Media 2023-10-26 | In this video, we will talk about why so many developers feel too dumb to code. We get into the topic of imposter syndrome.

Check out my courses:
traversymedia.com

Professional Website From Scratch | HTML & CSS For Beginners

Traversy Media 2023-10-16 | We will create a professional-looking website from scratch using HTML, CSS and a bit of JavaScript. This project is beginner-friendly, but it's also a fun project for more experienced developers.

Figma File:
shismqklzntzxworibfn.supabase.co/storage/v1/object/public/pro-challenges/landing.fig

Final Code:
github.com/bradtraversy/saas-landing-page

iCodeThis: Use the promo code BRAD to get 10% off of the Pro plan
icodethis.com/?ref=traversy

Check out my courses:
traversymedia.com

Timestamps:
0:00 - Intro
1:00 - Project Info & Demo
6:57 - Exporting Images From Figma
8:42 - Downloading The Image Assets
9:43 - Create Files
10:18 - Base HTML & Links
15:55 - Navbar HTML
19:20 - Base CSS
24:15 - Navbar CSS
29:25 - Custom Properties/Variables
31:00 - Buttons & Utility Classes
37:00 - Hero HTML
40:10 - Text Utility Classes
43:50 - Hero CSS
47:16 - Video Section
51:46 - Background Utility Classes
53:11 - Testimonials Section
56:00 - CSS Grid & Cards
1:00:25 - Finish Testimonials CSS
1:01:20 - Pricing HTML
1:06:33 - Pricing CSS
1:12:20 - FAQ HTML
1:17:12 - FAQ CSS
1:25:15 - FAQ JavaScript
1:37:55 - Footer HTML
1:43:30 - Footer CSS
1:47:05 - Mobile Menu HTML
1:49:29 - Mobile Menu CSS
1:58:50 - Mobile Menu JS
2:00:45 - Responsive Hero
2:05:40 - Remaining Responsiveness
2:12:26 - Deploy To Netlify

15 Web Developer-Related Career Paths

Traversy Media 2023-09-28 | In this video, we will look a bit deeper than frontend, backend, and full stack. We will explore 15 different web dev-related roles including UI/UX Designers, SPA Developers, API/microservices developers, Blockchain, IoT and much more.

Check Out My Courses:
traversymedia.com

Timestamps:
0:00 - Intro
2:37 - 1. UI/UX Designer
4:42 - 2. SPA/Frontend Developer
6:10 - 3. Server-Side/Full Stack Developer
8:25 - 4. API/Microservices Developer
9:50 - 5. Dev Ops Engineer
11:18 - 6. Mobile Developer
12:45 - 7. Freelance Web Developer
15:29 - 8. Ecommerce Developer
16:57 - 9. Web Security Specialist
18:09 - 10. Web Game Developer
19:01 - 11. Blockchain Developer
19:55 - 12. AR/VR Developer
20:52 - 13. PWA Developer
21:45 - 14. IoT Developer
22:50 - 15. Chatbot Developer
24:13 - Conclusion

Bun Crash Course | JavaScript Runtime, Bundler & Transpiler

Traversy Media 2023-09-18 | In this crash course, we will look at the Bun.js JavaScript runtime/bundler/toolkit. I will show you how to get set up and check out some of the features.

Bun Official Website & Docs:
https://bun.sh

Check Out My Courses:
traversymedia.com

If you are on Windows, this is a video I did setting up WSL. It is old, but the steps are pretty much the same:
youtube.com/watch?v=Cvrqmq9A3tA

Timestamps:

0:00 - Intro & Slides
1:22 - What Is Bun?
4:41 - Features & Advantages
9:16 - Installation
11:50 - bun init
12:55 - bun run
13:18 - Bun.serve()
15:29 - Watch Mode
16:22 - Hot Reload Mode
16:43 - Env Variables
18:16 - Bun Scripts
19:30 - Simple Routes
21:00 - bun x
21:58 - Node Core Modules
23:59 - File I/O API
27:05 - Testing
29:19 - The Bundler
32:21 - bun build
34:26 - Bundler Watch Mode
35:03 - React & JSX
39:03 - Conclusion

Prisma Crash Course

Traversy Media 2023-09-12 | Let's look at Prisma, which is a Node.js & TypeScript ORM & toolkit to interact with your database.

Written Version:
traversymedia.com/blog/prisma-crash-course

Check Out My Courses:
traversymedia.com

Timestamps:
0:00 - Intro & What Is Prisma?
5:30 - What Is Data Modeling?
6:28 - Getting Started
9:38 - The Schema File
10:36 - User Model
12:29 - Article Model
14:13 - Running Migrations
15:45 - Using The Prisma Client
16:18 - main() Function
18:00 - Create a User
19:40 - Get Users
20:44 - Create Article & Relate User
23:16 - Create User & Article With One Query
27:59 - Loop Through Users & Articles
31:30 - Update Data
32:37 - Remove Data
34:23 - Prisma Studio GUI

New Course Alert - JS Challenges: Data Structures & Algorithms

Traversy Media 2023-09-07 | Traversy Media Platform:
traversymedia.com/javascript-challeges
$15 Promo Code: CODEWIZARD

Udemy:
udemy.com/course/javascript-challenges/?couponCode=CODEWIZARD

Github Repo:
github.com/bradtraversy/traversy-js-challenges

Modern JavaScript From The Beginning | First 12 Hours

Traversy Media 2023-07-26 | This is the first 12 hours of my 37-hour JavaScript course. In thes video we will go over the fundamentals in-depth.

Get The Full Course For $15!
PROMO CODE: YOUTUBEJAVASCRIPT
traversymedia.com/modern-javascript-2-0

JAVASCRIPT SANDBOX REPO:
github.com/bradtraversy/javascript-sandbox

SHOPPING LIST PROJECT:
github.com/bradtraversy/shopping-list

Timestamps:
0:00 - Intro
1:00 - What is JavaScript?
8:43 - Environment Setup
14:10 - Running JS In The Browser
21:14 - Using The Sandbox
24:15 - The Browser Console
34:22 - Comments & Shortcuts
41:26 - Variables & Constants
52:56 - Data Types
1:05:52 - Primitive vs Reference Types
1:13:02 - Type Conversion
1:23:10 - Arithmetic & Comparison Operators
1:32:51 - Type Coercion
1:36:54 - Strings
1:52:55 - Capitalize Challenge
1:59:46 - Numbers
2:05:34 - Math Object
2:11:33 -Number Challenge
2:20:05 - Date Object
2:28:20 - Date Object Methods
2:37:20 - Section 2 Intro - Arrays & Objects
2:38:02 - Array Basics
2:45:27 - Array Methods
2:55:56 - Nesting, Concat & Spread
3:06:06 - Array Challenges
3:13:16 - Object Literals
3:21:24 - Object Spread Operator
3:33:25 - Destructuring & Naming
3:40:24 - JSON Intro
3:49:27 - Object Challenge
3:55:50 - Section 3 Intro - Functions, Scope & Execution Context
3:57:22 - Function Basics
4:03:32 - Parameters & Arguments
4:13:55 - Global & Function Scope
4:19:23 - Block Scope
4:24:42 - Nested Scope
4:27:38 - Declaration vs Expression
4:31:56 - Arrow Functions
4:39:35 - IFFE
4:44:39 - Function Challenges
4:57:00 - Execution Context
5:06:20 - Execution Context In Action
5:10:21 - The Call Stack
5:15:14 - Section 4 Intro - Logic & Contol Flow
5:16:25 - If Statements
5:23:18 - If-Else & Nesting
5:30:29 - Switch Statements
5:35:29 - Calculator Challenge
5:38:52 - Truthy & Falsy Values
5:51:10 - Logical Operators
5:59:19 - Logical Assignment
6:05:33 - Ternary Operator
6:15:52 - Section 5 Intro - Loops & High Order Array Functions
6:16:49 - For Loop
6:28:16 - Break & Continue
6:31:09 - While & Do...While Loops
6:38:10 - FizzBuzz Challenge
6:46:14 - For...Of Loop
6:51:18 - For...In Loop
6:54:28 - Array.forEach
7:03:03 - Array.filter
7:14:38 - Array.map
7:30:10 - Array.reduce
7:39:01 - Array Method Challenges
7:49:33 - Section 6 Intro - The DOM
7:50:46 - Intro To The DOM
8:01:52 - Document Element Properties
8:16:14 - DOM Selectors - Single Elements
8:30:29 - DOM Selectors - Multiple Elements
8:39:49 - Traversing The DOM - Elements
8:51:16 - Traversing The DOM - Nodes
9:05:07 - Create & Append Elements
9:11:25 - innerHTML vs CreateElement
9:20:20 - Refactor To Multiple Functions
9:24:32 - Insert Elements, Text & HTML
9:33:59 - Custom insertAfter() Challenge
9:38:49 - Replacing Elements
9:48:38 - Removing Elements
9:56:28 - Working With Styles & Classes
10:06:09 - Section 7 Intro - Events
10:07:00 - Event Listeners
10:20:03 - Mouse Events
10:30:47 - The Event Object
10:43:49 - Keyboard Events & Key Properties
10:54:21 - KeyCode Mini-Project
11:09:14 - Input Events
11:21:05 - Form Submission & Form Object
11:31:52 - Event Bubbling
11:37:33 - Event Delegation & Muiltiple Events
11:43:21 - Page Loading & Window Events

Simple Next.js & React Authentication With Clerk

Traversy Media 2023-07-10 | In this project, we will buid an authentication system for Next.js using clerk. It can also be used with React SPAs and Remix.

Visit Clerk:
clerk.com

Project Code:
github.com/bradtraversy/clerk-app

Clerk Docs:
Main: clerk.com/docs
Next.js: clerk.com/docs/nextjs/get-started-with-nextjs
React: clerk.com/docs/quickstarts/get-started-with-create-react-app
Remix: clerk.com/docs/quickstarts/get-started-with-remix

Follow Clerk On Twitter:
twitter.com/ClerkDev

Timestamps:
0:00 - Intro
1:22 - Project Demo
5:07 - Next.js Setup
7:43 - Install & Setup Clerk
9:45 - Clerk Provider
12:24 - Header Component
17:23 - Protecting Pages - middleware.js
19:48 - .env routes
21:33 - Sign In Page
26:13 - Conditional Header Links
29:42 - UserButton Component
31:45 - UserProfile Component
33:35 - Email Signup & Verification Code
35:07 - Using Themes
37:13 - Start Custom Sign Up Flow
42:15 - Custom Form UI
44:29 - Handle Submit
46:35 - Email Verification
48:36 - Conclusion

Write A ChatGPT Chatbot With Node.js

Traversy Media 2023-06-30 | In this video we will build an AI chatbot from scratch using Node.js, the OpenAI library and the ChatGPT API.

Code:
github.com/bradtraversy/chatgpt-chatbot

Blog Post:
traversymedia.com/blog/chatgpt-chatbot-nodejs

Check Out My Courses:
traversymedia.com

Timestamps:
0:00 - Intro
2:57 - Getting Setup
5:26 - OpenAI API Key
6:18 - OpenAI Library Setup
8:00 - Chat Completion Example
11:30 - Creating The Chatbot
13:42 - ReadlineSync Example
16:14 - Get User Input
18:05 - Exiting The Program
18:49 - Chat Completion for Chatbot
21:36 - Trying Out The Bot
22:13 - Storing The Chat History
25:22 - Update Chat History
26:05 - Final Test

Build A RealTime Chat App With React & Appwrite Cloud

Traversy Media 2023-06-26 | Fullstack chat application with Authentication and real-time capabilities with Appwrite cloud. Be sure to join the Appwrite discord channel for technical support questions and say hello on Twitter:

Appwrite Website: https://t.co/HVsoUClCF4

Appwrite Twitter: twitter.com/appwrite
AppWrite Discord: twitter.com/appwrite

Source Code: github.com/divanov11/React-Appwrite-RealTime-Chat

Read more about Appwrite cloud here: appwrite.io/public-beta

Timestamps:
00:00 - Intro
1:16 - Demo
2:20 - Appwrite Intro
8:08 - Basic Setup
8:08 - Basic Setup
12:00 - Configuring Appwrite
17:55 - Collection Permissions
19:45 - Querying Database Items
25:15 - Adding Styling
31:50 - Create Messages
40:50 - Sorting Queries
43:45 - Limiting Queries
44:23 - Deleting Messages
50:45 - Adding Realtime events
1:07:30 - Protected Routes
1:12:15 - Adding AuthContext
1:22:00 - Login User
1:39:45 - Persisting User After Login
1:47:20 - Logout User
1:51:00 - Register User
2:06:50 - Document Level Permissions

New Bootstrap 5 Course & Why Bootstrap?

Traversy Media 2023-06-22 | $15 PROMO: BOOTSTRAP2023
traversymedia.com/bootstrap-from-scratch

UDEMY VERSION:
udemy.com/course/bootstrap-from-scratch

MERN Crash Course | JWT Authentication, Redux Toolkit, Deployment & More

Traversy Media 2023-05-15 | In this project, we will create a MERN stack app with a React SPA frontend. The main focus is authentication, but you will learn how to create a full-featured API, manage state with Redux Toolkit, and more.

Linode/Akamai - Get $100 Free For 60 Days
linode.com/traversy

Code:
github.com/bradtraversy/mern-auth

Blog Post - Part 1 (Backend):
traversymedia.com/blog/mern-crash-course-part-1

Blog Post - Part 2 (Frontend):
traversymedia.com/blog/mern-crash-course-part-2

12-Hour MERN Course:
traversymedia.com/mern-stack-from-scratch

Timestamps:
0:00 - Intro
2:58 - Linode Sponsor
4:18 - Getting Started
6:45 - Dependencies & Express Server
9:51 - Scripts & Nodemon
10:59 - .env File
12:52 - User Routes & Controller Setup
18:15 - Postman Workspace Setup
21:10 - Async Handler
22:37 - Custom Error Middleware
30:23 - User Controller Functions
33:14 - Connect To User Routes
37:20 - MongoDB Database Setup
44:50 - User Model
48:32 - Register User Endpoint
58:50 - Generate JWT & Save Cookie
1:06:29 - Auth User Endpoint
1:11:33 - Logout & Destroy Cookie
1:13:13 - Auth Protect Middleware
1:23:30 - Update User Profile Endpoint
1:28:11 - Starting The Frontend
1:34:15 - Concurrently Setup
1:37:43 - React Bootstrap Setup
1:40:00 - Header Component
1:42:30 - HomeScreen & Hero
1:44:54 - React Router Setup
1:53:21 - Login & Register Form UIs
2:05:47 - Redux Toolkit Setup
2:10:37 - Auth Slice
2:19:50 - API Slices
2:29:17 - Login Functionality
2:37:35 - React Toastify Setup
2:39:45 - Auth Header Links
2:44:01 - Logout Functionality
2:48:48 - Loader Component
2:51:52 - Register Functionality
2:57:39 - Start Profile
2:58:21 - PrivateRoute Component
3:02:50 - ProfileScreen Component
3:06:00 - Update Profile Functionality
3:11:15 - Prepare For Production
3:16:43 - Create A Linode/Server
3:18:32 - SSH Into Server & Provision
3:22:44 - Clone Files On To Server
3:28:07 - PM2 Setup
3:30:45 - NGINX Setup

ChatGPT Crash Course | 10 Practical Use Cases For Developers

Traversy Media 2023-04-17 | In this video, I will give you and show examples of 10 ways to use OpenAI's ChatGPT as a developer including general learning, getting feedback, writing tests and more

ChatGPT:
chat.openai.com

Full Blog Post:
traversymedia.com/blog/chat-gpt-crash-course

⭐ All Courses:
traversymedia.com

💖 Show Support
Patreon: patreon.com/traversymedia
PayPal: paypal.me/traversymedia

👇 Follow Traversy Media On Social Media:
Twitter: twitter.com/traversymedia
Instagram: instagram.com/traversymedia
Linkedin: linkedin.com/in/bradtraversy

Timestamps:
0:00 - Intro
2:14 - The Interface
3:31 - #1 - General Learning Tool
9:24 - #2 Code Feedback
10:57 - #3 Specific Solutions
12:39 - #4 Brainstorming
14:07 - #5 Generating Sample Data
17:06 - #6 Generating Documentation
18:40 - #7 Explaining Errors
22:30 - #8 Writing Tests
23:45 - #9 Natural Language Programming
29:08 - #10 - UIs & Layouts

Next.js 13 Crash Course | App Directory, React Server Components & More

Traversy Media 2023-04-05 | A complete crash course to NextJS version 13 and it's new features such as the app directory structure, routing, React Server Components vs client components, layouts and more.

Code:
github.com/bradtraversy/next-13-crash-course

Original Next.js Crash Course:
youtube.com/watch?v=mTz0GXj8NN0

Blog Post:
traversymedia.com/blog/next-js-13-crash-course-app-directory-server-components-more

All Of My Courses:
traversymedia.com

Deploy to Vercel for Free:
vercel.com/ambassadors/bradtraversy

Timestamps:
0:00 - Intro
2:32 - Setup & File Structure
5:22 - Homepage & Clean Up
7:12 - Routing System
10:02 - Nested Routes
11:04 - Layouts
13:37 - Metadata API
15:31 - next/font/google
19:10 - Header Component
21:19 - React Server Components
23:26 - use client
24:13 - Data Fetching
28:05 - ReposPage Output
31:47 - Custom Loading Page
34:16 - Dynamic Routes
35:30 - params Prop
37:07 - Repo & RepoDir Component
45:57 - Suspense Boundaries
48:29 - Caching & Revalidating
51:30 - API Route Handlers
53:49 - Serving Course Data
56:00 - Fetching Course Data
1:00:32 - Getting Search Params
1:06:00 - Getting Body Data
1:10:00 - Refactor Server to Client Component
1:16:30 - Search Component

Build a Keyword Extractor: React + OpenAI API + Chakra UI

Traversy Media 2023-03-23 | Build and deploy a keyword extractor powered by OpenAI, using React, Vite and Chakra UI.

Hostinger:
hostinger.com/traversy
Use the code TRAVERSY for 10% off!

Github Repo:
github.com/bradtraversy/ai-keyword-extractor

Blog Post:
traversymedia.com/blog/ai-keyword-extractor-with-react-openai

My Web Development Courses:
traversymedia.com

Timestamps:
0:00 - Intro
1:58 - Hostinger Sponsor
3:13 - Vite & React Setup
4:30 - File Clean Up
7:00 - Chakra UI Setup
8:58 - Base Styles
10:58 - Header & Footer Components
15:42 - TextInput Component
21:46 - Start Extract Keywords Function
22:58 - Create API Key & Environment Variables
26:36 - Global State
27:56 - Completions API Request
36:50 - Modal Component & Spinner
43:54 - Project Deployment

Vite Crash Course | Faster Alternative To CRA

Traversy Media 2023-03-14 | In this video, we will talk about the Vite JavaScript build tool. We will also compare it to Webpack as well as Create React App.

💻 Blog Post:
traversymedia.com/blog/vite-crash-course

⭐ All Courses:
traversymedia.com

💖 Show Support
Patreon: patreon.com/traversymedia
PayPal: paypal.me/traversymedia

👇 Follow Traversy Media On Social Media:
Twitter: twitter.com/traversymedia
Instagram: instagram.com/traversymedia
Linkedin: linkedin.com/in/bradtraversy

Timestamps:

0:00 - Intro
1:13 - Vite vs Traditional Module Bundlers
3:50 - Vite vs Create React App
7:14 - Setting Up a Project
8:21 - File & Folder Structure
11:27 - Creating a React Component
12:23 - Environment Variables
13:50 - Using Sass
14:50 - Build For Production & Preview
15:19 - Plugins

Web Development In 2023 - A Practical Guide

Traversy Media 2023-03-06 | Updated 2024 Version - youtube.com/watch?v=8sXRyHI3bLw

This is an in-depth guide that goes over every major technology that has to do with web development, from languages to frameworks to utilities.

Content Guide Of Videos/Courses:
traversymedia.com/guide

Premium eBook Version:
traversy.gumroad.com/l/web-dev-guide

Design For Developers Repo:
github.com/bradtraversy/design-resources-for-developers

My Web Development Courses:
traversymedia.com

Timestamps:

0:00 - Intro
1:30 - About This Guide
3:38 - Overall Goals
6:23 - Types Of Web Developers
9:05 - The Essentials
13:55 - HTML & CSS
19:44 - JavaScript
23:17 - Sass & Post CSS
25:23 - CSS Frameworks
28:27 - UI Design Principles
30:57 - Design Software
33:01 - Tools & Utilities
39:19 - Helpful AI Tools
42:15 - Front-End Deployment
45:27 - Foundational Front-End Developer
48:54 - Your Next Path
51:56 - Front-End Build Tools
55:12 - Front-End Frameworks & Ecosystems
57:50 - React
1:01:24 - Vue
1:03:53 - Angular
1:06:08 - Svelte
1:07:57 - SolidJS
1:09:58 - TypeScript
1:11:48 - UI Kits & Component Libraries
1:15:01 - Testing
1:16:43 - Web APIs
1:18:56 - Full-Stack Frameworks
1:25:36 - Static Site Generators
1:30:26 - Headless CMS
1:34:02 - The Jamstack
1:24:38 - Alpine,js & Lit
1:36:41 - Visualization & Animation
1:38:33 - No-Code Tools
1:40:02 - Front-End Superstar
1:42:13 - Server-Side Languages
1:50:29 - Server-Side Frameworks
2:05:35 - Relational vs NoSQL Databases
2:09:02 - Database Management Systems
2:19:12 - ORM (Object Relational Mapping)
2:22:11 - REST API & GraphQL
2:25:15 - Authentication & Authorization
2:28:54 - Full-Stack & Back-End Deployment
2:32:47 - DevOps Skills
2:37:06 - Back-End / Full-Stack Superstar
2:39:57 - Mobile Development
2:43:18 - Progressive Web Apps (PWA)
2:44:03 - Desktop Applications
2:46:17 - Web Assembly (WASM)
2:47:25 - Advanced AI
2:50:44 - Web3
2:52:58 - Outro

Im Back! 37-Hour JavaScript Course & New Platform

Traversy Media 2023-02-09 | $20 Coupon - TRAVERSYFIVEOFF
traversymedia.com/modern-javascript-2-0

The coupon is good for ALL courses

The domain name has not propagated in a few regions. If you can not access the link yet, you can use
brad-traversy.mykajabi.com/modern-javascript-2-0

Build An AI Image Generator With OpenAI & Node.js

Traversy Media 2022-12-07 | In this project, we will use OpenAI and the DALL-E model to create a web app that will generate images from scratch based on the entered text.

💻 Code:
github.com/bradtraversy/nodejs-openai-image

📄OpenAI Docs:
beta.openai.com

⭐ All Courses:
traversymedia.com

💖 Show Support
Patreon: patreon.com/traversymedia
PayPal: paypal.me/traversymedia

👇 Follow Traversy Media On Social Media:
Twitter: twitter.com/traversymedia
Instagram: instagram.com/traversymedia
Linkedin: linkedin.com/in/bradtraversy

Timestamps:
0:00 - Intro
2:00 - Setup & Install Dependencies
3:33 - Express Server & ENV Variables
6:03 - Route & Controller
9:58 - OpenAI Library Request/Response
15:17 - Request Body Data
19:34 - Frontend Setup
24:00 - Form Event Listener
26:38 - GenerateImageRequest() Function
31:45 - Display Image in DOM
33:20 - Using The App & Outro

PostCSS Crash Course

Traversy Media 2022-10-26 | In this video, we will talk about what PostCSS is, set it up and show you how to use some of the popular plugins such as postcss-preset-env, precss, postcss-import, autoprefixer and more.

💻 Code:
github.com/bradtraversy/postcss-crash

⭐ All Courses:
traversymedia.com

💖 Show Support
Patreon: patreon.com/traversymedia
PayPal: paypal.me/traversymedia

👇 Follow Traversy Media On Social Media:
Twitter: twitter.com/traversymedia
Instagram: instagram.com/traversymedia
Linkedin: linkedin.com/in/bradtraversy

Timestamps:
0:00 - Intro
0:47 - Slides
6:48 - Docs
8:14 - Setup & Install
9:42 - Build & Watch Scripts
12:40 - Autoprefixer & Plugin Config
16:17 - postcss-preset-env
18:05 - Custom selectors, media, nesting
21:29 - PreCSS
24:13 - PostCSS Import & File Structure
28:42 - PostCSS Assets
31:52 - CSSNano

Build a Shopping Cart With React JS & Stripe

Traversy Media 2022-10-18 | In this project, we will create a shopping cart using React and Stripe.

📽️ Cooper Codes YouTube Channel:
youtube.com/c/CooperCodes

💻 Code:
github.com/coopercodes/ReactEcommerceStoreWithStripeAPI

💖 Show Support
Patreon: patreon.com/traversymedia
PayPal: paypal.me/traversymedia

👇 Follow Traversy Media On Social Media:
Twitter: twitter.com/traversymedia
Instagram: instagram.com/traversymedia
Linkedin: linkedin.com/in/bradtraversy

Timestamps:
0:00 Project showcase
1:25 Create react app / installs
2:22 Navbar component
6:00 Implementing React Router
7:45 Creating pages for router
10:35 Building rows and cols for Store page
12:14 Creating products for React to use
16:50 Loading products dynamically
19:18 Creating product card component
22:45 Creating a modal for the cart
25:55 Creating our cart context (Cart functionality)
46:02 Adding CartProvider to our app
46:29 Creating add / remove product to product cards
52:05 Adding cart functionality to navbar (number of items)
54:40 Showing cart data in modal
57:00 Creating CartProduct component
1:01:00 Create Stripe account and add test products
1:03:06 Creating Express server / installs
1:05:00 Creating Stripe checkout request
1:09:30 Adding Stripe IDs to React
1:10:33 Creating checkout call from React
1:13:43 Final project / checkout demo!
1:15:06 Thank you for watching

Clean Code vs Preference

Traversy Media 2022-10-11 | Let's talk about the phrase "clean code" and how it can be pretty subjective and a lot of it comes down to preference.

⭐ Check out Agora!
bit.ly/3bLM8Iu

🐥 Clean Code Tweet:
twitter.com/traversymedia/status/1577706658943344641

💻 All Courses:
traversymedia.com

💖 Show Support
Patreon: patreon.com/traversymedia
PayPal: paypal.me/traversymedia

👇 Follow Traversy Media On Social Media:
Twitter: twitter.com/traversymedia
Instagram: instagram.com/traversymedia
Linkedin: linkedin.com/in/bradtraversy

Create a Desktop App With JavaScript & Electron

Traversy Media 2022-10-03 | In this video, we will create a cross-platform desktop app to resize image dimensions, using JavaScript and Electron.

💻 Code:
github.com/bradtraversy/image-resizer-electron

To package your app up for different platforms, you could use one of the following:
github.com/electron/electron-packager
electronforge.io

⭐ All Courses:
traversymedia.com

💖 Show Support
Patreon: patreon.com/traversymedia
PayPal: paypal.me/traversymedia

👇 Follow Traversy Media On Social Media:
Twitter: twitter.com/traversymedia
Instagram: instagram.com/traversymedia
Linkedin: linkedin.com/in/bradtraversy

Timestamps:
0:00 - Intro
3:05 - Resources
4:48 - Setup & Install Dependencies
8:08 - Create Main Window
12:45 - Common Boilerplate
15:53 - Show Devtools
18:10 - Using Electronmon
18:54 - Adding the UI Theme
21:26 - Content Security Policy
23:00 - Menu Customization
27:36 - Menu Roles
30:00 - About Window
31:53 - Start Renderer JS / Load Image
38:15 - Get Original Dimensions
39:40 - Using Preload
44:28 - Show Output Path
46:43 - Toastify Alerts
50:58 - Form Submit Handler
53:54 - IPC Renderer (Send)
56:44 - IPC Main (Recieve)
59:35 - Resize Image
1:05:32 - Catch Message In Renderer
1:07:32 - Make mainWindow Global
1:10:22 - Test Production Mode

5 Pro-Level React Dos & Donts

Traversy Media 2022-09-20 | In this video, Jack will talk about some do's and don'ts when it comes to writing code with the React JavaScript framework.

📽️ Jack's YouTube Channel:
youtube.com/c/JackHerrington

👇 Follow Traversy Media On Social Media:
Twitter: twitter.com/traversymedia
Instagram: instagram.com/traversymedia
Linkedin: linkedin.com/in/bradtraversy

Timestamps:
00:00 Introduction
00:30 Do use functional components
02:22 Don’t think of function components as templates
07:08 Do use TypeScript
12:02 Don’t worry about re-renders (too much)
14:35 Do learn to love dependency arrays
18:36 Don’t ignore useCallback or useMemo
22:25 Do learn to make custom hooks
23:23 Don’t use Redux just because you think you have to
26:00 Do use a query library
27:50 Don’t make your own UI library
29:29 Outroduction

Command Line Crash Course For Beginners | Terminal Commands

Traversy Media 2022-09-14 | This is a course for beginners to learn how to navigate the terminal/command line. I tried to make it as OS agnostic as possible, but if you are on Windows, I suggest using something like "Git Bash".

⭐ Check out Agora!
bit.ly/3bLM8Iu

💻 Gist With All Commands:
gist.github.com/bradtraversy/cc180de0edee05075a6139e42d5f28ce

👇 Follow Traversy Media On Social Media:
Twitter: twitter.com/traversymedia
Instagram: instagram.com/traversymedia
Linkedin: linkedin.com/in/bradtraversy

Timestamps:
0:00 - Intro
0:50 - Agora Sponsor
1:34 - Slides Start
2:00 - Why Learn The Command Line?
5:43 - Command Line vs Terminal vs Shell
8:25 - Let's Talk About Windows
10:30 - Gist File
12:20 - Up & Down Arrow
12:44 - Tab Key
13:08 - Keyboard Shortcuts
14:11 - man
15:11 - whoami
15:17 - date
15:21 - clear
15:47 - pwd
16:09 - ls
18:13 - cd
19:35 - open, start, xdg-open
20:25 - mkdir
20:55 - touch
21:22 - rm
22:31 - rm -r
23:48 - cp
24:28 - mv
27:46 - cat
29:14 - RIght Angle Bracket (piping)
30:32 - less
31:00 - head
31:21 - tail
32:01 - nano
33:04 - echo
33:53 - grep
36:10 - find
38:03 - More On Piping
39:44 - ln (symlinks)
41:36 - tar
43:45 - history