Demo https://savvy-challenge.netlify.app/

Instructions

Download

cardio-main.zip

Setup

Please download the React project above and read the instructions below. No special setup is required - you should be able to run and develop your code locally. Once you download the codebase, you should be able to use npm install and npm start from the root of the project to get up and running.

Introduction

Welcome to Card.io, a new finance product that helps consumers keep track of all their different payment cards. Our lead developer strained her fingers in an unexpected guitar accident, and we need your help!

If you choose to help, you will build a new interface for browsing payment cards and viewing the transactions on those cards. Please follow the instructions below to get started! We recommend you read all the instructions below before you get started.

Current state of the app

(Already completed) Load and view a list of all available cards

• A list of all payment cards is loaded from the /api/cards endpoint.

Requirements

Please complete the following steps. Details for each step are included below:

• Load and display card details & card transactions
• Add a search input to filter transactions
• Add a way to disable a card

1. Load and display card details & card transactions

   • When a card from the list is selected, show the card details and card transactions in a panel on the right side of the screen. Please reference the designs below.

   • Use the /api/cards/:id/card_details endpoint to load the card details. We have included api methods you can use in src/api/index.js.

   • Use the /api/cards/:id/transactions endpoint to load the card transactions. We have included api methods you can use in src/api/index.js.

   • To the right of the card list, add a section that shows the card details. Please reference the design below for layout and styling.

   • The TransactionList component has already been built. Please use this to show the list of transactions at the bottom of the right section.

   • Add a way to close this section. The designs call for a close button on the top-right.

   • Add a loading state. The project's existing components make use of the react-loading-skeleton library to do this.

     

     

     

2. Add a search input to filter transactions

   • Transactions should be displayed if the transaction.label fully or partially matches the text input
   • Video Sample: https://www.loom.com/share/cc72c19c6f14458f949eb723e3e2bfe0

3. Add a way to disable a card. We don't have a design for this step yet, so you can decide what the UI will look like.

   • POST to the /api/cards/:id/disable endpoint to disable a card. We have included api methods you can use in src/api/index.js.
   • Refresh the UI to show that the card is disabled once the api call is complete. Please keep it simple here, no need to user redux or any fancy state management.

API

• Api methods are included for you in src/api/index.js
• The backend / api is faked using local data. This shouldn't change how you develop the app. The main difference is that you can monitor api calls in the browser dev tools console, but will not see them in the dev tools "Network" tab.

GET /cards/

Sample response:

[
	{
	  "id": 1,
	  "name": "Amazon",
	  "network": "Visa",
	  "last4": "9988",
	  "active": true
	}, {
	  "id": 2,
	  "name": "BBVA",
	  "network": "Mastercard",
	  "last4": "1122",
	  "active": false
	}, {
	  "id": 3,
	  "name": "Starbucks Rewards",
	  "network": "Mastercard",
	  "last4": "8402",
	  "active": true
	}
]

GET /cards/:id/card_details

Sample response:

[
	{
    "card_id": 1,
    "number": "201776820879988",
    "cvv": "385",
    "expiration_month": "6",
    "expiration_year": "2025",
    "address_city": "Springfield",
    "address_state": "MA",
    "address_line1": "2 Westerfield Court",
    "address_postal_code": "01129"
  }, {
    "card_id": 2,
    "number": "3589336713391122",
    "cvv": "898",
    "expiration_month": "3",
    "expiration_year": "2026",
    "address_city": "Pomona",
    "address_state": "CA",
    "address_line1": "3 Union Parkway",
    "address_postal_code": "91797"
  }, {
    "card_id": 3,
    "number": "201460253708402",
    "cvv": "849",
    "expiration_month": "12",
    "expiration_year": "2023",
    "address_city": "Charlotte",
    "address_state": "NC",
    "address_line1": "170 Hintze Court",
    "address_postal_code": "28278"
  }
]

GET /cards/:id/transactions

Sample response:

[
	{
	  "label": "Yozio",
	  "amount": "$582.48",
	  "id": 1,
	  "card_id": 1,
	  "purchase_date": "2021-02-24T08:25:24Z",
	  "city": "Atlanta",
	  "state": "GA",
	  "status": "PAID"
	}, {
	  "label": "Browsebug",
	  "amount": "$2983.67",
	  "id": 2,
	  "card_id": 1,
	  "purchase_date": "2021-11-28T02:53:21Z",
	  "city": "Aurora",
	  "state": "CO",
	  "status": "PAID"
	}, {
	  "label": "Twitterwire",
	  "amount": "$1471.40",
	  "id": 3,
	  "card_id": 1,
	  "purchase_date": "2021-05-12T12:46:41Z",
	  "city": "Camden",
	  "state": "NJ",
	  "status": "PENDING"
	}
]

POST /cards/:id/disable

Sample response:

{
  "id": 1,
  "name": "Amazon",
  "network": "Visa",
  "last4": "9988",
  "active": false
}

Styling

• Refer to styles.css for colors and typography. Use any font you wish.

• Please don't worry about small screens or responsive designs. The design is intended for screens over 1000px wide.

Guidelines

• You may use internet resources and refer to other code as needed.
• This is a React exercise - please stick with React and use the project scaffold provided. Please do not add external libraries or any other packages beyond what the project already contains.
• Please do not spend longer than 2-3 hours on this exercise. We do not expect you to have a perfect or fully completed project at the end of the time limit. This exercise is a starting point for a conversation, not a test with specific passing criteria.
• Given the limited time, please do not go down rabbit holes. We want to have enough code written so that we can have a productive conversation about it. Please consider what the key parts of the project are and go "broad" rather than "deep". You can take shortcuts, stub functions, etc. if it helps you cover more ground.
• You do not need to be pixel-perfect with the designs. Adhere to them as much as possible, but not at the expense of moving quickly through the exercise. Please don't worry about getting margins, sizes, and positioning 100% exact. It's OK to eyeball it!