This React application is designed to help users manage and visualize their bank transactions. It provides a user-friendly interface for viewing, adding, searching, and filtering financial transactions. This project serves as an excellent example of how to build a basic CRUD (Create, Read, Update, Delete) application using React, demonstrating key concepts such as component structure, state management, and API interactions.
Key features of this application include:
- Displaying a list of transactions in a table format
- Adding new transactions through a form
- Searching and filtering transactions
- (Bonus features: Sorting transactions and deleting individual entries)
This project is ideal for beginners looking to understand React fundamentals and for intermediate developers aiming to reinforce their React skills.
##Hosting https://bank-transaction-flat-iron.vercel.app/
Before you begin, ensure you have the following installed on your system:
- Node.js (version 12.0 or higher)
- npm (usually comes with Node.js)
Follow these steps to get the project up and running on your local machine:
-
Fork the Repository
- Visit the project repository on GitHub
- Click the "Fork" button in the top-right corner to create a copy in your GitHub account
-
Clone the Repository
- Open your terminal
- Navigate to the directory where you want to store the project
- Run the following command, replacing
<your-username>
with your GitHub username:git clone https://github.com/<your-username>/bank-transactions-react-app.git
-
Navigate to the Project Directory
-
Install Dependencies
- Run the following command to install all necessary packages:
npm install
- Set Up the JSON Server
- This project uses
json-server
to simulate a backend API - Create a file named
db.json
in the root directory of the project - Add the following initial data to
db.json
:
http://localhost:8001/transactions
- Start the JSON Server
- Open a new terminal window
- Navigate to the project directory
- Run the following command:
json-server --watch db.json --port 8001
- Keep this terminal open to keep the server running
- Start the React Application
- In your original terminal window, run:
npm start
- This will start the development server and open the app in your default browser
Once the application is running, you can:
- View existing transactions in the table
- Add new transactions using the form at the top of the page
- Search for specific transactions using the search bar
- (If implemented: Sort transactions by clicking on table headers)
- (If implemented: Delete transactions using the delete button in each row)
src/App.js
: The main component that orchestrates the entire applicationsrc/TransactionTable.js
: Renders the table of transactionssrc/TransactionForm.js
: Handles the form for adding new transactionssrc/SearchBar.js
: Manages the search functionality
If you'd like to contribute to this project, please fork the repository and create a pull request, or open an issue for discussion.