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/traversymedia50Final Code & Theme Files:github.com/bradtraversy/bookit-appCheck Out My Courses:traversymedia.comTimestamps:0:00 - Intro1:30 - Project Demo5:00 - Create Next App6:40 - Prep & Clean Up10:18 - Header Component18:32 - Footer Component19:53 - Homepage Rooms (JSON data)22:32 - RoomCard Component27:48 - Heading Component28:49 - Room Details Page38:20 - Apppwrite Project Setup40:26 - Rooms Database, Collections & Attributes44:10 - Add User & Room Data47:03 - Permissions & API Key48:15 - Environment Variables51:16 - Create Appwrite Clients57:52 - Get All Rooms1:04:44 - Get Single Room1:06:53 - Login & Register Pages/Forms1:11:39 - Middleware in Next.js1:15:21 - Protecting Routes1:18:07 - Login & Create Session1:26:00 - React Toastify Setup1:34:36 - Logout & Destroy Session1:43:18 - checkAuth Action 1:47:05 - Show/Hide Nav Links1:51:00 - Global Auth Context1:59:20 - Auth Wrapper2:05:40 - Finish Route Protection2:07:15 - Create User2:16:50 - Add Room2:32:04 - Storage Buckets & Image Upload2:44:51 - Single Room Page Image2:46:06 - My Rooms Page2:59:04 - Delete Room3:03:58 - DeleteRoomButton Component3:08:38 - Bookings Collection Setup3:11:32 - Book Room Action3:21:32 - Booking Form3:25:40 - Show Bookings3:31:50 - BookedRoomCard Component3:39:58 - Cancel Booking3:51:07 - Check Room Availability4:07:18 - Deploy To Vercel
Course Announcement - Laravel From Scratch Traversy Media 2024-09-24 | $15 PROMO - LARAVEL2024traversymedia.com/laravel-from-scratchUDEMY: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-shortenerEncore Website:https://encore.devTimestamps:0:00 - Intro1:29 - Slides7:41 - Installation & Setup10:43 - Running Encore & Dev Dashboard11:40 - Create Your First Endpoint14:28 - URL Params15:52 - Query Params18:55 - Start URL Shortener20:22 - URL POST Endpoint23:41 - PostgreSQL & Migration27:49 - Encore DB Shell28:50 - URL GET Endpoint32:41 - Deploy To The Cloud33: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/traversyCode:github.com/bradtraversy/web-scraper-youtubeTimestamps:0:00 - Intro2:01 - What Is Web Scraping?2:58 - Legal & Ethical Considerations3:42 - History Of Web Scraping4:41 - Why Use Web Scraping?5:53 - How Do Scrapers Work?6:57 - Tools & Libraries8:32 - Basic Steps10:28 - Additional Steps12:15 - What Are We Scraping?15:03 - Node.js Web Scraper33: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.comTimestamps:0:00 - Intro1:01 - #1 One & Done2:00 - #2 You Need To Learn Everything2:34 - #3 You Need a Degree3:37 - #4 Web Development is Easy4:51 - #5 Front & Backend Are Completely Separate6:09 - #6 Web Development Is Dead7:23 - #7 Web Dev Is Just About Writing Code8:16 - #8 Wordpress Developers Are Not Real Developers9:45 - #9 You Need A Fancy Design11:09 - #10 The More Features, The Better11:46 - #11 You Need A Team12:38 - #12 Not All Websites Need To Be Responsive13:37 - #13 Websites Need To Be Perfect Before Launch14:44 - #14 SEO Is Only About Keywords15: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.comSocial Media:https://x.com/traversymediainstagram.com/traversymediafacebook.com/traversymediagithub.com/bradtraversyTimestamps:0:00 - Intro1:28 - My History With SIde Projects2:32 - Taking On Too Much3:53 - Lack Of Proper Planning5:59 - Unreasonable Expectations7:37 - Neglecting Market Research8: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-mediaFull Project Code:github.com/bradtraversy/vue-crash-2024Blog Post:traversymedia.com/blog/vue-crash-courseCheck Out My Courses:traversymedia.comTimestamps:0:00 - Intro2:19 - Daily.dev Sponsor3:11 - What is Vue.js?4:45 - Prerequisites6:17 - Role of Frontend Frameworks8:40 - Why Vue.js?11:14 - Vue Components13:39 - Getting Setup15:40 - Using The Vue CDN20:54 - Create-Vue Setup22:30 - Vue Official Extension22:58 - Exploring Folders & Files26:10 - Boilerplate Clean Up26:50 - Component Structure27:25 - Options API data() & Interpolation28:36 - v-if, v-else & v-else-if Directives30:43 - v-for Directive & Looping32:17 - v-bind Directive33:36 - v-on Directive, Events & Methods35:55 - Composition API - Long Form39:08 - ref() & Reactive Values40:35 - Composition API Short Form42:41 - Forms & v-model46:38 - Delete task48:36 - Lifecycle Methods49:50 - onMounted & Fetching Data51:58 - Vue Jobs Project Start52:26 - Tailwind CSS Setup56:47 - Theme Files & Images58:16 - Navbar Component1:01:20 - Hero Component1:02:30 - Props1:04:57 - HomeCards & Card Container Component1:10:20 - JobListings Component & JSON Data1:16:47 - JobListing Component1:20:53 - JobListings Limit & showButton Props1:24:26 - computed() & Truncate Description1:30:41 - PrimeIcons1:32:35 - Vue Router & Home View1:39:52 - Jobs View1:41:55 - RouterLink1:46:07 - Navbar Active Link1:50:42 - Not Found Page1:56:27 - JSON Server REST API1:59:50 - Fetch Data For JobListings2:03:42 - reactive() Function2:05:15 - JobListings Refactor To reactive()2:07:26 - Vue Spinner2:09:50 - Fetch Single Job & Display Data2:19:06 -BackButton Component2:21:03 - Proxying2:23:54 - Add Job Page2:32:20 - Save Job POST2:37:15 - Toast Notifications2:40:08 - Delete Job2:44:14 - Edit Page2:47:06 - Fetch Job To Edit2:50:58 - Update Job2: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/traversyClerk (Sponsor) - go.clerk.com/BsG2XQJPrisma - prisma.ioNext.js - nextjs.orgFull Code Repo:github.com/bradtraversy/expense-tracker-nextjsTimestamps:0:00 - Intro2:04 - Links & Docs3:24 - Create Next App5:58 - Layout File7:54 - Neon Project Setup9:45 - New Database & Role10:56 - Neon SQL Editor Demo14:18 - Prisma Setup & Schema15:20 - User Model18:06 - Transaction Model20:19 - Generate Client & Migrate22:25 - Database File25:29 - Clerk Authentication Setup28:21 - Header Component29:35 - SignIn, SignOut & UserButton32:29 - Save User To Neon Database42:26 - Guest Component44:58 - AddTransaction Component50:48 - addTransaction Action59:36 - Get & Validate User1:01:47 - React Toastify Setup1:04:08 - Save Transaction to Neon Database1:07:53 - useRef To Clear Form1:09:36 - Balance Component1:11:17 - getUserBalance Action1:15:36 - addCommas() Utility Function1:19:03 - Clerk Dashboard Users1:19:49 - IncomeExpense Component1:21:26 - getIncomeExpense Action1:27:06 - TransactionList Component1:29:22 - Transaction Type1:30:40 - getTransactions Action1:34:00 - TransactionItem Component1:38:28 - Delete Button1:41:07 - deleteTransaction Action1:45:07 - Commas & Decimal Places1:47:30 - Email/Password Test1: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_mediaFull 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 & ZodFull Next.js Course:traversymedia.com/nextjs-from-scratchUdemy Version:udemy.com/course/nextjs-from-scratchTimestamps:0:00 - Intro4:02 - Project Setup9:18 - Initialize Shadcn/ui10:37 - Using Shadcn Components12:54 - Navbar, Avatar, Dropdown Components24:04 - Sidebar & Command Component33:40 - Dashboard Cards39:55 - Make The Cards Dynamic44:13 - Posts Data Array & Types47:50 - Posts Table59:13 - Limit & Sort Posts1:02:27 - Analytics Data & Types1:04:30 - Analytics Chart & Recharts1:11:10 - Posts Page1:13:50 - Back Button Component1:16:38 - Pagination Component1:18:00 - Edit Post Page & Form1:23:34 - Zod Form Schema1:25:17 - Get Post Data1:27:00 - useForm Hook1:28:45 - Create Form1:38:03 - Toast Component1:42:29 - Dark Mode Toggler1:49:48 - Auth Page & Layout1:55:26 - Tabs Component2:00:47 - Login Form2:10:50 - Register Form2: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-crashNode.js Crash Course:youtube.com/watch?v=32M1al-Y6Ag14+ Hour Node.js API Masterclass Course:traversymedia.com/node-js-api-masterclassTimestamps:0:00 - Intro & Slides0:53 - What is Express?2:28 - Opinionated vs Unopinionated4:10 - Prerequisites5:18 - What we'll cover6:45 - Express Setup9:00 - Basic Server13:10 - --watch Flag & NPM Scripts15:25 - res.sendFile() Method18:00 - Static Web Server19:48 - Working with JSON22:35 - Postman Utility23:45 - Environment Variables (.env)26:30 - Request Params (req.params)29:35 - Query Strings (req.query)33:19 - Setting Status Codes36:40 - Multiple responses37:35 - Route Files41:40 - Using ES Modules43:47 - Request Body Data47:53 - POST Request50:23 - PUT Request53:23 - DELETE Request55:44 - Middleware1:00:24 - Custom Error Handler1:08:30 - Catch All Error Middleware1:10:47 - Colors Package1:14:17 - Using Controllers1:20:45 - __dirname Workaround1:24:29 - Making Requests From Frontend1:30:03 - Submit Form to API1:36:00 - EJS Template Engine Setup1:41:15 - Pass Data to Views1:42:50 - Pass and Loop Over Arrays1: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-2024Express Crash Course:youtube.com/watch?v=CnH3kAXSrmUNode.js API Masterclass:traversymedia.com/node-js-api-masterclassTimestamps:0:00 - Intro & Slides12:18 - Installation13:22 - Node REPL15:05 - Setup & package.json Init16:51 - Running JavaScript Files19:36 - CommonJS Modules23:13 - ES Modules27:20 - HTTP Module & Create Server35:06 - NPM Scripts36:15 - NPM Modules & Nodemon38:45 - .gitignore File41:06 - Environment Variables & .env44:00 - Req Object46:10 - Marking Requests From Postman47:28 - Simple Routing51:52 - Loading Files59:45 - Building a Simple API1:10:27 - Middleware1:13:24 - Cleanup (Middleware & Handlers)1:19:08 - Get Req Body For POST1:24:20 - File System Module1:33:43 - Path Module1:39:50 - OS Module1:42:13 - URL Module1:47:46 - Crypto Module1:54:08 - Emitting Events1: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-extensionsTimestamps:0:00 - Intro2:10 - ColorZilla2:53 - WhatFont3:22 - Wappalyzer4:13 - Web Developer5:24 - Dark Reader5:52 - JSON Formatter6:21 - Session Buddy6:52 - Fake Filler7:25 - Quick Source Viewer7:51 - CSS Viewer8:27 - User Agent Switcher8:58 - Visbug9:39 - Daily.Dev10:12 - LT Debug11:10 - Check My Links11:32 - Web Developer Checklist12:01 - Click Up12:23 - Checkbot13:00 - IE Tab13:40 - Lorem Ipsum Generator14: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-exampleMoleculer Framework:https://moleculer.services/Check out my courses:traversymedia.comSocial Media:Github - github.com/bradtraversyTwitter - twitter.com/traversymediaInstagram - instagram.com/traversymediaFacebook - facebook.com/traversymediaLinkedin - linkedin.com/in/bradtraversyTimestamps:00:00 - Intro1:11 - Monolithic Architecture3:07 - Microservices Architecture6:31 - API Gateway8:32 - Service Oriented Architecture (SOA)10:51 - Pros & Cons13:28 - Moleculer JS Intro15:57 - Moleculer Setup16:42 - Your First Microservice21:24 - User Service29:30 - Email Service33:54 - Auth Service
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-2024React Front To Back Full Course:traversymedia.com/Modern-React-Front-To-Back-CourseCheck out all my courses:traversymedia.comSocial Media:Github - github.com/bradtraversyTwitter - twitter.com/traversymediaInstagram - instagram.com/traversymediaFacebook - facebook.com/traversymediaLinkedin - linkedin.com/in/bradtraversyTimestamps:0:00 - Intro1: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 Demo19:53 - Setup React With Vite22:29 - File Explanation25:11 - Boilerplate Cleanup26:48 - Tailwind CSS Setup30:24 - JSX Crash Course39:37 - Start Homepage 42:00 - Navbar Component43:56 - Image Import45:24 - Hero Component46:17 - Props48:00 - Default Props48:51 - Wrapper Components55:14 - JobListings Component58:50 - Create Lists With map()1:03:20 - Single JobListing Component1:05:49 - Limit Jobs to 31:07:50 - useState() Hook & Desc Toggle1:13:07 - Creating an Event1:14:20 - Updating Component State1:16:00 - React Icons Package1:18:00 - React Router Setup1:20:21 - Create Routes From Elements1:21:36 - Router Provider1:22:36 - Homepage Component/Route1:24:40 - Layouts1:29:06 - Jobs Page Component/Route1:30:50 - Link Component1:34:20 - Custom 404 Page1:36:55 - Active Links With NavLink1:41:00 - Conditional Rendering1:43:10 - JSON Server Setup1:47:00 - useEffect() & Data Fetching1:53:07 - Loading Spinner1:51:06 - Conditional Fetching1:59:45 - Proxying2:03:38 - Single Job Page2:09:04 - useParams() to Get ID2:12:25 - Data Loaders2:16:36 - Single Job Output2:22:00 - Add Job Page2:23:40 - Working With Forms2:30:05 - Form Submission2:35:27 - Pass Function as Prop2:39:32 - POST Request to Add Job2:41:45 - Delete Job Button/function2:45:12 - DELETE Request to Remove Job2:46:50 - React Toastify Package2:50:08 - Edit Job Page/Form2:56:05 - Update Form Submission2:58:54 - PUT Request to Update Job3:02:10 - Build Static Assets For Production
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.comSocial Media:Github - github.com/bradtraversyTwitter - twitter.com/traversymediaInstagram - instagram.com/traversymediaFacebook - facebook.com/traversymediaLinkedin - linkedin.com/in/bradtraversyTimestamps:00:00 - Intro1:08 - Prettier1:56 - GitHub Copilot3:05 - Live Server3:35 - Multiple Cursor Case Preserve4:29 - Git History4:48 - Git Lens5:26 - Code Runner5:49 - Markdown Preview Enhanced6:21 - Console Ninja6:56 - RegEx Snippets7:30 - Polacode8:05 - Code Spell Checker8:53 - Document This9:19 - ChatGPT9:57 - Peacock10:41 - Postman11:17 - REST Client11:45 - Bookmarks12:07 - Codiumate/Codium AI12:44 - Quokka13: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-playgroundCheck out my courses:traversymedia.comSocial Media:Github - github.com/bradtraversyTwitter - twitter.com/traversymediaInstagram - instagram.com/traversymediaFacebook - facebook.com/traversymediaLinkedin - linkedin.com/in/bradtraversyTimestamps: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 Intro10:53 - use() Hook to Fetch Joke15:34 - use() Hook to Fetch Posts17:05 - use() Hook with Promise21:16 - use() Hook with Context23:32 - Action Example 1 - Post Form29:25 - Action Example 2 - Shopping Cart Form35: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/oNVKXBo20 Projects Course:traversymedia.com/20-Vanilla-JavaScript-ProjectsVanilla Projects Repo:github.com/bradtraversy/vanillawebprojectsBlog Post:traversymedia.com/blog/product-filtering-ui0:00 - Intro2:02 - Start The HTML4:35 - Navbar / Search Area9:00 - Main Products & Categories Area14:26 - Hardcode HTML Items19:30 - Start The JavaScript20:25 - Select DOM Elements & Init22:42 - Loop Over Products & Create Elements27:53 - Refactor To Function29:22 - Update Cart Item Count35:23 - Filter Products
Next.js 14 Course Release With Promo Traversy Media 2024-02-20 | $15 PROMO CODE: NEXT2024TRAVERSY MEDIA:traversymedia.com/nextjs-from-scratchUDEMY: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.comSocial Media:Github - github.com/bradtraversyTwitter - twitter.com/traversymediaInstagram - instagram.com/traversymediaFacebook - facebook.com/traversymediaLinkedin - 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-beginningCheck Out All Courses:traversymedia.comContent Guide:traversymedia.com/guidePremium eBook Version:traversy.gumroad.com/l/web-dev-guideTimestamps:0:00 - Intro1:12 - About This Guide2:43 - Developer Roles7:15 - Developer Goals11:38 - Essential Tools16:02 - HTML & CSS18:35 - CSS Frameworks22:28 - Sass24:17 - Other Helpful Tools29:59 - Design Principles31:34 - JavaScript34:00 - WordPress35:54 - Basic Deployment38:46 - Checkpoint #141:49 - Where To Next?45:12 - Evolving Frontend Architecture49:05 - Frontend Frameworks49:33 - React52:17 - Vue54:05 - Angular56:30 - Svelte58:32 - React Ecosystem1:06:14 - Vue Ecosystem1:10:00 - Angular Ecosystem1:12:50 - Svelte Ecosystem1:15:11 - TypeScript1:16:36 - Headless CMS1:20:03 - Other Frontend Tools1:24:23 - Web APIs1:27:10 - Testing1:29:16 - Checkpoint #21:30:49 - Server-Side Language1:42:29 - Server-Side Framework1:53:50 - REST API1:54:37 - GraphQL1:56:09 - Databases2:04:27 - Database ORMs2:09:14 - Authentication 2:12:03 - Serverless Architecture2:13:54 - Full Stack Deployment2:17:09 - Bun.js2:18:36 - Checkpoint #32:20:25 - Containerization2:23:00 - Web Assembly2:24:15 - Mobile Development2:27:18 - Progressive Web Apps2:28:53 - Desktop Apps2:31:56 - Design Trends2:34:12 - IoT & Metaverse2:35:03 - Artificial Intelligence2:36:50 - DevOps2:38:00 - Animation2:39:50 - VR & AR2:40:58 - Web3 & Blockchain2: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-courseAlpine Crash Course:youtube.com/watch?v=r5iWCtfltsoCheck out my courses:traversymedia.comSocial Media:Github - github.com/bradtraversyTwitter - twitter.com/traversymediaInstagram - instagram.com/traversymediaFacebook - facebook.com/traversymediaLinkedin - linkedin.com/in/bradtraversyTimestamps:0:00 - Intro3:42 - Node.js/Express Server Setup9:23 - Simple request with hx-get & hx-trigger11:12 - hx-swap11:58 - Route to get a list of users16:04 - hx-target17:00 - hx-confirm17:30 - Get users from jsonplaceholder18:40 - hx-indicator21:06 - hx-vals23:27 - Temperature converter with hx-post29:44 - Polling33:23 - Mock weather app with polling36:44 - Contacts search widget39:50 - Backend route for search47:08 - Inline form validation50:12 - Backend route for validation56: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.comJest Crash Course:youtube.com/watch?v=7r4xVDI2vhoReact Testing Course:youtube.com/watch?v=7r4xVDI2vhoTDD Course:youtube.com/watch?v=u5cLK1UrFyQTimestamps:0:00 - Intro0:54 - What Is Testing?1:56 - TDD (Test Driven Development)3:19 - Types Of Testing5:28 - When Should You Write Tests?Social Media:Github - github.com/bradtraversyTwitter - twitter.com/traversymediaInstagram - instagram.com/traversymediaFacebook - facebook.com/traversymediaLinkedin - 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-blogCourse Page:traversymedia.com/astro-quick-startBecome a Traversy Media Member:traversymedia.com/offers/2NFSzqDt/checkoutUse the promo TRAVERSYMEMBER to get the first 3 months for $15 per month.Timestamps:0:00 - Intro3:32 - What Is Astro?7:35 - Install & Setup12:27 - Pages Folder & Routing17:26 - Image Component24:58 - Component Script29:06 - Layout & Slots36:45 - Component Props39:31 - Using Constants42:52 - Navbar & Footer Components46:51 - Custom 404 Page51:18 - Collections & Markdown55:27 - Collection Schema58:17 - Querying Collections01:07:02 - Format & Sort By Date01:12:36 - Article Card Component01:15:52 - Homepage Articles01:25:08 - Most Recent Article 01:31:11 - Slug & getStaticPaths01:37:12 - SSR Config & Single Article01:47:30 - Tags Component01:53:18 - Tag Page01:59:34 - Footer Tags02:04:29 - Search Page02:16:15 - API Endpoints02:25:55 - Pagination Component02:34:05 - Disable Prev & Next02: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=VeNfHj6MhgAFinal Code:github.com/bradtraversy/vue-expense-trackerVanilla JS Project Repo:github.com/bradtraversy/vanillawebprojectsBlog Post:traversymedia.com/blog/vue-expense-trackerCheck Out My Courses:traversymedia.comTimestamps: 0:00 - Intro & Demo3:21 - Vue.js Setup4:57 - File Structure7:44 - Boilerplate Clean Up9:06 - Create Component Files & Templates12:30 - Create and import Components18:50 - TransactionList Display28:37 - Transactions in Global State30:12 - Pass & Recieve Props (defineProps)32:30 - Balance Component & computed()37:21 - Income & Expenses Component42:34 - AddTransaction Form Component44:58 - Binding Form Inputs46:41 - Validation & Toasts52:05 - Emit Custom Events (defineEmits)54:45 - Add Transaction to State59:30 - Deleting Transactions1: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.figFinal Code:github.com/bradtraversy/saas-landing-pageiCodeThis: Use the promo code BRAD to get 10% off of the Pro planicodethis.com/?ref=traversyCheck out my courses:traversymedia.comTimestamps:0:00 - Intro1:00 - Project Info & Demo6:57 - Exporting Images From Figma8:42 - Downloading The Image Assets9:43 - Create Files10:18 - Base HTML & Links15:55 - Navbar HTML19:20 - Base CSS24:15 - Navbar CSS29:25 - Custom Properties/Variables31:00 - Buttons & Utility Classes37:00 - Hero HTML40:10 - Text Utility Classes43:50 - Hero CSS47:16 - Video Section51:46 - Background Utility Classes53:11 - Testimonials Section56:00 - CSS Grid & Cards1:00:25 - Finish Testimonials CSS1:01:20 - Pricing HTML1:06:33 - Pricing CSS1:12:20 - FAQ HTML1:17:12 - FAQ CSS1:25:15 - FAQ JavaScript1:37:55 - Footer HTML1:43:30 - Footer CSS1:47:05 - Mobile Menu HTML1:49:29 - Mobile Menu CSS1:58:50 - Mobile Menu JS2:00:45 - Responsive Hero2:05:40 - Remaining Responsiveness2: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.comTimestamps:0:00 - Intro2:37 - 1. UI/UX Designer4:42 - 2. SPA/Frontend Developer6:10 - 3. Server-Side/Full Stack Developer8:25 - 4. API/Microservices Developer9:50 - 5. Dev Ops Engineer11:18 - 6. Mobile Developer12:45 - 7. Freelance Web Developer15:29 - 8. Ecommerce Developer16:57 - 9. Web Security Specialist18:09 - 10. Web Game Developer19:01 - 11. Blockchain Developer19:55 - 12. AR/VR Developer20:52 - 13. PWA Developer21:45 - 14. IoT Developer22:50 - 15. Chatbot Developer24: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.shCheck Out My Courses:traversymedia.comIf 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=Cvrqmq9A3tATimestamps:0:00 - Intro & Slides1:22 - What Is Bun?4:41 - Features & Advantages9:16 - Installation11:50 - bun init12:55 - bun run13:18 - Bun.serve()15:29 - Watch Mode16:22 - Hot Reload Mode16:43 - Env Variables18:16 - Bun Scripts19:30 - Simple Routes21:00 - bun x21:58 - Node Core Modules23:59 - File I/O API27:05 - Testing29:19 - The Bundler32:21 - bun build34:26 - Bundler Watch Mode35:03 - React & JSX39: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-courseCheck Out My Courses:traversymedia.comTimestamps:0:00 - Intro & What Is Prisma?5:30 - What Is Data Modeling?6:28 - Getting Started9:38 - The Schema File10:36 - User Model12:29 - Article Model14:13 - Running Migrations15:45 - Using The Prisma Client16:18 - main() Function18:00 - Create a User19:40 - Get Users20:44 - Create Article & Relate User23:16 - Create User & Article With One Query27:59 - Loop Through Users & Articles31:30 - Update Data32:37 - Remove Data34: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: CODEWIZARDUdemy:udemy.com/course/javascript-challenges/?couponCode=CODEWIZARDGithub 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: YOUTUBEJAVASCRIPTtraversymedia.com/modern-javascript-2-0JAVASCRIPT SANDBOX REPO:github.com/bradtraversy/javascript-sandboxSHOPPING LIST PROJECT:github.com/bradtraversy/shopping-listTimestamps:0:00 - Intro1:00 - What is JavaScript?8:43 - Environment Setup14:10 - Running JS In The Browser21:14 - Using The Sandbox24:15 - The Browser Console34:22 - Comments & Shortcuts41:26 - Variables & Constants52:56 - Data Types1:05:52 - Primitive vs Reference Types1:13:02 - Type Conversion1:23:10 - Arithmetic & Comparison Operators1:32:51 - Type Coercion1:36:54 - Strings1:52:55 - Capitalize Challenge1:59:46 - Numbers2:05:34 - Math Object2:11:33 -Number Challenge2:20:05 - Date Object2:28:20 - Date Object Methods2:37:20 - Section 2 Intro - Arrays & Objects2:38:02 - Array Basics2:45:27 - Array Methods2:55:56 - Nesting, Concat & Spread3:06:06 - Array Challenges3:13:16 - Object Literals3:21:24 - Object Spread Operator3:33:25 - Destructuring & Naming3:40:24 - JSON Intro3:49:27 - Object Challenge3:55:50 - Section 3 Intro - Functions, Scope & Execution Context3:57:22 - Function Basics4:03:32 - Parameters & Arguments4:13:55 - Global & Function Scope4:19:23 - Block Scope4:24:42 - Nested Scope4:27:38 - Declaration vs Expression4:31:56 - Arrow Functions4:39:35 - IFFE4:44:39 - Function Challenges4:57:00 - Execution Context5:06:20 - Execution Context In Action5:10:21 - The Call Stack5:15:14 - Section 4 Intro - Logic & Contol Flow5:16:25 - If Statements5:23:18 - If-Else & Nesting5:30:29 - Switch Statements5:35:29 - Calculator Challenge5:38:52 - Truthy & Falsy Values5:51:10 - Logical Operators5:59:19 - Logical Assignment6:05:33 - Ternary Operator6:15:52 - Section 5 Intro - Loops & High Order Array Functions6:16:49 - For Loop6:28:16 - Break & Continue6:31:09 - While & Do...While Loops6:38:10 - FizzBuzz Challenge6:46:14 - For...Of Loop6:51:18 - For...In Loop6:54:28 - Array.forEach7:03:03 - Array.filter7:14:38 - Array.map7:30:10 - Array.reduce7:39:01 - Array Method Challenges7:49:33 - Section 6 Intro - The DOM7:50:46 - Intro To The DOM8:01:52 - Document Element Properties8:16:14 - DOM Selectors - Single Elements8:30:29 - DOM Selectors - Multiple Elements8:39:49 - Traversing The DOM - Elements8:51:16 - Traversing The DOM - Nodes9:05:07 - Create & Append Elements9:11:25 - innerHTML vs CreateElement9:20:20 - Refactor To Multiple Functions9:24:32 - Insert Elements, Text & HTML9:33:59 - Custom insertAfter() Challenge9:38:49 - Replacing Elements9:48:38 - Removing Elements9:56:28 - Working With Styles & Classes10:06:09 - Section 7 Intro - Events10:07:00 - Event Listeners10:20:03 - Mouse Events10:30:47 - The Event Object10:43:49 - Keyboard Events & Key Properties10:54:21 - KeyCode Mini-Project11:09:14 - Input Events11:21:05 - Form Submission & Form Object11:31:52 - Event Bubbling11:37:33 - Event Delegation & Muiltiple Events11: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.comProject Code:github.com/bradtraversy/clerk-appClerk Docs:Main: clerk.com/docsNext.js: clerk.com/docs/nextjs/get-started-with-nextjsReact: clerk.com/docs/quickstarts/get-started-with-create-react-appRemix: clerk.com/docs/quickstarts/get-started-with-remixFollow Clerk On Twitter:twitter.com/ClerkDevTimestamps:0:00 - Intro1:22 - Project Demo5:07 - Next.js Setup7:43 - Install & Setup Clerk9:45 - Clerk Provider12:24 - Header Component17:23 - Protecting Pages - middleware.js19:48 - .env routes21:33 - Sign In Page26:13 - Conditional Header Links29:42 - UserButton Component31:45 - UserProfile Component33:35 - Email Signup & Verification Code35:07 - Using Themes37:13 - Start Custom Sign Up Flow42:15 - Custom Form UI44:29 - Handle Submit46:35 - Email Verification48: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-chatbotBlog Post:traversymedia.com/blog/chatgpt-chatbot-nodejsCheck Out My Courses:traversymedia.comTimestamps:0:00 - Intro2:57 - Getting Setup5:26 - OpenAI API Key6:18 - OpenAI Library Setup8:00 - Chat Completion Example11:30 - Creating The Chatbot13:42 - ReadlineSync Example16:14 - Get User Input18:05 - Exiting The Program18:49 - Chat Completion for Chatbot21:36 - Trying Out The Bot22:13 - Storing The Chat History25:22 - Update Chat History26: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/HVsoUClCF4Appwrite Twitter: twitter.com/appwriteAppWrite Discord: twitter.com/appwriteSource Code: github.com/divanov11/React-Appwrite-RealTime-ChatRead more about Appwrite cloud here: appwrite.io/public-betaTimestamps:00:00 - Intro1:16 - Demo2:20 - Appwrite Intro8:08 - Basic Setup8:08 - Basic Setup12:00 - Configuring Appwrite17:55 - Collection Permissions19:45 - Querying Database Items25:15 - Adding Styling31:50 - Create Messages40:50 - Sorting Queries43:45 - Limiting Queries44:23 - Deleting Messages50:45 - Adding Realtime events1:07:30 - Protected Routes1:12:15 - Adding AuthContext1:22:00 - Login User1:39:45 - Persisting User After Login1:47:20 - Logout User1:51:00 - Register User2:06:50 - Document Level Permissions
New Bootstrap 5 Course & Why Bootstrap? Traversy Media 2023-06-22 | $15 PROMO: BOOTSTRAP2023traversymedia.com/bootstrap-from-scratchUDEMY 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 Dayslinode.com/traversyCode:github.com/bradtraversy/mern-authBlog Post - Part 1 (Backend):traversymedia.com/blog/mern-crash-course-part-1Blog Post - Part 2 (Frontend):traversymedia.com/blog/mern-crash-course-part-212-Hour MERN Course:traversymedia.com/mern-stack-from-scratchTimestamps:0:00 - Intro2:58 - Linode Sponsor4:18 - Getting Started6:45 - Dependencies & Express Server9:51 - Scripts & Nodemon10:59 - .env File12:52 - User Routes & Controller Setup18:15 - Postman Workspace Setup21:10 - Async Handler22:37 - Custom Error Middleware30:23 - User Controller Functions33:14 - Connect To User Routes37:20 - MongoDB Database Setup44:50 - User Model48:32 - Register User Endpoint58:50 - Generate JWT & Save Cookie1:06:29 - Auth User Endpoint1:11:33 - Logout & Destroy Cookie1:13:13 - Auth Protect Middleware1:23:30 - Update User Profile Endpoint1:28:11 - Starting The Frontend1:34:15 - Concurrently Setup1:37:43 - React Bootstrap Setup1:40:00 - Header Component1:42:30 - HomeScreen & Hero1:44:54 - React Router Setup1:53:21 - Login & Register Form UIs2:05:47 - Redux Toolkit Setup2:10:37 - Auth Slice2:19:50 - API Slices2:29:17 - Login Functionality2:37:35 - React Toastify Setup2:39:45 - Auth Header Links2:44:01 - Logout Functionality2:48:48 - Loader Component2:51:52 - Register Functionality2:57:39 - Start Profile2:58:21 - PrivateRoute Component3:02:50 - ProfileScreen Component3:06:00 - Update Profile Functionality3:11:15 - Prepare For Production3:16:43 - Create A Linode/Server3:18:32 - SSH Into Server & Provision3:22:44 - Clone Files On To Server3:28:07 - PM2 Setup3: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 moreChatGPT:chat.openai.comFull Blog Post:traversymedia.com/blog/chat-gpt-crash-course⭐ All Courses:traversymedia.com💖 Show SupportPatreon: patreon.com/traversymediaPayPal: paypal.me/traversymedia👇 Follow Traversy Media On Social Media:Twitter: twitter.com/traversymediaInstagram: instagram.com/traversymediaLinkedin: linkedin.com/in/bradtraversyTimestamps:0:00 - Intro2:14 - The Interface3:31 - #1 - General Learning Tool9:24 - #2 Code Feedback10:57 - #3 Specific Solutions12:39 - #4 Brainstorming14:07 - #5 Generating Sample Data17:06 - #6 Generating Documentation18:40 - #7 Explaining Errors22:30 - #8 Writing Tests23:45 - #9 Natural Language Programming29: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-courseOriginal Next.js Crash Course:youtube.com/watch?v=mTz0GXj8NN0Blog Post:traversymedia.com/blog/next-js-13-crash-course-app-directory-server-components-moreAll Of My Courses:traversymedia.comDeploy to Vercel for Free:vercel.com/ambassadors/bradtraversyTimestamps:0:00 - Intro2:32 - Setup & File Structure5:22 - Homepage & Clean Up7:12 - Routing System10:02 - Nested Routes11:04 - Layouts13:37 - Metadata API15:31 - next/font/google19:10 - Header Component21:19 - React Server Components23:26 - use client24:13 - Data Fetching28:05 - ReposPage Output31:47 - Custom Loading Page34:16 - Dynamic Routes35:30 - params Prop37:07 - Repo & RepoDir Component45:57 - Suspense Boundaries48:29 - Caching & Revalidating51:30 - API Route Handlers53:49 - Serving Course Data56:00 - Fetching Course Data1:00:32 - Getting Search Params1:06:00 - Getting Body Data1:10:00 - Refactor Server to Client Component1: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/traversyUse the code TRAVERSY for 10% off!Github Repo:github.com/bradtraversy/ai-keyword-extractorBlog Post:traversymedia.com/blog/ai-keyword-extractor-with-react-openaiMy Web Development Courses:traversymedia.comTimestamps:0:00 - Intro1:58 - Hostinger Sponsor3:13 - Vite & React Setup4:30 - File Clean Up7:00 - Chakra UI Setup8:58 - Base Styles10:58 - Header & Footer Components15:42 - TextInput Component21:46 - Start Extract Keywords Function22:58 - Create API Key & Environment Variables26:36 - Global State27:56 - Completions API Request36:50 - Modal Component & Spinner43: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 SupportPatreon: patreon.com/traversymediaPayPal: paypal.me/traversymedia👇 Follow Traversy Media On Social Media:Twitter: twitter.com/traversymediaInstagram: instagram.com/traversymediaLinkedin: linkedin.com/in/bradtraversyTimestamps:0:00 - Intro 1:13 - Vite vs Traditional Module Bundlers3:50 - Vite vs Create React App7:14 - Setting Up a Project8:21 - File & Folder Structure11:27 - Creating a React Component12:23 - Environment Variables13:50 - Using Sass14:50 - Build For Production & Preview15:19 - Plugins
Web Development In 2023 - A Practical Guide Traversy Media 2023-03-06 | Updated 2024 Version - youtube.com/watch?v=8sXRyHI3bLwThis 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/guidePremium eBook Version:traversy.gumroad.com/l/web-dev-guideDesign For Developers Repo:github.com/bradtraversy/design-resources-for-developersMy Web Development Courses:traversymedia.comTimestamps:0:00 - Intro1:30 - About This Guide3:38 - Overall Goals6:23 - Types Of Web Developers9:05 - The Essentials13:55 - HTML & CSS19:44 - JavaScript23:17 - Sass & Post CSS25:23 - CSS Frameworks28:27 - UI Design Principles30:57 - Design Software33:01 - Tools & Utilities39:19 - Helpful AI Tools42:15 - Front-End Deployment45:27 - Foundational Front-End Developer48:54 - Your Next Path51:56 - Front-End Build Tools55:12 - Front-End Frameworks & Ecosystems57:50 - React1:01:24 - Vue1:03:53 - Angular1:06:08 - Svelte1:07:57 - SolidJS1:09:58 - TypeScript1:11:48 - UI Kits & Component Libraries1:15:01 - Testing1:16:43 - Web APIs1:18:56 - Full-Stack Frameworks1:25:36 - Static Site Generators1:30:26 - Headless CMS1:34:02 - The Jamstack1:24:38 - Alpine,js & Lit1:36:41 - Visualization & Animation1:38:33 - No-Code Tools1:40:02 - Front-End Superstar1:42:13 - Server-Side Languages1:50:29 - Server-Side Frameworks2:05:35 - Relational vs NoSQL Databases2:09:02 - Database Management Systems2:19:12 - ORM (Object Relational Mapping)2:22:11 - REST API & GraphQL2:25:15 - Authentication & Authorization2:28:54 - Full-Stack & Back-End Deployment2:32:47 - DevOps Skills2:37:06 - Back-End / Full-Stack Superstar2:39:57 - Mobile Development2:43:18 - Progressive Web Apps (PWA)2:44:03 - Desktop Applications2:46:17 - Web Assembly (WASM)2:47:25 - Advanced AI2:50:44 - Web32:52:58 - Outro
Im Back! 37-Hour JavaScript Course & New Platform Traversy Media 2023-02-09 | $20 Coupon - TRAVERSYFIVEOFFtraversymedia.com/modern-javascript-2-0The coupon is good for ALL coursesThe 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 SupportPatreon: patreon.com/traversymediaPayPal: paypal.me/traversymedia👇 Follow Traversy Media On Social Media:Twitter: twitter.com/traversymediaInstagram: instagram.com/traversymediaLinkedin: linkedin.com/in/bradtraversyTimestamps:0:00 - Intro2:00 - Setup & Install Dependencies3:33 - Express Server & ENV Variables6:03 - Route & Controller9:58 - OpenAI Library Request/Response15:17 - Request Body Data19:34 - Frontend Setup24:00 - Form Event Listener26:38 - GenerateImageRequest() Function31:45 - Display Image in DOM33: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 SupportPatreon: patreon.com/traversymediaPayPal: paypal.me/traversymedia👇 Follow Traversy Media On Social Media:Twitter: twitter.com/traversymediaInstagram: instagram.com/traversymediaLinkedin: linkedin.com/in/bradtraversyTimestamps:0:00 - Intro0:47 - Slides6:48 - Docs8:14 - Setup & Install9:42 - Build & Watch Scripts12:40 - Autoprefixer & Plugin Config16:17 - postcss-preset-env18:05 - Custom selectors, media, nesting21:29 - PreCSS24:13 - PostCSS Import & File Structure28:42 - PostCSS Assets31: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 SupportPatreon: patreon.com/traversymediaPayPal: paypal.me/traversymedia👇 Follow Traversy Media On Social Media:Twitter: twitter.com/traversymediaInstagram: instagram.com/traversymediaLinkedin: linkedin.com/in/bradtraversyTimestamps:0:00 Project showcase1:25 Create react app / installs2:22 Navbar component6:00 Implementing React Router7:45 Creating pages for router10:35 Building rows and cols for Store page12:14 Creating products for React to use16:50 Loading products dynamically19:18 Creating product card component22:45 Creating a modal for the cart25:55 Creating our cart context (Cart functionality)46:02 Adding CartProvider to our app46:29 Creating add / remove product to product cards52:05 Adding cart functionality to navbar (number of items)54:40 Showing cart data in modal57:00 Creating CartProduct component1:01:00 Create Stripe account and add test products1:03:06 Creating Express server / installs1:05:00 Creating Stripe checkout request1:09:30 Adding Stripe IDs to React1:10:33 Creating checkout call from React1: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 SupportPatreon: patreon.com/traversymediaPayPal: paypal.me/traversymedia👇 Follow Traversy Media On Social Media:Twitter: twitter.com/traversymediaInstagram: instagram.com/traversymediaLinkedin: 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-electronTo package your app up for different platforms, you could use one of the following:github.com/electron/electron-packagerelectronforge.io⭐ All Courses:traversymedia.com💖 Show SupportPatreon: patreon.com/traversymediaPayPal: paypal.me/traversymedia👇 Follow Traversy Media On Social Media:Twitter: twitter.com/traversymediaInstagram: instagram.com/traversymediaLinkedin: linkedin.com/in/bradtraversyTimestamps:0:00 - Intro3:05 - Resources4:48 - Setup & Install Dependencies8:08 - Create Main Window12:45 - Common Boilerplate15:53 - Show Devtools18:10 - Using Electronmon18:54 - Adding the UI Theme21:26 - Content Security Policy23:00 - Menu Customization27:36 - Menu Roles30:00 - About Window31:53 - Start Renderer JS / Load Image38:15 - Get Original Dimensions39:40 - Using Preload44:28 - Show Output Path46:43 - Toastify Alerts50:58 - Form Submit Handler53:54 - IPC Renderer (Send)56:44 - IPC Main (Recieve)59:35 - Resize Image1:05:32 - Catch Message In Renderer1:07:32 - Make mainWindow Global1: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/traversymediaInstagram: instagram.com/traversymediaLinkedin: linkedin.com/in/bradtraversyTimestamps:00:00 Introduction00:30 Do use functional components02:22 Don’t think of function components as templates07:08 Do use TypeScript12:02 Don’t worry about re-renders (too much)14:35 Do learn to love dependency arrays18:36 Don’t ignore useCallback or useMemo22:25 Do learn to make custom hooks23:23 Don’t use Redux just because you think you have to26:00 Do use a query library27:50 Don’t make your own UI library29: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/traversymediaInstagram: instagram.com/traversymediaLinkedin: linkedin.com/in/bradtraversyTimestamps:0:00 - Intro0:50 - Agora Sponsor1:34 - Slides Start2:00 - Why Learn The Command Line?5:43 - Command Line vs Terminal vs Shell8:25 - Let's Talk About Windows10:30 - Gist File12:20 - Up & Down Arrow12:44 - Tab Key13:08 - Keyboard Shortcuts14:11 - man15:11 - whoami15:17 - date15:21 - clear15:47 - pwd16:09 - ls18:13 - cd19:35 - open, start, xdg-open20:25 - mkdir20:55 - touch21:22 - rm22:31 - rm -r23:48 - cp24:28 - mv27:46 - cat29:14 - RIght Angle Bracket (piping)30:32 - less31:00 - head31:21 - tail32:01 - nano33:04 - echo33:53 - grep36:10 - find38:03 - More On Piping39:44 - ln (symlinks)41:36 - tar43:45 - history
