Build a Simple React JS Interactive Web-Based Expense Tracker: A Beginner’s Guide

Written by

javascriptdebugged

in

Managing personal finances can often feel like navigating a complex maze. Keeping track of income and expenses, categorizing transactions, and understanding spending habits are crucial for financial health. While spreadsheets and notebooks have served this purpose for years, they can be cumbersome and prone to errors. This is where a simple, interactive expense tracker built with React JS comes to the rescue. This tutorial will guide you through building a functional expense tracker, empowering you to take control of your finances while learning the fundamentals of React development.

Why Build an Expense Tracker with React?

React JS is a powerful JavaScript library for building user interfaces. It’s known for its component-based architecture, which makes it easier to create reusable UI elements and manage complex applications. Building an expense tracker with React offers several advantages:

  • Component-Based Architecture: Allows you to break down the application into smaller, manageable components, making the code easier to understand, maintain, and debug.
  • Interactive User Interface: React excels at creating dynamic and responsive user interfaces, providing a smooth and engaging user experience.
  • State Management: React’s state management capabilities enable you to easily track and update data, such as expenses and categories.
  • Learning Opportunity: Building an expense tracker is a practical way to learn and practice fundamental React concepts like components, state, props, and event handling.

Prerequisites

Before we dive in, ensure you have the following prerequisites in place:

  • Basic Understanding of HTML, CSS, and JavaScript: Familiarity with these web technologies is essential for understanding the code and styling the application.
  • Node.js and npm (Node Package Manager) installed: Node.js is a JavaScript runtime environment, and npm is a package manager used to install React and other dependencies. You can download them from the official Node.js website.
  • A Code Editor: Choose your preferred code editor (e.g., Visual Studio Code, Sublime Text, Atom) to write and edit your code.

Setting Up the Project

Let’s get started by setting up the project. Open your terminal or command prompt and navigate to the directory where you want to create your project. Then, run the following command to create a new React application using Create React App:

npx create-react-app expense-tracker

This command will create a new directory named “expense-tracker” with all the necessary files and dependencies. Once the installation is complete, navigate into the project directory:

cd expense-tracker

Now, start the development server by running:

npm start

This will open your React application in your default web browser at `http://localhost:3000`. You should see the default React app. Now, let’s clean up the project. Open the `src` directory in your code editor. Delete the following files: `App.css`, `App.test.js`, `index.css`, `logo.svg`, and `reportWebVitals.js`, `setupTests.js`. Edit `index.js` to remove the import of `index.css`. Edit `App.js` and replace the content with the following:

import React from 'react';

function App() {
  return (
    <div className="container">
      <h1>Expense Tracker</h1>
      <p>Welcome to your Expense Tracker!</p>
    </div>
  );
}

export default App;

Also, create a new file named `App.css` in the `src` directory, and add the following basic styling:

.container {
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f9f9f9;
  text-align: center;
}

h1 {
  color: #333;
}

Building the Expense Tracker Components

Our expense tracker will consist of several components:

  • ExpenseForm: Allows users to add new expenses.
  • ExpenseList: Displays a list of expenses.
  • ExpenseItem: Represents a single expense in the list.
  • ExpenseSummary: Shows the total expenses.

1. ExpenseForm Component

This component will handle the input fields for expense details (description, amount, and date) and a button to add the expense. Create a new file named `ExpenseForm.js` in the `src` directory and add the following code:

import React, { useState } from 'react';

function ExpenseForm({ onAddExpense }) {
  const [description, setDescription] = useState('');
  const [amount, setAmount] = useState('');
  const [date, setDate] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!description || !amount || !date) {
      alert('Please fill in all fields.');
      return;
    }
    const newExpense = {
      id: Math.random().toString(), // Generate a unique ID
      description,
      amount: parseFloat(amount),
      date,
    };
    onAddExpense(newExpense);
    setDescription('');
    setAmount('');
    setDate('');
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="description">Description:</label>
        <input
          type="text"
          id="description"
          value={description}
          onChange={(e) => setDescription(e.target.value)}
        />
      </div>
      <div>
        <label htmlFor="amount">Amount:</label>
        <input
          type="number"
          id="amount"
          value={amount}
          onChange={(e) => setAmount(e.target.value)}
        />
      </div>
      <div>
        <label htmlFor="date">Date:</label>
        <input
          type="date"
          id="date"
          value={date}
          onChange={(e) => setDate(e.target.value)}
        />
      </div>
      <button type="submit">Add Expense</button>
    </form>
  );
}

