This project is a frontend application for managing and visualizing financial transactions. It is built with React and various libraries to provide an interactive user interface for tracking transactions, displaying charts, and more.
- Display a list of transactions with details such as date, description, amount, etc.
- View detailed information about individual transactions.
- Add, edit, and delete transactions.
- Visualize transaction data using charts.
- Styled using Material-UI components.
-
Clone the repository:
git clone https://github.com/renad-lab/project-budgeting-app-frontend.git
-
Navigate to the project directory:
cd project-budgeting-app-frontend -
Install dependencies:
npm install
-
Install Material-UI:
npm install @mui/material @emotion/react @emotion/styled
-
Start the development server:
npm run dev
- Visit the home page to see the list of transactions and charts.
- Click on any transaction to view its details, edit, or delete it.
- Add new transactions through the provided form.
src/Components/Home/Home.jsx: The home page of the application, displaying transactions and charts.src/Components/TransactionsTable/TransactionsTable.jsx: Component for displaying the table of transactions.src/Components/TransactionChart/TransactionChart.jsx: Component for displaying transaction charts.src/Components/Show/Show.jsx: Component for displaying detailed information about a transaction.
The project is deployed on Netlify. You can access it here.
Contributions are welcome! Please open an issue or submit a pull request for any changes or improvements.
This project is licensed under the MIT License.