├── .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 | ![demo](./demo.gif) 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 | React App 17 | 18 | 19 |
20 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /Phase-4-Round-1/src/components/AccountContainer.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import TransactionsList from "./TransactionsList"; 3 | import Search from "./Search"; 4 | import AddTransactionForm from "./AddTransactionForm"; 5 | 6 | class AccountContainer extends Component { 7 | render() { 8 | return ( 9 |
10 | 11 | 12 | 13 |
14 | ); 15 | } 16 | } 17 | 18 | export default AccountContainer; 19 | -------------------------------------------------------------------------------- /Phase-4-Round-1/src/components/AddTransactionForm.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | 3 | class AddTransactionForm extends Component { 4 | render() { 5 | return ( 6 |
7 |
8 |
9 | 10 | 11 | 12 | 18 |
19 | 22 |
23 |
24 | ); 25 | } 26 | } 27 | 28 | export default AddTransactionForm; 29 | -------------------------------------------------------------------------------- /Phase-4-Round-1/src/components/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import AccountContainer from "./AccountContainer"; 3 | import "../stylesheets/App.css"; 4 | 5 | class App extends Component { 6 | render() { 7 | return ( 8 |
9 |
10 |

The Royal Bank of Flatiron

11 |
12 | 13 |
14 | ); 15 | } 16 | } 17 | 18 | export default App; 19 | -------------------------------------------------------------------------------- /Phase-4-Round-1/src/components/Search.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const Search = () => { 4 | return ( 5 |
6 | { 10 | console.log("Searching..."); 11 | }} 12 | /> 13 | 14 |
15 | ); 16 | }; 17 | 18 | export default Search; 19 | -------------------------------------------------------------------------------- /Phase-4-Round-1/src/components/Transaction.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const Transaction = () => { 4 | return ( 5 | 6 | {"your code here..."} 7 | {"your code here..."} 8 | {"your code here..."} 9 | {"your code here..."} 10 | 11 | ); 12 | }; 13 | 14 | export default Transaction; 15 | -------------------------------------------------------------------------------- /Phase-4-Round-1/src/components/TransactionsList.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Transaction from "./Transaction"; 3 | 4 | const TransactionsList = () => { 5 | return ( 6 | 7 | 8 | 9 | 12 | 15 | 18 | 21 | 22 | {/* render Transactions here */} 23 | 24 |
10 |

Date

11 | 		13 |

Description

14 | 		16 |

Category

17 | 		19 |

Amount

20 |
25 | ); 26 | }; 27 | 28 | export default TransactionsList; 29 | -------------------------------------------------------------------------------- /Phase-4-Round-1/src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import App from "./components/App"; 4 | import "semantic-ui-css/semantic.min.css"; 5 | 6 | ReactDOM.render(, document.getElementById("root")); 7 | -------------------------------------------------------------------------------- /Phase-4-Round-1/src/stylesheets/App.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | text-align: center; 4 | } 5 | 6 | input { 7 | width: 25% !important; 8 | margin-right: 0.25em!important; 9 | margin-left: 0.25em!important; 10 | } 11 | 12 | body { 13 | margin: 0; 14 | padding: 0; 15 | font-family: sans-serif; 16 | } 17 | 18 | .App { 19 | text-align: center; 20 | } 21 | 22 | 23 | .App-header { 24 | background-color: #222; 25 | padding: 20px; 26 | color: white; 27 | } 28 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Code Challenge Repo: One Repo to Rule Them All! 2 | 3 | ## Student 4 | 5 | Please follow the instructions. If your instructor's instructions differ from below, always listen to your instructor instead. 6 | 7 | ### Do This Once Before Your First Ever Challenge 8 | 9 | Before your first code challenge, please Star this repo. This will trigger an invitation to join this repo as a collaborator. Once you get the email invitation, please accept the invitation. Please note that it may take a while for the invitation to arrive depending on how many invites are in the queue. If you do not see an invite by the next day, please ask your instructor for help. They can add you manually if needed - just give them your GitHub username. 10 | 11 | If you lose your invitation, go to the following link while logged in to GitHub: https://github.com/learn-co-students/repo-name/invitations (replace with the actual repo name). 12 | 13 | Note that invitations expire after 7 days. 14 | 15 | Your instructor will make this repo private once you have all been added. 16 | 17 | ### Instructions for Every Challenge 18 | 19 | Before **every challenge**, clone down this repo using the `git clone` command and the Clone HTTPS link. This is important - we need you to have a clean repo to work from. _Do not use your old clones of this repo!_ 20 | 21 | `cd` into the directory of your current code challenge. 22 | 23 | Create and checkout a new branch using your first and last name: `git checkout -b bartelby-cumberbuttons` 24 | 25 | Push your branch: `git push origin bartelby-cumberbuttons` 26 | 27 | Your instructor will confirm that your branch was pushed successfully. Once all branches appear, your instructor will ask you to start work on the challenge. 28 | 29 | At the end of the challenge, make your final commit and push your branch! Await your grade brave almighty student! 30 | 31 | 32 | ## Instructors 33 | 34 | ### Before the First Challenge 35 | 36 | Please check that all students are listed as collaborators with Write access. They should have accepted their invitations also. 37 | 38 | If any student does not appear and was not automatically added, please add them. 39 | 40 | ### Before Every Challenge 41 | 42 | Please add the appropriate code challenge to this repo in its own directory. Ensure the .git folder is not in the code challenge folder. If you wish, you can remove previous code challenges from this repo. 43 | 44 | If you changed collaborator access to Read only, please update to Write. 45 | 46 | Also ensure that the only branch available is main/master. There should be no additional branches before a code challenge. 47 | 48 | Ask students to clone down the repo when ready and push a branch with their name using an empty or pointless commit. Once all branches appear, start the challenge. 49 | 50 | ### After every challenge 51 | 52 | Pull down the repo and grade. 53 | 54 | Clean up/delete all branches except main/master. 55 | 56 | Put your grades in Canvas. 57 | 58 | Change collaborator access if you wish (optional). 59 | 60 | If you wish, remove the code challenge from the repo. If you keep old challenges in, please name the directories simply, e.g. "Phase-1-Code-Challenge-NameOfChallenge". 61 | 62 | Thank you for your hard work! 63 | --------------------------------------------------------------------------------