https://github.com/piopi/project-kf
Full-Stack Klipfolio project
https://github.com/piopi/project-kf
full-stack fullstack-development klipfolio
Last synced: 2 months ago
JSON representation
Full-Stack Klipfolio project
- Host: GitHub
- URL: https://github.com/piopi/project-kf
- Owner: piopi
- Created: 2021-11-01T15:47:32.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2021-11-08T03:38:05.000Z (over 4 years ago)
- Last Synced: 2025-03-10T05:19:55.612Z (over 1 year ago)
- Topics: full-stack, fullstack-development, klipfolio
- Language: TypeScript
- Homepage: https://assessment-klipfolio.herokuapp.com/
- Size: 1.2 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Klipfolio Project Assessment [](https://github.com/piopi/project-KF/actions/workflows/push.yml) [](https://github.com/piopi/project-KF/actions/workflows/deploy.yml)
Table of Contents
## 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](#features))
### Screenshots
**Normal mode:**
**Dark mode**
**Search function**
### Built With
* [React.js](https://reactjs.org/)
* [Typescript](https://www.typescriptlang.org/)
* [Chakra-UI](https://chakra-ui.com/)
* [Redux](https://redux.js.org/)
* [NodeJS](https://nodejs.org/en/)
* [Express](https://expressjs.com/)
* [PostgreSQL](https://www.postgresql.org/)
* [Docker](https://www.docker.com/)
**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](https://docs.docker.com/get-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": "$"
}
```