Scribd
Upload
11 views5 pages

Hiring Pattern

The document outlines requirements for replicating a card listing application. It includes instructions to create tabs to view cards by type, implement search, filtering and pagination. Mock API response and designs are provided for reference in building the application.

Uploaded by

query.spoc
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
11 views5 pages

Hiring Pattern

The document outlines requirements for replicating a card listing application. It includes instructions to create tabs to view cards by type, implement search, filtering and pagination. Mock API response and designs are provided for reference in building the application.

Uploaded by

query.spoc
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

Software engineer role

Instructions

1. This is a time bound assignment. You will get 8 hours to complete this task.
2. Submit your code through GitHub and host the working application on GitHub or
Heroku or netlify.
3. Your submission should contain detailed instructions in READ.me, to help us
understand and run at our end.
4. Don't include any library files, instead provide instructions on how we can install at
our end.
5. You can use any framework of your choice, preferably React or Vue.

Judgement:

The assignment will be judged based on the following:

1. Structure, design, and modularity of the project


2. Accuracy and speed of code
3. Functionality completion
4. The commits and overall flow while development. (Solution approach)

Requirements: You are required to replicate the card listing as given below

1. Create a page with [Your, all, blocked] cards tabs.

2. Cards can be of two types ['burner', "subscription"]


1. for burner cards show expiry in card design
2. for subscription card show limit as shown
3. A card type is displayed on the top right corner of each card, you can refer to
the image for the icon.
3. When a user clicks on your tab they should see cards belonging to them through
owner_id

4. Design the card listing layout as per the design given below.

5. Since API response will be paginated you need to implement infinite scroll to fetch
more data, you can fetch 10 records per call.

6. Implement search by card name.

7. Filter by card type is mandatory. Refer to the figure below.


8. Implement filter dropdown as shown in the figure below (optional).

9. You can share the code for review through GitHub and also host the application for
us to check.

You can use the following JSON structure for your mock API

data: [

name: 'Mixmax',

budget_name: 'Software subscription',

owner_id: 1,

spent: {

value: 100,

currency: "SGD"

},

available_to_spend: {

value: 1000,

currency: "SGD"

},

card_type: "burner",

expiry: 9 feb,

limit: 100,

status: 'active'

},

name: 'Quickbooks’',

budget_name: 'Software subscription',

owner_id: 2,

spent: {
value: 50,

currency: "SGD"

},

available_to_spend: {

value: 250,

currency: "SGD"

},

card_type: "subscription",

limit: 10,

status: 'active'

],

page: 1,

per_page: 10,

total: 100

}
Following are the designs for your reference:

Image 1:

Image 2:

You might also like