export default ExpenseForm;

In this code:

  • We use the `useState` hook to manage the form input values (description, amount, and date).
  • The `handleSubmit` function is called when the form is submitted. It prevents the default form submission behavior, validates the input, creates a new expense object, and calls the `onAddExpense` function (passed as a prop) to add the expense to the list.
  • The form includes input fields for description, amount, and date, and a submit button.

2. ExpenseList Component

This component will display a list of expenses. Create a new file named `ExpenseList.js` in the `src` directory and add the following code:

import React from 'react';
import ExpenseItem from './ExpenseItem';

function ExpenseList({ expenses }) {
  return (
    <div>
      <h2>Expenses</h2>
      <ul>
        {expenses.map((expense) => (
          <ExpenseItem key={expense.id} expense={expense} />
        ))}
      </ul>
    </div>
  );
}

export default ExpenseList;

In this code:

  • The `ExpenseList` component receives an `expenses` prop, which is an array of expense objects.
  • It maps over the `expenses` array and renders an `ExpenseItem` component for each expense. The `key` prop is essential for React to efficiently update the list.

3. ExpenseItem Component

This component will display the details of a single expense. Create a new file named `ExpenseItem.js` in the `src` directory and add the following code:

import React from 'react';

function ExpenseItem({ expense }) {
  return (
    <li>
      <div>Description: {expense.description}</div>
      <div>Amount: ${expense.amount.toFixed(2)}</div>
      <div>Date: {expense.date}</div>
    </li>
  );
}

export default ExpenseItem;

In this code:

  • The `ExpenseItem` component receives an `expense` prop, which is a single expense object.
  • It displays the description, amount (formatted to two decimal places), and date of the expense.

4. ExpenseSummary Component

This component will display the total expenses. Create a new file named `ExpenseSummary.js` in the `src` directory and add the following code:

import React from 'react';

function ExpenseSummary({ expenses }) {
  const totalExpenses = expenses.reduce((sum, expense) => sum + expense.amount, 0);

  return (
    <div>
      <h2>Total Expenses: ${totalExpenses.toFixed(2)}</h2>
    </div>
  );
}

export default ExpenseSummary;

In this code:

  • The `ExpenseSummary` component receives an `expenses` prop, which is an array of expense objects.
  • It calculates the total expenses using the `reduce` method.
  • It displays the total expenses, formatted to two decimal places.

5. Integrating Components into App.js

Now, let’s integrate these components into our `App.js` file. Update `App.js` with the following code:

import React, { useState } from 'react';
import ExpenseForm from './ExpenseForm';
import ExpenseList from './ExpenseList';
import ExpenseSummary from './ExpenseSummary';
import './App.css';

function App() {
  const [expenses, setExpenses] = useState([]);

  const addExpense = (newExpense) => {
    setExpenses([...expenses, newExpense]);
  };

  return (
    <div className="container">
      <h1>Expense Tracker</h1>
      <ExpenseForm onAddExpense={addExpense} />
      <ExpenseSummary expenses={expenses} />
      <ExpenseList expenses={expenses} />
    </div>
  );
}

export default App;

In this code:

  • We import the `ExpenseForm`, `ExpenseList`, and `ExpenseSummary` components.
  • We use the `useState` hook to manage the `expenses` state, which is an array of expense objects.
  • The `addExpense` function is used to add a new expense to the `expenses` array. It receives a `newExpense` object as an argument and updates the state by creating a new array that includes the existing expenses and the new expense.
  • We pass the `addExpense` function as a prop to the `ExpenseForm` component.
  • We pass the `expenses` array as a prop to the `ExpenseList` and `ExpenseSummary` components.

Testing the Application

