Traversy Media
Multiplayer Snake Game | JavaScript & Socket.io
updated
Code:
github.com/bradtraversy/nodejs-crash-2024
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
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
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
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
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
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()
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
TRAVERSY MEDIA:
traversymedia.com/nextjs-from-scratch
UDEMY:
udemy.com/course/nextjs-from-scratch/?couponCode=NEXT2024
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
Check Out My 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
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
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
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
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
Check out my courses:
traversymedia.com
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
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 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
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
traversymedia.com/javascript-challeges
$15 Promo Code: CODEWIZARD
Udemy:
udemy.com/course/javascript-challenges/?couponCode=CODEWIZARD
Github Repo:
github.com/bradtraversy/traversy-js-challenges
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
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
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
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
traversymedia.com/bootstrap-from-scratch
UDEMY VERSION:
udemy.com/course/bootstrap-from-scratch
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:
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
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
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
π» 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
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
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
π» 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
π» Code:
github.com/bradtraversy/courses-scrape
Puppeteer Docs:
https://pptr.dev/
β 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:36 - Install & Setup
3:36 - Init Browser & Page Object
5:02 - Screenshot & PDF
6:54 - Targeting HTML, Text, and Links
11:22 - Scraping Courses
17:08 - $$eval()
18:40 - Save JSON Data
π» 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
π½οΈ 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
β 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
π» 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
π½οΈ 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
β 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
- Render - render.com
- Railway -https://railway.app
- Cyclic - https://cyclic.sh
π» Node API Github Repo:
github.com/bradtraversy/vanilla-node-rest-api
π½οΈ Node API Video:
youtube.com/watch?v=_1xa8Bsho6A&t=2120s
π₯Tweet About Topic:
twitter.com/traversymedia/status/1566881561366220800
β 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 & Chat About Heroku & Free Hosting
3:16 - Project Intro
3:47 - Render
5:24 - Railway
6:40 - Cyclic
7:35 - Render Deployment
9:53 - Railway Deployment
11:30 - Cyclic Deployment
TIP: I forgot to mention there is a VS Code extension called "Astro". Use it for syntax highlighting.
π» Github Repo:
github.com/bradtraversy/astro-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 / What Is Astro?
3:20 - Project Demo
6:20 - Create A New Astro Project
7:50 - Folder Structure
10:19 - Run Dev Server & Prepare
11:18 - Astro Components
16:00 - Making a Request - Top Level Async
17:13 - Create A Layout
20:29 - Passing Props
23:17 - Start Project / Global Styling
26:53 - Header Component
31:38 - React Integration
37:10 - Showcase Component
43:18 - Features & Card Components
49:34 - Dynamic Classes - Dark Card
51:40 - Page Content & Tabs Component
1:03:28 - Footer Component
1:05:19 - About Page
1:08:37 - Refactor Card Component
1:10:53 - Blog Page & Markdown Files
1:18:44 - Fetching Markdown FIles
1:20:57 - Blog Showcase Component
1:22:50 - Single Post Page / getStaticPaths()
1:29:35 - Build Static Assets
1:30:40 - Deploy To Netlify
James Quick YouTube Channel:
youtube.com/c/jamesqquick
Tweet from Lawrence Lockhart - [twitter.com/LDLockhartJr/status/1561250018006294528?s=20&t=Sb2aRdbdmveSWt1-JVsBUw](twitter.com/LDLockhartJr/status/1561250018006294528?s=20&t=Sb2aRdbdmveSWt1-JVsBUw)
Hiring without Whiteboards - github.com/poteto/hiring-without-whiteboards
Interview Patterns - [twitter.com/LDLockhartJr/status/1561251161134473217?s=20&t=Sb2aRdbdmveSWt1-JVsBUw](twitter.com/LDLockhartJr/status/1561251161134473217?s=20&t=Sb2aRdbdmveSWt1-JVsBUw)
JavaScript Algorithms and Data Structures Masterclass - [udemy.com/course/js-algorithms-and-data-structures-masterclass/](udemy.com/course/js-algorithms-and-data-structures-masterclass)
π Follow Traversy Media On Social Media:
Twitter: twitter.com/traversymedia
Instagram: instagram.com/traversymedia
Linkedin: linkedin.com/in/bradtraversy
π» Github Repo
github.com/bradtraversy/qr-code-generator
π§βπ» Live Demo
https://qrcodes.tech
π» QRCode.js Library:
github.com/davidshimjs/qrcodejs
β Special $9.99 Promo For My Tailwind CSS Course:
udemy.com/course/tailwind-from-scratch/?couponCode=5DAY999
β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:09 - Side Project Motivation
2:31 - QRCode.js Library Intro
3:16 - Dependency Setup
6:39 - Tailwind CSS Layout
20:42 - Start JavaScript & Get Form Inputs
23:03 - Show & Hide Spinner Functions
25:05 - Generate QR Code
27:28 - Clear UI Function
28:40 - Create Save Button
32:48 - Get QR Code Image Source
34:50 - Clear Button From UI
Live Demo: divanov11.github.io/Digital-Resume
Source Code: github.com/divanov11/Digital-Resume
Article: dev.to/dennisivy11/build-a-digital-resume-host-for-free-559
Check out Agora! bit.ly/3bLM8Iu
Dennis Ivy's Channel: youtube.com/c/DennisIvy
Timestamps
00:00 - Introduction
4:56 - Project Setup
9:15 - Hero Section
35:50 - Adding Dark Mode
39:50 - Techstack section
44:23 - Work History section
52:30 - Projects sections
57:30 - Project Detail Page
1:01:30 - Adding Responsiveness
1:05:50 - Hosting with Github pages
Sponsor: Hostinger (10% off):
http://hostinger.com/traversymedia
Github Repo:
github.com/bradtraversy/spacex-website
Live Demo:
https://traversydemo.dev
Website & Courses:
traversymedia.com
Timestamps:
0:00 - Intro
0:37 - Hostinger Sponsor
1:39 - Project Demo
4:38 - Header/Navbar HTML & CSS
17:23 - Menu Underline Animation
22:52 - Homepage Section A
30:22 - Button & Hover Animation
38:29 - Fade In & Up Animation
44:40 - Scroll Arrow Animation
49:29 - Remaining Homepage Sections
53:30 - Footer
58:29 - Media Queries
1:04:25 - Hamburger Icon & Open Animation
1:12:22 - JavaScript For Open Toggle
1:14:30 - Dark Overlay
1:18:32 - Remove Scroll On Open
1:19:40 - Side Menu HTML & CSS
1:33:00 - Inner Page & Fade Animation
1:42:20 - Stats Counter HTML & CSS
1:46:07 - Stat Counter JavaScript
2:00:00 - Inner Page Responsiveness
2:02:40 - Remaining Inner Pages
2:08:27 - Deploy To Hostinger (Using Git)
π» Carbon Main Repo:
github.com/carbon-language/carbon-lang
β Gist File From Video:
gist.github.com/bradtraversy/681eae47e8c2fc14fbfa9e3eac8dc3ca
β My Courses & More
traversymedia.com
π Show Support
Patreon: patreon.com/traversymedia
PayPal: paypal.me/traversymedia
π Follow Me On Social Media:
Twitter: twitter.com/traversymedia
Instagram: instagram.com/traversymedia
Linkedin: linkedin.com/in/bradtraversy
Timestamps:
0:00 - Intro
1:37 - Carbon - What & Why?
7:26 - Setup With Homebrew
13:15 - Package Namespace
14:16 - Main() Function
16:40 - Print() Function
18:00 - Creating Functions
19:40 - Primitive Data Types
21:37 - Naming Conventions
22:14 - Variables
24:15 - let Keyword
26:22 - auto Type
27:06 - Global Variables & Scope
28:52 - Multi-Line Strings
29:27 - Function Arguments
31:49 - Arrays
35:10 - Tuples
37:42 - Structs
41:11 - Classes & Objects
43:32 - Class Methods
46:10 - Class Functions
47:52 - Pointers
52:35 - If Else Statements
54:55 - Match Statement
59:04 - While Loops
1:01:32 - Generics
1:05:22 - Outro
FULL COURSE: $9.99 Promo Link (Only valid for 5 days)
udemy.com/course/50-projects-50-days/?couponCode=JULY999
All courses:
traversymedia.com
Timestamps:
0:00 - Intro
2:00 - Scroll Animation Project
16:13 - Rotating Navigation Project
40:40 - Login Input Wave
59:38 - Animated 3D Boxes Project
1:27:12 - Hoverboard Project
π» My Courses & More
traversymedia.com
π Show Support
Patreon: patreon.com/traversymedia
PayPal: paypal.me/traversymedia
π Follow Me On Social Media:
Twitter: twitter.com/traversymedia
Instagram: instagram.com/traversymedia
Linkedin: linkedin.com/in/bradtraversy
Timestamps:
0:00 - Intro
1:19 - Interview Questions
2:08 - Being Put On The Spot Sucks
3:55 - Ridiculous Tech Requirements
4:59 - Mandatory College Degree
5:24 - My Proposal
6:03 - Personal Project Review
6:39 - Relevant Take Home Project
7:54 - Learning Process Evaluation
8:25 - Wrap Up
π» My Courses & More
traversymedia.com
π Show Support
Patreon: patreon.com/traversymedia
PayPal: paypal.me/traversymedia
π Follow Me On Social Media:
Twitter: twitter.com/traversymedia
Instagram: instagram.com/traversymedia
Linkedin: linkedin.com/in/bradtraversy
Timestamps:
0:00 - Intro
0:42 - What is a JS Engine?
1:31 - Specific Browser Engines
3:30 - Compiled vs Interpreted Languages
6:11 - JS Engine Process Overview
7:25 - Abstract Syntax Tree (AST)
10:01 - Interpreter & Bytecode
10:58 - JIT Compilation