Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gabriele-mastrapasqua/react-dashboard
Analytics dashboard in React using geographic data from mobile impressions
https://github.com/gabriele-mastrapasqua/react-dashboard
analytics dashboard expressjs geospatial javascript mongodb nodejs react reactjs
Last synced: 9 days ago
JSON representation
Analytics dashboard in React using geographic data from mobile impressions
- Host: GitHub
- URL: https://github.com/gabriele-mastrapasqua/react-dashboard
- Owner: gabriele-mastrapasqua
- License: mit
- Created: 2018-07-06T13:06:31.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T07:17:09.000Z (about 2 years ago)
- Last Synced: 2024-01-29T09:40:03.884Z (about 1 year ago)
- Topics: analytics, dashboard, expressjs, geospatial, javascript, mongodb, nodejs, react, reactjs
- Language: JavaScript
- Homepage:
- Size: 7.92 MB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 21
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Analytics dashboard
A Single page application and a REST API server that shows the advertisement views coming from mobile devices and that answers the following questions:
* How many impressions are coming from each device?
* How many impressions for each hour of the day?
* How many impressions for each day of the week?
* How many impressions for each day of the month?
* How many impressions for each country? (no geocoding needed, the provided map should be useful and a map visualization would be great here)
## Description
The application is build with:
- React.js and highcharts.js on the frontend
- Node.js server with mongodb on the backend
Mongo was selected because is easy to use and have strong geolocation features built in.
Also is really easy to do analytics queries using the aggregation framework.
The data was pre-processed and stored in mongodb. To run correctly the application is mandatory to load the dump following the instruction below.
# Installation
It's possibile to run the application using docker and docker-compose.
For running without docker please read the client/README.md and server/README.md for the steps to install the dependencies.
## 1 - build the docker images for the application
```
sudo docker-compose build
```
## 2 - run the application
To spin up the application run:
```
sudo docker-compose up -d
```
- The client will listen on port 3000
- The webapi server will listen on port 8080
- A mongodb will listen on port 27017
## 3 - import a dump to mongo container running
**It's mandatory to load the data in the database before using for the application.** Run this command after all the service are initialized:
```
sudo docker-compose exec mongo mongorestore /backup
```
A dump with data pre-processed and loaded in mongo is ready in the repository.
For more details about the import of the data please read server/README.md and under server/src/scripts folder.
## stop the application
```
docker-compose down
```
---
# Development
For development:
- start a mongodb docker container:
```
docker run --rm --name mongo mongo:4.0
```
- import the data from the dump:
```
sudo docker-compose exec mongo mongorestore /backup
```
- client: under "client/" folder run:
```
yarn start
```
- server: in another shell under "server/" folder run:
```
yarn run dev
```
Those commands starts respectively create-react-app's server with hot reloading and nodemon for reloading changes in nodejs server.
For more details about development please read the REAMDE.md under "client/" and "server/" folders.