Hassan Badru

Capterra - Expensive Click App

This app allows user to view or download valid most Expensive clicks

Libraries

ReactJS - Lightweight & agnostic UI library with a component architecture
JSON_Loader - for reading JSON string
Moment - for working better with date/time
Bootstrap - for basic styling
Font Awesome - for basic icons
Jest - for basic testing

Solution

While within root directory

Install Dependencies

This would install the necessary package.json modules

npm install

Run exercise solution

npm run solution

This solution would produce the file resultset.json and add this file to code_output folder within the root directory. Note: If a code_output folder doesn't already exist, one would be created

$ File -> resultset.json has been saved!
Location -> /path/to/solution_Hassan_Badru/code_output/resultset.json

Root Folder

solution_Hassan_Badru
    ├── src/
    │   ├── components/
    │   │   ├── clicks.js
    │   │   ├── display.js
    │   │   ├── inputform.js
    │   │   └── periods.js
    │   ├── data/
    │   │   ├── clicks.json
    │   │   └── test_clicks.json
    │   ├── App.js
    │   ├── App.test.js
    │   ├── App.css
    │   ├── index.css
    │   ├── index.js
    │   ├── helpers.js
    │   ├── serviceWorker.js
    │   └── logo.svg
    ├── public/
    │   └── index.html
    ├── solution.js
    └── code_output/
        └── resultset.json
    ├── README.md
    ├── node_modules/
    ├── package.json
    ├── package-lock.json
    ├── .git/
    └── .gitignore

Run Web App

The React App would run on localhost:3000 with the command:

npm run solution-app

To run a production build

 npm run build
 npm install -g serve
 serve -s build

Test App

To run test suites:

npm run test

Sample test:

PASS  src/App.test.js
 ✓ renders App without crashing (271ms)
 ✓ check if timestamp belongs to period (4ms)
 ✓ create period ranges (1ms)
 ✓ check for invalid ips + most expensive clicks within period (10ms)
 ✓ check resultset output (104ms)

Test Suites: 1 passed, 1 total
Tests:       5 passed, 5 total
Snapshots:   0 total
Time:        2.209s
Ran all test suites.

Design & Approach

Extracts Clicks JSON data from file (clicks.json)
Creates 24 one-hour periods
Groups Clicks data into one-hour periods
Creates an IP Count Lookup table
Creates an Invalid IP Lookup table
Sorts Clicks by timestamp (earliest to latest)
Traverses from earliest to latest click, searching higher click amounts for Duplicate Clicks
Checks if IP address is valid (i.e. IP appears at most 10 times)
Checks if Duplicate Click exists for period
If Duplicate Click doesn't exist, adds click to result set
If Duplicate Click exists, compares click amounts for similar IP and only adds the more expensive click to result set
Concatenates array of result set for all one-hour periods
Produces a resultset.json file from resultset array
Stores resultset.json in root folder code_output

Additional Web App Features

Allows view of clicks per period
Allows download of valid Most Expensive Clicks per period
Allows and validates user inputted JSON data
Allows reset of app data to JSON file (clicks.json)

Using a custom (helpers) module

convertHoursToTime = (hour) - takes in a period number and returns the maximum hour mark (click period's time format -> HH:mm:ss)
getClickPeriod(p) - takes in a period number and returns a minimum - maximum time range (click period)
createClickPeriods(nPeriods) - given number of periods (24), creates a click period for each 24 hours
hasClickPeriod(timestamp, min, max) - checks if timestamp is within click period
groupClicks(json_data, period) - add clicks that belong to specific click periods
checkIps(json_data, period) - check if all click IPs within the click period are valid, adds clicks (valid / most expensive / earliest) to click period's result set
createResultset(json_data) - Concatenates total results set from all click periods

Assumptions

Click timestamp Format -> MM/DD/YYYY HH:mm:ss

Main Components

Used React Class & Function Components + React Hooks

App

Class component that initialize / manage entire app states
Download button for resultset.json
Shows toggle button to open user inputted JSON form
(if user inputted JSON), allow Refresh of data to default

Display

Shows all clicks within that period (sorted by timestamp)
Shows the most expensive clicks for that period (period set)
Shows 'No Valid Result' if no click exists or if click IP appears more than 10 times
Download button for periodset_#.json

Periods

Shows an navigation tab to each 24 hour period

Clicks

Shows all valid, invalid clicks and their count

InputForm

Updates data with JSON string via Text Box

App States

period Object - current period being viewed
period_clicks Array - total clicks within period
expensive_clicks Array - highest and/or earliest clicks within period
invalid_ips Array - All clicks with IP appearing more than 10 times
resultset Array - Result set (array of hashes) that includes each valid clicks/IPs within each one-hour period
hide_form Boolean - Toggle JSON input form
default_data Array - current JSON data loaded

hassanbadru/capterra