React for Beginners : Build a Real Expense Tracker

learn React.js from scratch by building a real-world expense tracker with filters, add/update/delete expenses, and charts to visualize data, showcasing React’s reactive UI approach.

Install node.js and a code editor, scaffold a new vite react project named expense tracker, and explore the src folder with index.html and app.js.

Download the provided resources and install Tailwind CSS to style the expense tracker, configure the VIT plugin, and apply Tailwind classes via className.

Learn to replace static HTML with dynamic data by importing a JavaScript data file, mapping expenses, and rendering a responsive UI in React.

Learn to manage interactive data in React by using the useState hook to track expenses, update totals, and refresh UI elements like charts as data changes.

Attach a submit handler to the expense form to prevent default, create a new expense with id, description, amount as float, day, and category, and update the expenses table.

Improve expense logic by validating form inputs to prevent empty submissions, resetting the form after adding, and updating the list with the new expense on top using a spread operator.

Add delete expense logic in a React app by filtering the expense by id and updating state with setExpenses. Attach the handler to the delete button.

Filter expenses by category to display only matching items using a category state and a change handler in React. See real-time updates as you select different categories.

Learn to filter expenses by date in a React beginners course, using a filter state with start and end date inputs and a reset button.

Track the dynamic total by summing filtered expenses with a reduce function, starting from zero and updating automatically as expenses are added, deleted, or filtered.

Build an empty state user interface in React by conditionally rendering a 'no expenses here' message when the filtered expenses are empty, using a ternary and length checks.

Learn to open an edit modal, populate an edit form with a selected expense, and manage edit form state in React to update expense details.

Enhance the expense tracker by resetting edit state when the modal closes, adding a cancel button, and enabling outside-click to close while preventing inner clicks from closing.

Install Chart.js and react-chartjs-2, import and register chart components, and build basic pie and bar charts with hard-coded data for an expense tracker.

Make the pie chart dynamic by grouping expenses by category and summing amounts into category totals using reduce, preparing the chart data from expense objects.

Build a dynamic bar chart by grouping expenses by date and summing amounts per date, using dates and amounts as the data, and set the chart label to expenses.

Enhance a bar chart in a React expense tracker by customizing dark theme styling: set axis ticks, grid lines, colors, and legend placement through chart options.

Learn to implement a simple React notification system that appears on create, update, or delete actions, using state and auto-dismiss.

Refactor the expense form into a data-driven React component that accepts form data and handlers via props, wiring handle change and handle submit and ensuring notifications display.

Refactor by extracting the filters section into its own component, and pass data and handlers as props to create a reusable module.

Refactor the charts component by creating a charts section, passing category data, date, chart data, and chart options, and importing pi and bar to render responsive charts.

Persist expenses in the browser by storing them in local storage. Convert expenses to strings, save them with setItem, and load with getItem, updating on each change via useEffect.