Klipfolio Project Assessment

Table of Contents

1. Overview
   • Screenshots
   • Built With
2. Getting Started
3. Features
4. CI/CD Pipeline with Github Actions
5. API Endpoints

Overview

This is a project assessment of my full stack skills for Klipfolio. In this project, I implemented all the requirements of the mock design and some additional functionalities on the backend and frontend of the application. (See Features Section)

Screenshots

Normal mode: Dark mode Search function

Built With

• React.js
• Typescript
• Chakra-UI
• Redux
• NodeJS
• Express
• PostgreSQL
• Docker

Deployed on Heroku

Getting Started

You can either run the app locally or head over (for a live version) : https://assessment-klipfolio.herokuapp.com/

Running Application Locally

Requirement:

• Docker

At the root of the folder, run the following command:

docker-compose up -d

You access the react app at: http://localhost:3000 And the server at: http://localhost:3001

Features

• Fully Responsive Application
• Dark mode
• RestAPI that fetches from the Database (PostgreSQL)
• Search and filter functionalities
• Data represented in graphs using ChartJS
• Containerized application for quick development and deployment
• CI/CD Pipeline for linting and testing
• Auto-deployement to Heroku with GitHub Actions

CI/CD Pipeline with Github Actions

When a pull request is made: Stages:

1. Build Images
2. Lint Server & Client
3. Test Server & Client (Integration & Unit tests)

When a push is made on the main branch:

• Build Docker image and auto Deploy to Heroku

API Endpoints

• Get all services : GET /api/services/

   Example of output:
  [
    {
    "serviceId": 1,
    "name": "Facebook",
    "serviceIconUrl": "url",
    "createdAt": "2021-11-08T00:39:13.647Z",
    "updatedAt": "2021-11-08T00:39:13.647Z"
    }
  ]
  

• Get all data sources of a service : GET /api/datasources?serviceId=:id

   Example of output:
   [
    {
    "dataId": 1,
    "dataName": "Ad Revenue",
    "dataCurrency": "$",
    "createdAt": "2021-11-08T00:39:13.677Z",
    "updatedAt": "2021-11-08T00:39:13.677Z",
    "serviceId": 1,
    "ServiceServiceId": null
    }
  ]
  

• Get all data entries of a data source : GET /api/dataentries?dataId=:id&limit=:number

   Example of output:
   {
    "data": [
    471.17,
    238.78,
    313.21,
    341.55,
    252.24,
    324.72,
    303.16,
    413.09,
    384.74,
    279.82
    ],
    "dataEntryName": "Ad Profit",
    "dataCurrency": "$"
    }