The Expense Tracker application is a modern React-based web app designed to help users manage their finances effectively. This application allows users to add, view, and track their expenses dynamically. Using the useState and useEffect hooks, it maintains a global state for managing expenses and stores data persistently with localStorage, ensuring that expense data is not lost upon page refresh. It features a dynamic and interactive form with controlled components, where inputs are managed using useState. Additionally, it includes visualizing expenses through graphs or pie charts, enabling users to analyze their spending patterns effectively.
This project demonstrates the core functionalities of React, including dynamic navigation using React Router, data management via props and state, and efficient component reuse. By the end of the project, you will have a fully functional Expense Tracker app with a sleek, user-friendly interface that incorporates best practices for React development.
Dashboard Component: Displays the monthly total expenses compared to the target amount. Provides an overview of category-wise monthly expenses through bar and pie charts for the selected month and year.
ExpensesSummary Component: Shows a detailed breakdown of expenses for the selected month and year.
AddExpense Component: Enables users to add a new expense by selecting details such as date, category, sub-category, payment method, and more. The expenses are stored in localStorage for persistence.
What You Will Learn?
Dynamic Navigation with React Router
Implement dynamic page navigation for a seamless single-page application experience.
Create routes for the Dashboard, Add Expense, and Expense History pages.
Using React JSX Dynamically
Embed function calls within JSX to render dynamic values.
Learn how to dynamically display content using JavaScript expressions in JSX.
Passing Data via Props
Understand how to pass data from parent to child components using props.
Dynamically render child components with varying data, ensuring flexibility and reusability.
Managing State with useState
Use the useState hook to manage expenses as a global state at the top level of the application.
Trigger component re-renders to dynamically update the user interface whenever the state changes.
Form Handling
Building a dynamic and interactive form with controlled components, where inputs like title and amount are managed using useState.
Persistent Data Storage with localStorage
Save expense data in localStorage to ensure it is retained across sessions.
Automatically load stored data when the application starts, making it user-friendly.
Reusing Components Effectively
Reuse functional components with different props to maintain consistency across the application.
Handle state changes and manage side effects efficiently with the useEffect hook.
Prop Validation with PropTypes
Ensure type safety and validate the props passed to components using PropTypes.
Catch bugs early by defining expected data types for your components.
Date Picker Functionality
Implementing a date picker functionality to select the month and year, as well as the full date.
Visualizing Expenses Through Graphs or Pie Charts
Learn to create intuitive data visualizations that represent expenses graphically, helping users analyze their spending patterns effectively.
Resources:
Install Plugins: Tailwind CSS IntelliSense, es7+ (ES7+ React/Redux/React-Native snippets)
Browser: Use the latest version of Google Chrome/Microsoft Edge.
Version Control: GitHub
https://color.adobe.com/explore
Vercel: Build and deploy the best web experiences with the Frontend Cloud
Create a React Project: Create a project folder "React" and open it in VS Code
Creating a Vite Project Using React
www.tailwindcss.com -> Framework Guides -> Vite -> Using React -> Run the commands
> npm create vite@latest
> Projectname: react-car-rental-website
> Select a framework: React
> Select a variant: JavaScript
> cd react-car-rental-website
> npm install
> Run your build process with "npm run dev" -> http://localhost:5173/
Delete "App.CSS" & Remove everything from index.css files.
Installing Tailwind CSS:
www.tailwindcss.com -> Framework Guides -> Vite -> Using React -> Run the commands
> npm install -D tailwindcss postcss autoprefixer
> npx tailwindcss init -p
Configure your template paths:
Add the paths to all of your template files in your tailwind.config.js file.
/** @type {import('tailwindcss').Config} */
export default {
content: ["./src/**/*.{html,js,jsx,ts,tsx}"],
theme: {
extend: {},
},
plugins: [],
}
Add the Tailwind directives to your CSS:
Add the @tailwind directives for each of Tailwind’s layers to your ./src/index.css file.
@tailwind base;
@tailwind components;
@tailwind utilities;
Installing Dependencies:
>npm install react-icons react-router-dom prop-types chart.js react-chartjs-2
NOTE: Encapsulate the 'App' component with 'BrowserRouter' in the 'main.jsx'
createRoot(document.getElementById('root')).render(
<BrowserRouter>
<App />
</BrowserRouter>,
)Add Global styles in "tailwind.config.js" file
Creating your own components...
GitHub Commands:
git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/codingZ2M/dummy.git
git push -u origin main
Comments