With all the components in place, it’s time to test the application. Run your React application using `npm start` if it’s not already running. You should see the expense tracker interface in your browser. Try adding some expenses by filling out the form and clicking the “Add Expense” button. Verify that the expenses are displayed in the list and that the total expenses are calculated correctly.

Adding Features and Enhancements

Once you have the basic expense tracker working, you can add more features and enhancements to improve its functionality and user experience. Here are some ideas:

  • Expense Categories: Add a dropdown or input field to categorize expenses (e.g., food, transportation, housing).
  • Expense Filtering: Implement filters to view expenses by category, date range, or amount.
  • Expense Editing and Deletion: Add functionality to edit and delete existing expenses.
  • Data Persistence: Use local storage or a database (e.g., Firebase, MongoDB) to store expense data so it persists between sessions.
  • Charting: Use a charting library (e.g., Chart.js) to visualize expense data, such as a pie chart showing spending by category.
  • Responsive Design: Make the application responsive to different screen sizes using CSS media queries or a CSS framework like Bootstrap.
  • User Authentication: Implement user authentication to allow multiple users to use the expense tracker.

Common Mistakes and How to Fix Them

Here are some common mistakes beginners make when building React applications and how to fix them:

  • Incorrect Component Import/Export: Make sure you correctly import and export your components. Double-check the file paths and the use of `import` and `export` statements. For example, if you export a component using `export default`, you must import it as `import MyComponent from ‘./MyComponent’;`.
  • Incorrect State Updates: When updating state, always create a new copy of the state object or array instead of directly modifying the existing one. Use the spread operator (`…`) to create a new copy. For example, to add an item to an array, use `setItems([…items, newItem])`.
  • Missing or Incorrect Key Prop: When rendering lists of components, always provide a unique `key` prop to each element. This helps React efficiently update the list. The `key` prop should be unique among siblings. Use an ID from your data or generate a unique ID using a library like `uuid`.
  • Incorrect Event Handling: Ensure you are passing the correct event handler functions to the appropriate event listeners (e.g., `onChange`, `onClick`). Make sure the event handlers are correctly bound to the component instance if needed.
  • Forgetting to Handle Form Submissions: In forms, remember to prevent the default form submission behavior (which reloads the page) by calling `e.preventDefault()` in your `handleSubmit` function.
  • Not Properly Passing Props: Double-check that you are passing the correct props to child components and that the child components are accessing the props correctly. Typos in prop names are a common source of errors.

Key Takeaways

  • Component-Based Architecture: React applications are built using reusable components, which makes the code modular and easier to maintain.
  • State Management: The `useState` hook is used to manage the state of components, which represents the data that changes over time.
  • Props: Props are used to pass data from parent components to child components.
  • Event Handling: Event handlers are used to respond to user interactions, such as button clicks and form submissions.
  • Building a Simple Application: The expense tracker demonstrates how to build a simple, interactive application with React, covering core concepts.

FAQ

Here are some frequently asked questions about building an expense tracker with React:

  1. Can I use this expense tracker on my phone? Yes, you can access your expense tracker on your phone by deploying it to a platform like Netlify or Vercel. You may need to adjust the styling to make it fully responsive.
  2. How do I store the expense data permanently? You can use local storage, a database like Firebase or MongoDB, or a backend server to store your expense data persistently.
  3. How can I add more features to my expense tracker? You can add features such as expense categories, filtering, editing, deletion, and charting to enhance the functionality of your expense tracker.
  4. What are the best practices for React development? Some best practices include using functional components with hooks, keeping components small and focused, writing clean and readable code, and using proper state management.
  5. How can I improve the user interface? You can use CSS frameworks like Bootstrap or Tailwind CSS, or create your own custom styles, to enhance the visual appeal and user experience of your expense tracker.

Creating this expense tracker is more than just coding; it’s about understanding how to structure a React application, manage data, and respond to user interactions. As you continue to build and refine this project, you’ll not only hone your React skills but also gain a deeper appreciation for the power and flexibility of this popular JavaScript library. The ability to create a functional and engaging application from scratch is a testament to your growing abilities. The journey of building an expense tracker, with all its challenges and triumphs, will undoubtedly leave you with a solid foundation for future React projects. Keep experimenting, keep learning, and keep building.

More posts