Skip to content

This is a nice introduction for how to handle data state for user's expenses. This app is for showcasing purpose and where I build a simple expense tracker using the React framework. There are currently no backend involved in this app as it's SPA (Single-Page-Application). We used React's amazing Javascript logic & in line HTML and some basic CSS.

Notifications You must be signed in to change notification settings

JSirisavath/expense-tracker-react

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React Expense Tracker App

Developer: Jerry Sirisavath

Initial Commit To GitHub: 04-26-23

Introduction

The Expense Tracker App is a user-friendly React application designed to assist users in managing their personal finances. By tracking income and expenses, this app provides a clear overview of financial activities, enabling better budgeting and financial planning.

Getting Started

To run the Expense Tracker App:

  1. Ensure you have Node.js and npm installed.
  2. Clone the repository to your local machine.
  3. Navigate to the project directory in your console.
  4. Run the command npm start to launch the app on a web server.

Features

  • Expense and Income Tracking: Users can input and track their expenses and income, categorizing them for better financial management.
  • Dynamic Data Management: Utilizes state hooks (useState) for handling dynamic data, reflecting changes in real-time as users interact with the app.
  • User-Friendly Interface: Designed with a focus on simplicity and ease of use, ensuring a seamless user experience.

Screenshots

Screenshot 2024-01-09 at 10 48 06 PM Screenshot 2024-01-09 at 10 49 57 PM Screenshot 2024-01-09 at 10 50 35 PM Screenshot 2024-01-09 at 10 51 42 PM Screenshot 2024-01-09 at 10 52 13 PM Screenshot 2024-01-09 at 10 52 32 PM Screenshot 2024-01-09 at 10 52 58 PM

Technical Insights

  • React Framework: The app is built using React, showcasing the efficiency in developing with beautiful UI/UX while keeping in mind the user's experience and data flow.
  • State Management with Hooks: Prior to hooks, state management in React was confined to class components. The introduction of hooks like useState has revolutionized this, allowing for state management in functional components. This project emphasizes my understanding and implementation of these hooks to manage component states effectively.
  • Responsive Design: The app is crafted to be responsive, ensuring a consistent experience across various devices and screen sizes.

Personal Development

This project was instrumental in enhancing my understanding of React's functional components and state management. The challenge of implementing hooks for dynamic data handling has significantly improved my skills in modern React development practices.

Future Enhancements

Plans for future development of the Expense Tracker App include:

  • Implementing more advanced features such as budget planning and financial reports.
  • Integrating a database for persistent storage of user data.
  • Enhancing the user interface with more interactive elements and visualizations of financial data.

Conclusion

The Expense Tracker App represents a significant step in my journey as a React developer. It showcases not only my technical skills but also my commitment to creating practical, user-centric software solutions.

Thank you for your interest in the Expense Tracker App. Feedback and contributions are highly appreciated!

About

This is a nice introduction for how to handle data state for user's expenses. This app is for showcasing purpose and where I build a simple expense tracker using the React framework. There are currently no backend involved in this app as it's SPA (Single-Page-Application). We used React's amazing Javascript logic & in line HTML and some basic CSS.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published