![Traversy Media](/img/default-banner.jpg)
- 979
- 214 041 146
Traversy Media
United States
Приєднався 30 жов 2009
Traversy Media features the best online web development and programming tutorials for all of the latest web technologies from the building blocks of HTML, CSS & JavaScript to frontend frameworks like React and Vue to backend technologies like Node.js, Python and PHP
Build An Expense Tracker with Next.js Server Actions, TS, Prisma, Neon & Clerk
Let's build a full stack app with some of my favorite technologies:
Neon (Sponsor) - fyi.neon.tech/traversy
Clerk (Sponsor) - go.clerk.com/BsG2XQJ
Prisma - www.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
Neon (Sponsor) - fyi.neon.tech/traversy
Clerk (Sponsor) - go.clerk.com/BsG2XQJ
Prisma - www.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
Переглядів: 7 767
Відео
Course Announcement: Modern HTML & CSS 2.0
Переглядів 20 тис.16 годин тому
$15 Promo: TRAVERSYHTMLCSS www.traversymedia.com/modern-html-css-from-the-beginning Direct Link: www.traversymedia.com/offers/MbnXwWqH?coupon_code=TRAVERSYHTMLCSS Udemy Promo Link: www.udemy.com/course/modern-html-css-from-the-beginning/?couponCode=TRAVERSYHTMLCSS
Admin Dashboard From Scratch - Next.js, TypeScript, Shadcn/ui
Переглядів 37 тис.21 день тому
In this video, we will build a dashboard interface from scratch. Check out the sponsor, Mailtrap: l.rw.rw/traversy_media Full Source Code: github.com/bradtraversy/traversypress-ui This project will use the following technologies: - React/Next.js - Shadcn/ui - TypeScript - Tailwind CSS - Recharts - Lucide React - React Hook Form & Zod Full Next.js Course: www.traversymedia.com/nextjs-from-scratc...
The Importance of Specialization in Coding
Переглядів 183 тис.Місяць тому
Many people want to learn everything, which is impossible. Pick a tech stack and learn as much as you can about that group of technologies. It will make you more valuable than being a jack of all trades. Check out My Courses: traversymedia.com
Express Crash Course (2024 Revamp)
Переглядів 48 тис.Місяць тому
Get started with the most popular web framework for Node.js. Code from Video: github.com/bradtraversy/express-crash/ Node.js Crash Course: ua-cam.com/video/32M1al-Y6Ag/v-deo.html 14 Hour Node.js API Masterclass Course: www.traversymedia.com/node-js-api-masterclass Timestamps: 0:00 - Intro & Slides 0:53 - What is Express? 2:28 - Opinionated vs Unopinionated 4:10 - Prerequisites 5:18 - What we'll...
Node.js Crash Course (2024 Revamp)
Переглядів 101 тис.2 місяці тому
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: ua-cam.com/video/CnH3kAXSrmU/v-deo.html Node.js API Masterclass: www.traversymedia.com/node-js-api-masterclass Timestamps: 0:00 - Intro & Slides 12:18 - Installation 13:22 - No...
20 Browser Extensions For Web Design & Development
Переглядів 47 тис.2 місяці тому
Let's take a look at some browser extensions for web designers and developers. This includes Chrome extensions and Firefox Addons that help with design, testing, debugging, productivity and more. Full Article With Links: www.traversymedia.com/blog/20-browser-extensions Timestamps: 0:00 - Intro 2:10 - ColorZilla 2:53 - WhatFont 3:22 - Wappalyzer 4:13 - Web Developer 5:24 - Dark Reader 5:52 - JSO...
Microservices Crash Course & Moleculer JS Intro
Переглядів 38 тис.2 місяці тому
An introduction to the microservices architecture and the Node.js Moleculer framework. Course Code: github.com/bradtraversy/microservices-example Moleculer Framework: moleculer.services/ Check out my courses: traversymedia.com Social Media: Github - github.com/bradtraversy Twitter - traversymedia Instagram - traversymedia Facebook - traversymedia Linkedin ...
React Crash Course 2024
Переглядів 314 тис.3 місяці тому
Learn the basics of React, such as components, props, state, data fetching, and more, while building a job listing frontend. Code: github.com/bradtraversy/react-crash-2024 React Front To Back Full Course: www.traversymedia.com/Modern-React-Front-To-Back-Course Check out all my courses: traversymedia.com Social Media: Github - github.com/bradtraversy Twitter - traversymedia Instagram...
20 Essential VS Code Extensions In 2024
Переглядів 139 тис.3 місяці тому
20 extensions for Visual Studio Code to increase your productivity. Check out my courses: traversymedia.com Social Media: Github - github.com/bradtraversy Twitter - traversymedia Instagram - traversymedia Facebook - traversymedia Linkedin - www.linkedin.com/in/bradtraversy Timestamps: 00:00 - Intro 1:08 - Prettier 1:56 - GitHub Copilot 3:05 - Live Server 3...
Exploring React 19 Features - use() Hook, Actions & More
Переглядів 56 тис.3 місяці тому
In this video, we will look at some of the features of React 19 including the React compiler, use() hook, form actions, new hooks like useFormState(), useFormStatus() and useOptimistic(). Code: github.com/bradtraversy/react-19-playground Check out my courses: traversymedia.com Social Media: Github - github.com/bradtraversy Twitter - traversymedia Instagram - traversyme...
Tailwind & JavaScript Project - Products Filtering UI
Переглядів 25 тис.3 місяці тому
In this project, we will create a product list using Tailwind CSS, and we will add filtering and add-to-cart functionality with JavaScript. Code: codepen.io/bradtraversy/pen/oNVKXBo 20 Projects Course: www.traversymedia.com/20-Vanilla-JavaScript-Projects Vanilla Projects Repo: github.com/bradtraversy/vanillawebprojects Blog Post: www.traversymedia.com/blog/product-filtering-ui 0:00 - Intro 2:02...
Next.js 14 Course Release With Promo
Переглядів 27 тис.4 місяці тому
$15 PROMO CODE: NEXT2024 TRAVERSY MEDIA: www.traversymedia.com/nextjs-from-scratch UDEMY: www.udemy.com/course/nextjs-from-scratch/?couponCode=NEXT2024
Stop Worrying About AI!
Переглядів 48 тис.4 місяці тому
In this quick video, I will share my opinion on AI and how it will affect software development. Check out my premium courses: traversymedia.com Social Media: Github - github.com/bradtraversy Twitter - traversymedia Instagram - traversymedia Facebook - traversymedia Linkedin - www.linkedin.com/in/bradtraversy
Web Development In 2024 - A Practical Guide
Переглядів 357 тис.5 місяців тому
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? www.traversymedia.com/modern-html-css-from-the-beginning Check Out All Courses: www.traversymedia.com Content Guide: www.traversymedia.com/guide Premium eBook Version: traversy.gumroad.com/l/web-dev-guide Timestamps: 0:00...
HTMX Crash Course | Dynamic Pages Without Writing Any JavaScript
Переглядів 136 тис.5 місяців тому
HTMX Crash Course | Dynamic Pages Without Writing Any JavaScript
Should You Test As A Web Developer?
Переглядів 28 тис.5 місяців тому
Should You Test As A Web Developer?
Astro Quick Start Course | Build an SSR Blog
Переглядів 50 тис.6 місяців тому
Astro Quick Start Course | Build an SSR Blog
Vue 3 & Composition API - Full Project
Переглядів 121 тис.7 місяців тому
Vue 3 & Composition API - Full Project
Are You Too Dumb To Code? A Chat About Imposter Syndrome
Переглядів 65 тис.7 місяців тому
Are You Too Dumb To Code? A Chat About Imposter Syndrome
Professional Website From Scratch | HTML & CSS For Beginners
Переглядів 123 тис.8 місяців тому
Professional Website From Scratch | HTML & CSS For Beginners
15 Web Developer-Related Career Paths
Переглядів 125 тис.8 місяців тому
15 Web Developer-Related Career Paths
Bun Crash Course | JavaScript Runtime, Bundler & Transpiler
Переглядів 66 тис.9 місяців тому
Bun Crash Course | JavaScript Runtime, Bundler & Transpiler
New Course Alert - JS Challenges: Data Structures & Algorithms
Переглядів 34 тис.9 місяців тому
New Course Alert - JS Challenges: Data Structures & Algorithms
Modern JavaScript From The Beginning | First 12 Hours
Переглядів 527 тис.10 місяців тому
Modern JavaScript From The Beginning | First 12 Hours
Simple Next.js & React Authentication With Clerk
Переглядів 50 тис.11 місяців тому
Simple Next.js & React Authentication With Clerk
Write A ChatGPT Chatbot With Node.js
Переглядів 81 тис.11 місяців тому
Write A ChatGPT Chatbot With Node.js
Build A RealTime Chat App With React & Appwrite Cloud
Переглядів 63 тис.11 місяців тому
Build A RealTime Chat App With React & Appwrite Cloud
New Bootstrap 5 Course & Why Bootstrap?
Переглядів 40 тис.Рік тому
New Bootstrap 5 Course & Why Bootstrap?
someone is having issues connecting to the neon db with prisma?
I Learned a lot , thanks bro god bless you
08:00
i watch this legend like everyday, Brad i wish i meet you someday :(
Love your videos Brad. But just like many others, I'm getting really concerned about vendor lock-in (even with generous free-tiers etc). Would love to see a 100%"vendor free" project.
are we supposed to wrap the environment variables in quotes ..because mine is not working without it
This is a gem
Great video Brad! Can you explain the globalThis? I’ve never seen this or know why this is needed. Thanks
1 Language master on it ❣️
You made me a developer and this is a must watch.. 😮 I rarely watch UA-cam
Lovelly. BTW, do you have a AWS tutorial for node js hsoting?
Love how simple this is.
Any discount for the Yearly Membership will nice
Anyone facing the following error when trying to migrate the schema? at 21:03 Error: P1017 Server has closed the connection.
Thanks
What are you using for the ui?
please give me typescript tutorial
Thanks
Love to see Neon here! 💪
Dennis, we want to see you with Brad in a full-stack project using Django + Next Nextjs is better for SEO and image optimizations and you know Django more than I do and why it is the best
@@alexdin1565 Maybe one day ;)
Don't use 3rd party auth services you will just be paying later for one unnecessary service, you really just saving yourself a few hours, they are sponsoring UA-camrs to trap more people in their system...
I can see you are not a dev😂😂😂
@@leojohn6702 for not depending on 3rd party services for basic features... and controlling my project's budget?! Interesting take...
I understand your concern. But it's not like they are trying to trap devs. (I too don't like external auth) Auth0 the big giant existed before the clerk and is being many high traffic apps are using it for example ChatGPT. Also 2 reasons: 1. For big companies in the US the dev time is very costly. So they don't want to spend their time and money into it. 2.CTO and devs just don't want to take the responsibility of any data breach. One less thing to worry about. Just point the time to them My opinion and seems like bad take)
@@jitx2797 why? If you want to use authentication with different services, third party apps does it best.
@@jitx2797 I worked for 3 big companies in the US and this is false (at least for the ones I know)! Companies I worked for didn't want to share their user data and spend a ton of money to host and secure their servers. None of the big companies I worked for would ever trust a start-up like Clerk to keep their user info safe, there is also a lot of value in "owning" your user data. There is a massive data broker business (but this goes a bit off-topic). Clerk and other startups are targeting small businesses and start-ups, and single young devs that haven't really deployed a lot of real-world projects with frameworks like Next.js yet.
I’m high AF lol. Brad you’re a god. when I run the Biotech industry, I’m moving back to Massachusetts and we gonna kick it. It’s crazy. I’m dominating the biotech industry (biggest hub in Boston so I’ll be moving back once I hit a leadership role) and you taught me how to code before that when I was younger so everybody thinks I’m from the future every job I jump to because I know so much shit cuz of you 😂. I just got a $20,000 credit card so today I’m celebrating. Thank you so much for all your content. Sending love to your family and loved ones. Everything the Sun touches gonna be my kids 😎. Fucking love you Brad, Lehs gooo!!!!
Lmao bro u tweakin cause what did I just read
@@losmandev I’m celebrating bruh lol. #Love
congratulations bro, celebrate and keep grinding <3
Using Agora feels like cheating.
Clerk.. of course
Thanks man this video actually helps a lot and i got everything about flex in full detail. 🎉... Thanks brad
Pretty good course, Brad. Can you please show us how to host NextJS app on cpanel please?
I'm going to learn mobile development from scratch. fk hell.
Mon fan depuis le Burkina-Faso
Really cool project tutorial Brad. Kudos to you for generously sharing it for free
Wooohhhw💥💥
Next js?
Please do a tutorial on flutter
Ty man😅
Amazing. New tech stack with brief and simple tutorial🎉
Ooh this could be interesting, I could track my spending and get my finances back under control, and simultaneously give myself a non-zero project portfolio!
NEW TATS HAHA
Some people's are saying that react is getting down... Is there any other language to work efficiently with nodejs and Mongodb
React is still here
Some others say PHP is also going down. They started saying that 15 years ago. But it's still there.
@@GamerSharp but still I feel it hard... I use te।plating engine ejs
very good thank you it is sooooooooooooooooooooooooooo good
please can you make a tutorial using nextjs + django?
lol can you a make cocktail using beer and wine
@@activelistener4484 my comment wasn't for donkeys
You can use next as a front end that connects to Django through an api
Please can we get a Vue equivalent boss... Nuxt 🎉
Let's goooo 😸🔥
Nice one Brad
Nice
Wow.🎉
In the file system module section, just writting writeFile() and readFile() one after another didnt work for me, I just got the "File written to..." logged. But it woked when I forced the order of the function exec with another async function: const main = async () => { await writeFile(); await readFile(); }; Anywho, thanks Brad for the crash course!
The Contractor example made it so understandable😅🎉.
Will it be going to release on udemy too.
Wonderful content.. Thanks' Brad !
Well Done!
This was great, and helped me get my foot into the water for this without being too overwhelming. Thanks so much 💙
the importance of specialising in general