https://github.com/qingquan-li/data-visualization-demo
Visualize customer data stored in a CSV file, using TypeScript/React (frontend), Go/Gin (backend), Docker/Kubernetes (deployment), and GitHub Actions (CI/CD).
https://github.com/qingquan-li/data-visualization-demo
go kubernetes typescript
Last synced: 2 months ago
JSON representation
Visualize customer data stored in a CSV file, using TypeScript/React (frontend), Go/Gin (backend), Docker/Kubernetes (deployment), and GitHub Actions (CI/CD).
- Host: GitHub
- URL: https://github.com/qingquan-li/data-visualization-demo
- Owner: qingquan-li
- Created: 2024-01-28T20:48:55.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-03-05T21:51:40.000Z (about 1 year ago)
- Last Synced: 2025-01-26T10:08:27.191Z (4 months ago)
- Topics: go, kubernetes, typescript
- Language: TypeScript
- Homepage:
- Size: 128 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Data Visualization Demo
Visualize customer data that is stored in a CSV file:
Manage the Containers/Kubernetes using the Kubernetes Dashboard:
## 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 Stacks
- Frontend:
- Language:
- TypeScript (JavaScript)
- Frameworks/Libraries:
- React.js
- Tailwind CSS
- Backend:
- Language:
- Go
- Frameworks/Libraries:
- Gin
- Deployment:
- Linux Server
- Docker
- Nginx
- Kubernetes (MicroK8s)
- CI/CD:
- GitHub Actions
## 3. Run the Project with Kubernetes
Install Kubernetes and kubectl, then run the following commands:
```bash
# Go to the project directory:
$ cd path/to/data-visualization-demo
# Apply the Kubernetes yaml files:
$ kubectl apply -f k8s
```
The project will be running on http://localhost:30011
## 4. Build the Docker Images
### 4.1 Build the Docker Images Locally (Development)
Install Docker and Docker Compose, then run the following commands:
```bash
# Go to the project directory:
$ cd path/to/data-visualization-demo
# Build the container without using cache:
$ docker compose build --no-cache
```
```bash
# Run the container in the background (detached mode):
$ docker compose up -d
# The project now is running on http://localhost:5173
# Stop the container:
$ docker compose down
```
Note: You can change the `RootAPIURL` in `frontend/src/components/RootAPIURL.ts`.
### 4.2 Build the Docker Images with GitHub Actions (Production)
Details: check out `.github/workflows/docker_build.yml`