Expense Tracker Web 💰 React

Simple income/expense tracker app web frontend built with React and 💕

This is the Expense Tracker Web frontend for Expense Tracker 💰 Lumen backend. You can find the backend repo and API documentation in the above link.

Features

Basic features include -

• Landing Page
• Login and Registration
• Update Profile
• Update Password
• Income/Expense Category Manage
• Income/Expense Transaction Manage
• Income/Expense Calendar View
• Currency Support
• Language Selection (needs locale files)
• Tools Sidebar with Calculator
• Current and Last Month Summary
• Month Wise Income Expense Chart
• Category Wise Income Expense Chart
• Responsive UI

Install Instruction

• At first download or clone Expense Tracker 💰 Lumen backend. Setup and configure the backend. Click the link for detail.
• Considering the backend is up and running, now download or clone this repo.
• Open terminal and cd into the directory.
• Run npm i to install the dependencies.
• Copy and save .env.example file as .env. Set API host in the .env file if necessary.
• Finally run the app with npm start.
• The app should be running at http://localhost:3000

Technology Used

Some libraries used that deserves mentioning.

• Prime React - The UI components used in the project on top of free template Sigma.
• React Tracked - Simple and fast global state manager. Eliminate unnecessary re-renders.
• React Hook Form - Performant, flexible and extensible forms with easy-to-use validation.
• React Calculator - Modified to adjust my tools sidebar.

Additionally I have added a custom template in the extra folder. The template is designed and created solely by me. The name is blueberry-orange. Which is not free to use or copy without permission.

Screenshots

1. Landing

More Info

This project is solely made for learning purposes. The structure of the project and the code practices may prove useful to new learners who are exploring new technologies.

Spare a ⭐ to keep me motivated. 😃