As part of the React Developer candidate evaluation process, you will complete a simple project in React that will be used to evaluate your skills.

Project Overview

The Lucit Application delivers advertising images in real-time to digital billboards. Each time one of the images is displayed on a digital billboard screen, that system delivers a “pingback” to our system notifying us that the image was displayed.

You may login to the Lucit App to get an idea of what some of these images look like. You have been given access to “Demo” accounts within Lucit that you are free to play around with.

Your project is to build an application that simply shows the last image that was played on a digital billboard, when and where it played. This application will be an internal application that we will run on screens / TV’s inside of our office so we can see, in real-time, the most recent image that we ran.

Evaluation Criteria

Your work will be evaluated based on

  • How well you followed the project requirements / instructions
  • What you did differently than other candidates
  • The quality of your code, your commits and the organization of your components, files, etc.
  • What you innovated / added / created beyond what was listed in the project requirements

Pre-Requisites

In order to build this project you will need

  • An API token. This token will be issued to you based on the credentials we setup for you in the Lucit App
  • The Lucit App – Which can you can install from the App Store or Play Store (see here for help https://lucit.cc/help/#1631108430399-48f23e04-21ef
  • A git hub account. You will push your project to your github account for us to review

Project Requirements

A successful project will

  • Be able to run on any windows / mac / linux machine in the browser
  • Must be able to launch from the cli (e.g. using something like npm start )
  • Look great on a variety of screen sizes (from a 60″ TV down to a small 13″ Screen)
  • Take into account a large range of billboard image sizes (some are 160px wide, some are 1800px wide, some are long rectangles, some are short and square)
  • Shows a new image every XXX seconds
  • Always shows (or attempts to show) a different image from a different campaign than the previous one that was displayed
  • Show the location and operator of the digital billboard that the image appeared on

Delivery

Your project should be

  • Pushed to a new repo in your personal github account.
  • Please call this repo lucit-dev-project-a-{your-first-name-and-last-initial}
  • Notify Lucit by sending an email to support@lucit.cc with the exact subject line React Developer Project A : Submission

Definitions

PingbackA pingback object is created every time an image is displayed on a digital billboard. Typically a pingback will tell us where, when, and for how long an image appeared on the digital billboard
Inventory ExportIn our terminology an Inventory Export is equivilent to a Campaign.
Digital BoardA digital billboard – a large digital screen normally mounted on a large pole or other structure that has a physical location
AgencyMost commonly a Billboard Operator, this is the company that owns the physical billboard that the images running on
Inventory PhotoThis object represents the actual creative image

API Endpoint

We have created a specific endpoint in our api that can be used to fetch the most recent image and associated details

endpoint : GET http://layout.lucit.cc/api/v1/analytics/pingbacks/get-last

returns : json array with an element called pingbacks which contains a single pingback representing the last image that ran

parameters:

ParameterTypeDescriptionExample
api_tokenrequired stringAn api token will be provided to you and will be required to make the call to the api?api_token=aHgtyrFDD8OiIKJiKFRthr67fgDUaPoIlKIJ
exclude_export_idsoptional arrayEach image is assigned to an “export” which is a group of images that will run on any given set of bilboards.

Use this option to exclude 1 or more export_id’s from being selected
?exclude_export_ids=[67,98,105]
exclude_photo_idsoptional arrayEach image has a “photo_id” that uniquely identifies it.

Use this option to exclude 1 or more photo_ids from being selected
?exclude_photo_ids=[1098,8768,9894]

Objects

A description of some objects and fields

NOTE: Not all fields are described and not all fields will need to be used within your project

pingback

Represents the event of when and where this image played.

idUnique Id of the pingback
photo_idThe unique id of the image that played
play_datetimeUTC datetime of when the image played on the billboard
play_durationHow long the image was on the screen
inventory_export_idThe export to which this image belongs
object_idAlways the same as photo_id
object_classAlways InventoryPhoto
board_idUnique ID of the Digital Billboard
impressionsSometimes zero, sometimes a number. This is an estimate of the number of People that saw this image
impressions_calc_methodIf 0 – no impressions. If 1 we have it calculated based on an avg daily total

digital_board

This is the screen on which this advertisement was displayed. Typically these are large screens mounted atop a pole at a location

idUnique Id of the digital board
agency_idId of the operator that owns the board
board_identifierAn id that is used by the board owner to identify their board.
nameA name of the board – sometimes its location or address
location_idId of the location object where this board is physically located at
widthWidth in pixels of this board
heightHeight in pixels of this board

location

Location objects are physical locations used to identify where a board is.

idUnique id for this location
nameA name for this location
addressAddress of this location
cityCity
stateState
postal_codeZip Code
CountryCountry
latitude Latitude
longitude Longitude

agency

The “agency” represents the owner of the digital billboard. Called an Operator or a Billboard Operator

idUnique id
nameName of the Billboard Operator
options.primary_image_public_urlThe logo or icon for the billboard operator

inventory_photo

The inventory_photo object represents the image that was displayed

idUnique photo_id for this image
inventory_item_idImages (1 or more) can be attached to a single inventory item which represents this specific creative in multiple sizes or styles
options.public_urlThe url to this image
options.dimension_widthWidth in pixels of this image
options.dimension_heightHeight in pixels of this image
public_url Same as options.public_url

inventory_export

The “export” can be thought of like an “Advertising Campaign” This campaign contains multiple “inventory_photo” objects and is attached to multiple “digital_board” objects

idUnique id
nameName of the campaign
options.primary_image_public_urlIf this exists, it is an icon for the campaign