💰 Budget Control - Financial Tracker

Budget Control is a simple and intuitive financial tracker to manage your income and expenses. Easily log transactions, track your balance, and stay in control of your finances.

🔗 Live Project: martonpaulo.github.io/budget-control

Check out the Figma prototype here (Portuguese): Figma Link.

This project is based on a RocketSeat tutorial.

For more of my work, visit my portfolio: martonpaulo.com.

🔧 Features

1. Summary Dashboard: Instantly see your total income, expenses, and overall balance.
2. Add Transactions: Quickly log your income and expenses.
3. List Transactions: View all transactions in a clear table format.
4. Pagination: Easily navigate through multiple pages of transactions.
5. Search and Filter: Find specific transactions using smart filtering.

🛠️ Technologies Used

This project is built using React, Vite, TypeScript, Styled Components, Radix UI, JSON Server, Axios, Context API, React Compiler and GitHub Actions.

🚀 Getting Started

To get started with the project, follow these steps:

1. Clone the repository: git clone https://github.com/martonpaulo/budget-control.git
2. Navigate to the project directory: cd budget-control
3. Install the dependencies: npm install

📜 Available Scripts

In the project directory, you can run the following scripts:

• npm run dev - Starts the development server at http://localhost:3000/budget-control.
• npm run build - Builds the project for production, outputting the files to the dist folder.
• npm run lint - Runs ESLint to lint the code and ensure code quality.
• npm run server - Starts the JSON Server at http://localhost:3333/.

📦 API Service

The project uses a JSON Server to simulate a backend API service. The server runs on http://localhost:3333/ and serves the transactions data.

If you don't want to use the JSON Server, you can use the localStorage to store the transactions data. To do this, you can set the VITE_USE_LOCAL_STORAGE environment variable to true in the .env file.

TODO List

• Set up project with Vite, React, and TypeScript
• Add README description
• Add License
• Set up ESLint
• Add project favicon
• Change port to 3000
• Initial setup by clearing unnecessary files
• Update package.json settings
• Add Figma Prototype
• Set up GitHub repository
• Add GitHub description
• Add GitHub Actions and deploy to GitHub Pages
• Modify overall design: font, colors, etc.
• List project technologies
• List project features
• Add pagination to transactions
• Alternative to JSON Server
• Set character limit for form inputs
• Set delay only for the first request
• Add delete transaction feature
• Add responsive layout
• Add project recording
• Add project to portfolio

📄 License

This project is licensed under the MIT License. For more details, see the LICENSE file.