Traversy Media
Traversy Media
  • 979
  • 214 041 146
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
Переглядів: 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
Prisma Crash Course
Переглядів 58 тис.9 місяців тому
Prisma Crash Course
New Course Alert - JS Challenges: Data Structures & Algorithms
Переглядів 34 тис.9 місяців тому
New Course Alert - JS Challenges: Data Structures & Algorithms
Modern JavaScript From The Beginning | First 12 Hours
Переглядів 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?

КОМЕНТАРІ

  • @cristianleonardoarangodaza7886
    @cristianleonardoarangodaza7886 Годину тому

    someone is having issues connecting to the neon db with prisma?

  • @khlgaming36
    @khlgaming36 Годину тому

    I Learned a lot , thanks bro god bless you

  • @badbeatslayer
    @badbeatslayer 3 години тому

    08:00

  • @user-vj3cu3wv9l
    @user-vj3cu3wv9l 4 години тому

    i watch this legend like everyday, Brad i wish i meet you someday :(

  • @shrdn2960
    @shrdn2960 4 години тому

    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.

  • @khushijain5348
    @khushijain5348 5 годин тому

    are we supposed to wrap the environment variables in quotes ..because mine is not working without it

  • @MdMusfiqurRahman-xs6io
    @MdMusfiqurRahman-xs6io 5 годин тому

    This is a gem

  • @cloudagnostic
    @cloudagnostic 6 годин тому

    Great video Brad! Can you explain the globalThis? I’ve never seen this or know why this is needed. Thanks

  • @SabedTech
    @SabedTech 6 годин тому

    1 Language master on it ❣️

  • @codeaperture
    @codeaperture 7 годин тому

    You made me a developer and this is a must watch.. 😮 I rarely watch UA-cam

  • @leojohn6702
    @leojohn6702 7 годин тому

    Lovelly. BTW, do you have a AWS tutorial for node js hsoting?

  • @princemusole6225
    @princemusole6225 7 годин тому

    Love how simple this is.

  • @fariadworld446
    @fariadworld446 7 годин тому

    Any discount for the Yearly Membership will nice

  • @AbhinandanGhosh7
    @AbhinandanGhosh7 8 годин тому

    Anyone facing the following error when trying to migrate the schema? at 21:03 Error: P1017 Server has closed the connection.

  • @serychristianrenaud
    @serychristianrenaud 8 годин тому

    Thanks

  • @raj080288
    @raj080288 8 годин тому

    What are you using for the ui?

  • @skgamer2.027
    @skgamer2.027 8 годин тому

    please give me typescript tutorial

  • @RishiRajxtrim
    @RishiRajxtrim 9 годин тому

    Thanks

  • @DennisIvy
    @DennisIvy 9 годин тому

    Love to see Neon here! 💪

    • @alexdin1565
      @alexdin1565 9 годин тому

      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

    • @DennisIvy
      @DennisIvy 8 годин тому

      @@alexdin1565 Maybe one day ;)

  • @codernerd7076
    @codernerd7076 10 годин тому

    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...

    • @leojohn6702
      @leojohn6702 9 годин тому

      I can see you are not a dev😂😂😂

    • @codernerd7076
      @codernerd7076 8 годин тому

      @@leojohn6702 for not depending on 3rd party services for basic features... and controlling my project's budget?! Interesting take...

    • @jitx2797
      @jitx2797 8 годин тому

      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)

    • @leojohn6702
      @leojohn6702 8 годин тому

      @@jitx2797 why? If you want to use authentication with different services, third party apps does it best.

    • @codernerd7076
      @codernerd7076 7 годин тому

      @@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.

  • @mexicanmax227
    @mexicanmax227 10 годин тому

    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!!!!

    • @losmandev
      @losmandev 9 годин тому

      Lmao bro u tweakin cause what did I just read

    • @mexicanmax227
      @mexicanmax227 8 годин тому

      @@losmandev I’m celebrating bruh lol. #Love

    • @pogboii
      @pogboii 8 годин тому

      congratulations bro, celebrate and keep grinding <3

  • @salimshamim3851
    @salimshamim3851 10 годин тому

    Using Agora feels like cheating.

  • @alveek
    @alveek 11 годин тому

    Clerk.. of course

  • @abiolafolarin-lp8do
    @abiolafolarin-lp8do 11 годин тому

    Thanks man this video actually helps a lot and i got everything about flex in full detail. 🎉... Thanks brad

  • @EVExplorers
    @EVExplorers 11 годин тому

    Pretty good course, Brad. Can you please show us how to host NextJS app on cpanel please?

  • @ibizawavey8630
    @ibizawavey8630 11 годин тому

    I'm going to learn mobile development from scratch. fk hell.

  • @spashak6
    @spashak6 11 годин тому

    Mon fan depuis le Burkina-Faso

  • @webdevluc
    @webdevluc 12 годин тому

    Really cool project tutorial Brad. Kudos to you for generously sharing it for free

  • @abdulsalamumarbarambu6371
    @abdulsalamumarbarambu6371 12 годин тому

    Wooohhhw💥💥

  • @prathameshbhatkande2408
    @prathameshbhatkande2408 12 годин тому

    Next js?

  • @asifulahsan
    @asifulahsan 12 годин тому

    Please do a tutorial on flutter

  • @aleksandarstanisic1848
    @aleksandarstanisic1848 12 годин тому

    Ty man😅

  • @smartdriver2990
    @smartdriver2990 12 годин тому

    Amazing. New tech stack with brief and simple tutorial🎉

  • @FutureAIDev2015
    @FutureAIDev2015 12 годин тому

    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!

  • @theaymanian
    @theaymanian 12 годин тому

    NEW TATS HAHA

  • @ramendrasoni3368
    @ramendrasoni3368 12 годин тому

    Some people's are saying that react is getting down... Is there any other language to work efficiently with nodejs and Mongodb

    • @GamerSharp
      @GamerSharp 12 годин тому

      React is still here

    • @marcolancellotti8114
      @marcolancellotti8114 12 годин тому

      Some others say PHP is also going down. They started saying that 15 years ago. But it's still there.

    • @ramendrasoni3368
      @ramendrasoni3368 12 годин тому

      @@GamerSharp but still I feel it hard... I use te।plating engine ejs

  • @user-ys7ps7fy2h
    @user-ys7ps7fy2h 12 годин тому

    very good thank you it is sooooooooooooooooooooooooooo good

  • @alexdin1565
    @alexdin1565 12 годин тому

    please can you make a tutorial using nextjs + django?

    • @activelistener4484
      @activelistener4484 10 годин тому

      lol can you a make cocktail using beer and wine

    • @alexdin1565
      @alexdin1565 9 годин тому

      @@activelistener4484 my comment wasn't for donkeys

    • @losmandev
      @losmandev 9 годин тому

      You can use next as a front end that connects to Django through an api

  • @emmanuelnwabuodafi6415
    @emmanuelnwabuodafi6415 12 годин тому

    Please can we get a Vue equivalent boss... Nuxt 🎉

  • @infinioda108
    @infinioda108 12 годин тому

    Let's goooo 😸🔥

  • @habib_nuhu
    @habib_nuhu 12 годин тому

    Nice one Brad

  • @xvzf115
    @xvzf115 12 годин тому

    Nice

  • @tenzin_761
    @tenzin_761 12 годин тому

    Wow.🎉

  • @Gnajs
    @Gnajs 13 годин тому

    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!

  • @ceejayviii
    @ceejayviii 15 годин тому

    The Contractor example made it so understandable😅🎉.

  • @rashmiranjannayak8638
    @rashmiranjannayak8638 17 годин тому

    Will it be going to release on udemy too.

  • @AdnanAliDeol
    @AdnanAliDeol 18 годин тому

    Wonderful content.. Thanks' Brad !

  • @NurlanGuliyev-u8d
    @NurlanGuliyev-u8d 18 годин тому

    Well Done!

  • @k8ehops
    @k8ehops 23 години тому

    This was great, and helped me get my foot into the water for this without being too overwhelming. Thanks so much 💙

  • @ericntema949
    @ericntema949 День тому

    the importance of specialising in general