💻 #54: Build an expense tracker with React.js 🤑

Master React while building an expense tracker 📈

Happy Friday, developer! 👋

I hope you had a great week! Do you have a personal budget / a way to manage your spending? I currently use YNAB and I love it. Let me know on Twitter, I’m curious to know what works for you.

In this weekend’s tutorial, we’re going to make an expense tracker using React.js.

Tutorial of the week:

Length: 50 minutes
Difficulty: Easy

This weekend’s tutorial is by one of my favourite tutorial maker’s Traversy Media. He consistently puts out fantastic content, teaching your web development in a clear and concise way.

In this quick tutorial, we’ll be making an expense tracker. What you’ll learn:

• Reactjs 🌐

• Functional components

• React Hooks 🪝

• ContextAPI

---

Feature your project next week!

Are you building something you want to show off or get feedback on? Send me the link by replying to this email, or fill out the google form below.

➡️ Fill out this Google Form ⬅️

---

3 creative projects of the week:

1. Mood2Movie

React.js, DaisyUI

Are you ever in the mood for a specific type of movie, but can’t quite pin down what movie to watch? Well, Marc solved this problem by categorizing movies into mood groups to help you find what you’re looking for.

Made by Marc

Check it out!

---

3. A Musical Planet

MongoDB, Express, React, Node.js

In this weekend’s travel spirit, this full-stack app is using the Spotify API to have you guess where in the world a song is from! You play by listening to a sample track of a local band and guessing where in the world they are from! 🌎

Check it out!

Very creative and a great use of a free API! Great work @DylanTelson, you absolutely crushed it with this!

---

3. Berman.xyz

Vue.js & SCSS

A personal website is just as important as the projects you share on it. They give you the power to add your personality to that first impression employers get from you.

Personal sites don’t need to be overly complex or flashy, just clearly show off who you are, what you do, and what you have done in the past.

Senior front-end developer, Mike Berman, does a really good job of this with his website, check out the really creative animation sequence he’s set up as you scroll down the page and how it relates to his experiences.

Check it out!

---

I teamed up with Udemy to bring you a discount as a new user. If you’re looking to grab a course on web development courses start at $14.99! Click here to get your first course for $14.99

That’s all folks!

I hope you enjoyed this weekend’s edition of Weekend Web Dev!

If you create anything please share it with me on Twitter or reply to this email!

I’d love to see what you’re building.

Your fellow weekend developer,

Devan