Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/k-koech/bank-of-flatiron
https://github.com/k-koech/bank-of-flatiron
Last synced: 12 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/k-koech/bank-of-flatiron
- Owner: k-koech
- Created: 2022-11-03T07:40:21.000Z (about 2 years ago)
- Default Branch: master
- Last Pushed: 2022-11-03T08:09:37.000Z (about 2 years ago)
- Last Synced: 2023-03-05T15:36:38.525Z (over 1 year ago)
- Language: JavaScript
- Homepage: https://zippy-malasada-9d79c0.netlify.app/
- Size: 387 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Bank of Flatiron
Welcome to the Bank of Flatiron, where you can trust us with all your financial
data! Use the below gif as an example of how the app should function.
> To view in VSCode, right click on the README.md file and select "Open Preview".
## Instructions
For this project, you’ll be building out a React application that displays a
list of your recent bank transactions, among other features.
Part of what this code challenge is testing is your ability to follow given
instructions. While you will definitely have a significant amount of freedom in
how you implement the features, be sure to carefully read the directions for
setting up the application.
## Setup
After unbundling the project:
1. Run `npm install` in your terminal.
2. Run `npm run server`. This will run your backend on port `8001`.
3. In a new terminal, run `npm start`. This will run your React app on port `8000`.
Make sure to open
[http://localhost:8001/transactions](http://localhost:8001/transactions) in the
browser to verify that your backend is working before you proceed!
The app uses [Semantic UI](https://semantic-ui.com/) for styling. If you see any
unfamiliar classNames on some components, don't sweat! That's coming from
Semantic UI and you shouldn't need to touch it.
If you are unfamiliar with HTML tables, take a look at the
[docs with an example here](https://www.w3schools.com/html/html_tables.asp)
## Endpoints
The base URL for your backend is: `http://localhost:8001`
## Deployed backend URL
[DB json](https://react-codechallenges.herokuapp.com/transactions)
## Core Deliverables
As a user, I should be able to:
- See a table of the transactions.
- Fill out and submit the form to add a new transaction. This should add the new
transaction to the table **as well as post the new transaction to the backend
API for persistence**.
- Filter transactions by typing into the search bar. Only transactions with a
description matching the search term should be shown in the transactions
table.
### Endpoints for Core Deliverables
#### GET /transactions
Example Response:
```json
[
{
"id": 1,
"date": "2019-12-01",
"description": "Paycheck from Bob's Burgers",
"category": "Income",
"amount": 1000
},
{
"id": 2,
"date": "2019-12-01",
"description": "South by Southwest Quinoa Bowl at Fresh & Co",
"category": "Food",
"amount": -10.55
}
]
```
#### POST `/transactions`
Required Headers:
```js
{
"Content-Type": "application/json"
}
```
Request Object:
```json
{
"date": "string",
"description": "string",
"category": "string",
"amount": number
}
```
Example Response:
```json
{
"id": 1,
"date": "2019-12-01",
"description": "Paycheck from Bob's Burgers",
"category": "Income",
"amount": 1000
}
```
## Advanced Deliverables
These deliverables are not required to pass the code challenge, but if you have
the extra time, or even after the code challenge, they are a great way to
stretch your skills.
> Note: If you are going to attempt these advanced deliverables, please be sure
> to have a working commit with all the Core Deliverables first!
As a user, I should be able to:
- Sort transactions alphabetically by category or description.
- Delete a transaction which will remove it from the table and delete it from the backend.
### Endpoints for Advanced Deliverables
#### DELETE /transactions/:id
Example Response:
```json
{}
```