├── .github └── workflows │ └── add_collaborators.yml ├── Phase-4-Round-1 ├── .gitignore ├── README.md ├── db.json ├── demo.gif ├── package.json ├── public │ ├── favicon.ico │ └── index.html └── src │ ├── components │ ├── AccountContainer.js │ ├── AddTransactionForm.js │ ├── App.js │ ├── Search.js │ ├── Transaction.js │ └── TransactionsList.js │ ├── index.js │ └── stylesheets │ └── App.css └── README.md /.github/workflows/add_collaborators.yml: -------------------------------------------------------------------------------- 1 | name: Add Collaborators 2 | on: 3 | watch: 4 | types: [started] 5 | 6 | jobs: 7 | add_collaborator: 8 | runs-on: ubuntu-latest 9 | steps: 10 | - uses: octokit/request-action@v2.x 11 | id: add_collaborator 12 | with: 13 | route: PUT /repos/{repo-owner}/{repo-name}/collaborators/{username} 14 | repo-owner: ${{ github.repository_owner }} 15 | repo-name: ${{ github.event.repository.name }} 16 | username: ${{ github.actor }} 17 | env: 18 | GITHUB_TOKEN: ${{ secrets.ADD_COLLABORATOR }} 19 | 20 | -------------------------------------------------------------------------------- /Phase-4-Round-1/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env 15 | npm-debug.log* 16 | yarn-debug.log* 17 | yarn-error.log* 18 | 19 | -------------------------------------------------------------------------------- /Phase-4-Round-1/README.md: -------------------------------------------------------------------------------- 1 | # Bank of Flatiron 2 | 3 | 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. 4 | 5 |  6 | 7 | ## Instructions 8 | 9 | For this project, you’ll be building out a React application that displays a list of your recent bank transactions, among other features. 10 | 11 | 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. 12 | 13 | ## Setup 14 | 15 | After cloning down the project: 16 | 17 | 1. Run `npm install` in your terminal 18 | 2. Run `npm start`: This will open both your React page on port `6002` and your backend on port `6001`. 19 | 3. 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. 20 | 4. 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) 21 | 22 | ## Endpoints 23 | 24 | The base URL for your backend is: `http://localhost:6001` 25 | 26 | These are the endpoints you might need: 27 | 28 | - GET: `/transactions` 29 | - POST: `/transactions` 30 | - DELETE: `/transactions/:id` 31 | 32 | ## Core Deliverables 33 | 34 | As a user, I should be able to: 35 | 36 | - See a table of the transactions. 37 | - 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**. 38 | - Filter transactions by typing into the search bar. Only transactions with a description matching the search term should be shown in the transactions table. 39 | 40 | ## Advanced Deliverables 41 | 42 | 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. 43 | 44 | > Note: If you are going to attempt these advanced deliverables, please be sure to have a working commit with all the Core Deliverables first! 45 | 46 | As a user, I should be able to: 47 | 48 | - Sort transactions alphabetically by category or description. 49 | - Delete a transaction which will remove it from the table and delete it from the backend. 50 | 51 | ## Rubric 52 | 53 | You can find the rubric for this assessment [here](https://github.com/learn-co-curriculum/se-rubrics/blob/master/module-4.md). 54 | -------------------------------------------------------------------------------- /Phase-4-Round-1/db.json: -------------------------------------------------------------------------------- 1 | { 2 | "transactions": [ 3 | { 4 | "id": 1, 5 | "date": "2019-12-01", 6 | "description": "Paycheck from Bob's Burgers", 7 | "category": "Income", 8 | "amount": 1000 9 | }, 10 | { 11 | "id": 2, 12 | "date": "2019-12-01", 13 | "description": "South by Southwest Quinoa Bowl at Fresh & Co", 14 | "category": "Food", 15 | "amount": -10.55 16 | }, 17 | { 18 | "id": 3, 19 | "date": "2019-12-02", 20 | "description": "South by Southwest Quinoa Bowl at Fresh & Co", 21 | "category": "Food", 22 | "amount": -10.55 23 | }, 24 | { 25 | "id": 4, 26 | "date": "2019-12-04", 27 | "description": "Sunglasses, Urban Outfitters", 28 | "category": "Fashion", 29 | "amount": -24.99 30 | }, 31 | { 32 | "id": 5, 33 | "date": "2019-12-06", 34 | "description": "Venmo, Alice Pays you for Burrito", 35 | "category": "Food", 36 | "amount": 8.75 37 | }, 38 | { 39 | "id": 6, 40 | "date": "2019-12-06", 41 | "description": "Chipotle", 42 | "category": "Food", 43 | "amount": -17.59 44 | }, 45 | { 46 | "id": 7, 47 | "date": "2019-12-07", 48 | "description": "Birthday Check from Grandma", 49 | "category": "Gift", 50 | "amount": 50 51 | }, 52 | { 53 | "id": 8, 54 | "date": "2019-12-09", 55 | "description": "Lyft Ride", 56 | "category": "Transportation", 57 | "amount": -13.25 58 | }, 59 | { 60 | "id": 9, 61 | "date": "2019-12-11", 62 | "description": "Paycheck from Bob's Burgers", 63 | "category": "Income", 64 | "amount": 1000 65 | }, 66 | { 67 | "id": 10, 68 | "date": "2019-12-16", 69 | "description": "Tickets, Flatiron Multiplex Cinemas", 70 | "category": "Entertainment", 71 | "amount": -24 72 | }, 73 | { 74 | "id": 11, 75 | "date": "2019-12-16", 76 | "description": "MTA Vending Machine: MetroCard", 77 | "category": "Transportation", 78 | "amount": -116.39 79 | }, 80 | { 81 | "id": 12, 82 | "date": "2019-12-17", 83 | "description": "Venmo, Pay Roommate for Rent", 84 | "category": "Housing", 85 | "amount": -975 86 | } 87 | ] 88 | } 89 | -------------------------------------------------------------------------------- /Phase-4-Round-1/demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/learn-co-students/DC-WEB-111620-Code-Challenges/2be4761277367c1eaacc517171495833731a8e0d/Phase-4-Round-1/demo.gif -------------------------------------------------------------------------------- /Phase-4-Round-1/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "immersive-assessment-react-frontend", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "^16.11.0", 7 | "react-dom": "^16.11.0", 8 | "semantic-ui-css": "^2.2.10", 9 | "react-scripts": "3.2.0" 10 | }, 11 | "scripts": { 12 | "start": "json-server --watch db.json -p 6001 & open http://localhost:6001/transactions & PORT=6002 react-scripts start && fg", 13 | "build": "react-scripts build", 14 | "test": "react-scripts test --env=jsdom", 15 | "eject": "react-scripts eject" 16 | }, 17 | "browserslist": { 18 | "production": [ 19 | ">0.2%", 20 | "not dead", 21 | "not op_mini all" 22 | ], 23 | "development": [ 24 | "last 1 chrome version", 25 | "last 1 firefox version", 26 | "last 1 safari version" 27 | ] 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /Phase-4-Round-1/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/learn-co-students/DC-WEB-111620-Code-Challenges/2be4761277367c1eaacc517171495833731a8e0d/Phase-4-Round-1/public/favicon.ico -------------------------------------------------------------------------------- /Phase-4-Round-1/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 | 6 | 7 | 16 |
10 | Date11 | |
12 |
13 | Description14 | |
15 |
16 | Category17 | |
18 |
19 | Amount20 | |
21 |
---|