Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/qingquan-li/us-data-demo
CSV Data Visualization: visualize customer data stored in a CSV file, using React (frontend), Python/Flask (backend), Docker (deployment), and GitHub Actions (CI/CD).
https://github.com/qingquan-li/us-data-demo
data-visualization docker flask react
Last synced: about 1 month ago
JSON representation
CSV Data Visualization: visualize customer data stored in a CSV file, using React (frontend), Python/Flask (backend), Docker (deployment), and GitHub Actions (CI/CD).
- Host: GitHub
- URL: https://github.com/qingquan-li/us-data-demo
- Owner: Qingquan-Li
- Created: 2023-08-18T04:25:51.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-08-31T22:39:54.000Z (over 1 year ago)
- Last Synced: 2024-04-23T02:49:20.343Z (9 months ago)
- Topics: data-visualization, docker, flask, react
- Language: JavaScript
- Homepage: https://us-data-demo.qingquanli.com
- Size: 562 KB
- Stars: 2
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# US Data Demo
## 1. About the Project
Given: a dataset that contains the name, company, address and contact information of 500 people in the US (randomly generated).
Dataset: `us-500.csv` source from [Free Sample Data - BrianDunning.com](https://www.briandunning.com/sample-data/)
Task:
1. Create a web interface that retrieves and displays the dataset in the table.
2. Search people based on two given inputs: search field and target value
- For example, if the search field is state and the target value is NY, the result table should contain all people in the dataset who live in NY state.
- If searched by first_name (e.g., Valentine) with a single result, display the user icon (user.png) with information about that person instead of the table.
- If searched by company_name (e.g., Printing Dimensions) with a single result, display the video (example.mp4) along with other information like company name and address.
3. Show summary statistics, such as the number of people per state
4. Create a visualization to show the distribution of the people across the US, which can depend on the state or zip code.
## 2. Tech Stack
- Frontend:
- Language:
- JavaScript
- Frameworks/Libraries:
- React.js
- Tailwind CSS
- Backend:
- Language:
- Python
- Frameworks/Libraries:
- Flask
- Deployment:
- Docker on a Linux Server
- Nginx
- CI/CD:
- GitHub Actions
## 3. Run the Project
1. Install Docker and Docker Compose
2. Run the following commands:
```bash
# Go to the project directory:
$ cd path/to/us-data-demo
# Pull the latest images specified in docker-compose.prod.yml:
$ docker-compose -f docker-compose.prod.yml pull
# Run the containers with Docker Compose in detached mode:
$ docker-compose -f docker-compose.prod.yml up -d
```
3. The project now is running on http://localhost:3000
## 4. Build the Docker Images
### 4.1 Build the Docker images locally (Development)
```bash
```bash
# Go to the project directory:
$ cd path/to/us-data-demo
# Build the container without using cache:
$ docker compose build --no-cache
# Run the container in the background (detached mode):
$ docker compose up -d
# The project now is running on http://localhost:3000
# Stop the container:
$ docker compose down
```
### 4.2 Build the Docker Images with GitHub Actions (Production)
Details: check out `.github/workflows/docker_build.yml`