Table of Contents

1. Requirements
2. Software Used
3. UML
4. Installation
   1. Local
   2. Docker
   3. Netlify

Requirements

• Create React web app
• It should have fields for giving start date, end date and access token as arguments to the app.
• App should make HTTP GET request to the API to fetch chat counts between those two given dates.
• The dashboard should render three values from the API.
• The dashboard should render a Paginated List.
• Stores start date, end date and token in localStorage so they are already populated if user comes back to app later time.
• Static type checking using Typescript.
• Documentation on how to run and build/install if needed.
• The application running and accessible somewhere (for example in AWS)
• Docker image for running the dashboard in an existing Docker stack.
• Virtualisation of existing data.

Software used

#	Software	Reason
1	React	Requirement.
2	React Router	To route between different components, a react router is used.
3	TypeScript	To make use of static types, I made use of TypeScript
4	Bootstrap	To structure the front-end, bootstrap is used.
5	Axios	To communicate with external API's, I added Axios.
6	FontAwesome	To communicate actions to the user, I have added some relatable icons for actions.
7	react-bootstrap-table2-*	To get a paginated table, React Bootstrap Table is used.
8	Yarn	To manage dependencies, yarn is used.
9	Docker	To run the software containerized in a bigger infrastructure, I have introduced a Dockerfile. To deploy this, scroll down to Docker and follow these steps.
10	Netlify	To host the SPA, I made use of Netlify so people have easy access to the demo subject. To host a copy of the SPA, I have included directions on how to under Netlify
11	Nivo	To virtualize data from the API, I have used Nivo.
12	MomentJS	To get a correct EEST DateTime for login purposes, I have used MomentJS.

NOTE: The background used for this software is owned by www.univ-cotedazur.fr. I take no right or ownership to this background, as this piece of software is for personal use only.

UML

Installation

Local

Available Scripts

In the project directory, you can run:

yarn start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits, you will also see any lint errors in the console.

yarn build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes. Your app is ready to be deployed by copying the /build folder to a hosting!

Docker

To deploy this app on a Docker enabled system, you can follow the following steps:

1. Make sure docker is enabled on your system. To install Docker on your machine, you can use the following guides: Linux Machine (Ubuntu), Windows 10 or Mac OSX.
2. Clone this repository with git clone git@github.com:BlackChaosNL/Demo-App.git
3. Navigate to this folder, and open up a bash terminal, or windows powershell.
4. Build the image to use later: docker build . -t jv_dashboard
5. Start the image with the command: docker run -p 80:80 -d jv_dashboard
   1. To change the default port :80 to a custom one, you can alter the -p command to the left side, this exposes your new port to the outside.
6. The application should now be hosted on localhost:$PORT. Where the $PORT is either :80 or the custom port given by you.

Netlify

1. Fork this project to your own GitHub account.
2. Create an account on Netlify.
3. Click on New site from Git.
4. Click on GitHub under Continuous Deploy.
5. Give Netlify access to your account by accepting the prompt from GitHub.
6. You can now search the repositories you would like deployed. We would like to use Demo-App.
7. Set your build options now, and press finish.

You should now be redirected to the dashboard for the Demo-App, your app is now deploying. Here you can find the unique URL where the demo project is hosted, it has the following setup: https://upbeat-agnesi-aad3fb.netlify.com.