Scribd
Upload
184 views

Frontdend Assignment

This document provides details for a frontend assessment to create a customisable analytics table component. The component will fetch data from a REST API and display it in a table. It needs to support features like date filtering, column selection, reordering and sorting. The table will display metrics for apps from sample API responses, with columns for date, app name, requests, responses etc. It should be built with React and Redux, follow best practices, and not use third party libraries for the table.

Uploaded by

React Developer
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
184 views

Frontdend Assignment

This document provides details for a frontend assessment to create a customisable analytics table component. The component will fetch data from a REST API and display it in a table. It needs to support features like date filtering, column selection, reordering and sorting. The table will display metrics for apps from sample API responses, with columns for date, app name, requests, responses etc. It should be built with React and Redux, follow best practices, and not use third party libraries for the table.

Uploaded by

React Developer
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

assignment.

md 7/16/2021

GreedyGame Frontend Assessment


One of the basic components to consume large amounts of information is a table. This helps users to get an
idea of different metrics for their perspective. Your goal for this assessment is to create a customisable
table with a set of functionalities. The table that you will create will feature an analytics page that will call a
REST API to fetch the data. That data needs to be represented on your Table component and enable the
user to perform some operations that will alter the view for the end user
App Features
Analytics Page [/analytics]
You need to give an option for the user to input the dates as a Date Picker to call the API end point to
fetch data. Please note that the data would be available for a sample range only (Try 1-Jun-2021 to
31-Jun-2021)
Reusable Analytics Table Component
Allow the user to enable/hide a particular column from view The columns for the table need to
have a representation separately as well. This will allow the user to select/deselect a particular
column from view
Reorderable table columns (from settings tab [refer mock]).
Data formatting (each cell).
Sortings & filters.
Responsive Table.- Extra
[OPTIONAL] Reusable data cache layer. (Don't call http call again if the data has been queried
recently.)
Shareable table link (If you share the link to anyone, table's all filters & columns should be populated)

Expectation
Do not use any 3rd party library for table
React + Redux usages
Table should work as per features set
Use best practices - your code quality matters.
Minimal library dependency for other components

Table Columns
Tables columns can be
Date
App Name
AD Request
AD Response
Impression
Clicks
Revenue
Fill Rate ( = Ad Request / AD Response * 100%)
1/3
assignment.md 7/16/2021

CTR ( = Clicks / Impression * 100%)


(Note: Data & App Name columns will be always there in the table. But user can add/remove other
table columns)
Mocks: Link
Add/Remove Colums: Video Link 1
Drag & Drop columns: Video Link 2

API
To Get All report by date
Request

/GET http://go-dev.greedygame.com/v3/dummy/report?startDate=YYYY-
MM-DD&endDate=YYYY-MM-DD

e.g: http://go-dev.greedygame.com/v3/dummy/report?startDate=2021-05-
01&endDate=2021-05-03

Response

{
cache_time: 20, //in second
data: [
{
date: "2021-07-07T00:00:00Z"
app_id: 212211,
requests: 36249787, // ad request
responses: 36329805 // ad response
impression: 35318801
clicks: 328202,
revenue: 5742.423646628184
},
//...
]
}

To Get All apps


Request

/GET http://go-dev.greedygame.com/v3/dummy/apps
2/3
assignment.md 7/16/2021

Response

{
cache_time: 200, //in second
data: [
{
app_id: 212211,
app_name: "Candy Crush"
},
{
app_id: 5612223,
app_name: "Call Of Duty"
},
//...
]
}

If you have any doubt regarding questions, feel free to reach out [email protected]

3/3

You might also like