3.3 project presentation

Hello everyone. In this short lesson I want to give you a preview of the project we are going to build together throughout the rest of this React section. The application is a small expense tracker: a single page where you can review past expenses and add new ones whenever you spend money.

Take the 2021 bar, for example. We can see that in March we bought a new TV, and in June we paid the car insurance. Each entry shows the date on a coloured card on the left and the title plus the amount on the right. We will create every one of these components, one after the other, so that by the end of the section the whole interface is in place.

Adding a new expense

  • Click the Add Expense button to reveal a small form.
  • Fill in a title — for example PC — and an amount such as 1000 €.
  • Pick the purchase date, for instance 10 August 2021.
  • Submit the form: the new entry appears immediately in the matching year.

Once submitted, you can see the August 2021 bar now contains our PC expense. The same mechanism works for any expense you add, and the list filters automatically by year so you only see what is relevant. We will build all of this step by step, and I will explain in detail how each piece works as we move through the next lessons. See you in the next class to actually start coding our little project.

Summary

This lesson presents the expense tracker project that students will build throughout this React course section. The instructor demonstrates the core functionality: viewing monthly expenses in a timeline/chart format (showing purchases like a TV in March, car insurance in June, and a PC costing €1000 in August) and adding new expenses to the tracker. The lesson provides an overview of how components will be gradually constructed and explains the project's workflow, setting up students for the next lesson where implementation begins.

Key points

  • The project is a personal expense tracker that visualizes spending by month and category
  • Users can view historical expenses on a timeline (e.g., TV purchase, car insurance, PC purchase) and add new expenses with details like date and cost
  • Components will be built incrementally throughout the course, with each lesson adding functionality to the tracker
  • The project demonstrates core React concepts including component architecture and state management for handling expense data
  • The lesson serves as a project overview/preview before diving into actual implementation in subsequent lessons

FAQ

What is the main goal of this project?

The project is to build an expense tracker application that allows users to view and manage their monthly spending. It demonstrates how to visualize expenses chronologically and add new expense records with details like date and amount.

What features does the expense tracker include?

The tracker displays expenses in a timeline/chart organized by month, shows specific purchases (TV, car insurance, PC), allows users to add new expenses by entering a description, amount, and date, and updates the visualization when new expenses are added.

How will this project be developed in the course?

The project will be built incrementally, with components constructed gradually across multiple lessons. This lesson provides the overall project presentation and overview, and the next lessons will detail how to implement each component step by step.