diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..0d20b64 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +*.pyc diff --git a/ReactTool/backend/.dockerignore b/ReactTool/backend/.dockerignore new file mode 100644 index 0000000..84e0189 --- /dev/null +++ b/ReactTool/backend/.dockerignore @@ -0,0 +1,4 @@ +__pycache__ +*.pyc +.dockerignore +Dockerfile \ No newline at end of file diff --git a/ReactTool/backend/Dockerfile b/ReactTool/backend/Dockerfile new file mode 100644 index 0000000..441ca8e --- /dev/null +++ b/ReactTool/backend/Dockerfile @@ -0,0 +1,17 @@ +FROM python:3.9 + +WORKDIR /app + +COPY Pipfile Pipfile.lock ./ + +RUN pip install pipenv && \ + pipenv install --system --deploy && \ + pip install flask-cors + +# Create necessary directories for data storage +RUN mkdir -p /app/surveys/quiz + +COPY . . + +EXPOSE 5000 +CMD ["flask", "run", "--host=0.0.0.0"] \ No newline at end of file diff --git a/ReactTool/backend/app.py b/ReactTool/backend/app.py index e2960b2..c68caac 100755 --- a/ReactTool/backend/app.py +++ b/ReactTool/backend/app.py @@ -13,11 +13,13 @@ import secrets import pandas as pd import db_conf from flask import send_file +from flask_cors import CORS #from flask_mail import Mail, Message #import firebase_admin #from firebase_admin import credentials, firestore, initialize_app, firebase app = Flask(__name__, static_folder='../frontend/build', static_url_path='/') +CORS(app) # Add this line app.config['MYSQL_DATABASE_HOST'] = db_conf.host app.config['MYSQL_DATABASE_USER'] = db_conf.user app.config['MYSQL_DATABASE_PASSWORD'] = db_conf.password diff --git a/ReactTool/frontend/.dockerignore b/ReactTool/frontend/.dockerignore new file mode 100644 index 0000000..1e7c3d0 --- /dev/null +++ b/ReactTool/frontend/.dockerignore @@ -0,0 +1,4 @@ +node_modules +build +.dockerignore +Dockerfile diff --git a/ReactTool/frontend/.gitignore b/ReactTool/frontend/.gitignore index 4d29575..da17307 100644 --- a/ReactTool/frontend/.gitignore +++ b/ReactTool/frontend/.gitignore @@ -21,3 +21,5 @@ npm-debug.log* yarn-debug.log* yarn-error.log* + +*.pyc \ No newline at end of file diff --git a/ReactTool/frontend/Dockerfile b/ReactTool/frontend/Dockerfile new file mode 100644 index 0000000..8a3630c --- /dev/null +++ b/ReactTool/frontend/Dockerfile @@ -0,0 +1,12 @@ +FROM node:16 + +WORKDIR /app +COPY package*.json ./ +COPY yarn.lock ./ + +RUN yarn install + +COPY . . + +EXPOSE 3000 +CMD ["yarn", "start"] diff --git a/ReactTool/frontend/package.json b/ReactTool/frontend/package.json index c1fb691..019d794 100644 --- a/ReactTool/frontend/package.json +++ b/ReactTool/frontend/package.json @@ -59,5 +59,5 @@ "last 1 safari version" ] }, - "proxy": "http://localhost:5000" + "proxy": "http://localhost:3000" } diff --git a/ReactTool/frontend/src/pages/tutorial.js b/ReactTool/frontend/src/pages/tutorial.js index 074d438..f7912c2 100644 --- a/ReactTool/frontend/src/pages/tutorial.js +++ b/ReactTool/frontend/src/pages/tutorial.js @@ -31,7 +31,7 @@ class Tutorial extends Component { componentDidMount() { - fetch('./new_session_id', { + fetch('http://localhost:8000/new_session_id', { headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' }, method: 'POST', body: JSON.stringify({ diff --git a/ReactTool/frontend/src/pages/visualization_quiz.js b/ReactTool/frontend/src/pages/visualization_quiz.js index e0966d4..e61586a 100644 --- a/ReactTool/frontend/src/pages/visualization_quiz.js +++ b/ReactTool/frontend/src/pages/visualization_quiz.js @@ -178,7 +178,7 @@ class VisQuiz extends Component { on_survey_click() { - fetch('./record_responses_to_db', { + fetch('http://localhost:8000/record_responses_to_db', { headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' }, method: 'POST', body: JSON.stringify({ diff --git a/docker-compose.yml b/docker-compose.yml new file mode 100644 index 0000000..3eb2c43 --- /dev/null +++ b/docker-compose.yml @@ -0,0 +1,36 @@ +version: '3.8' + +services: + frontend: + build: + context: ./ReactTool/frontend + ports: + - "3000:3000" + volumes: + - ./ReactTool/frontend:/app + - /app/node_modules + environment: + - REACT_APP_BACKEND_URL=http://localhost:8000 + depends_on: + - backend + networks: + - app-network + + backend: + build: + context: ./ReactTool/backend + ports: + - "8000:5000" + volumes: + - ./ReactTool/backend:/app + - ./data/surveys/quiz:/app/surveys/quiz + environment: + - FLASK_APP=app.py + - FLASK_ENV=development + - PYTHONUNBUFFERED=1 + networks: + - app-network + +networks: + app-network: + driver: bridge \ No newline at end of file diff --git a/mini-vlat-tree.txt b/mini-vlat-tree.txt new file mode 100644 index 0000000..7399165 --- /dev/null +++ b/mini-vlat-tree.txt @@ -0,0 +1,137 @@ +. +├── README.md +├── ReactTool +│   ├── README.md +│   ├── backend +│   │   ├── Pipfile +│   │   ├── Pipfile.lock +│   │   ├── README.md +│   │   ├── __pycache__ +│   │   │   ├── app.cpython-39.pyc +│   │   │   └── db_conf.cpython-39.pyc +│   │   ├── app.py +│   │   ├── db_conf.py +│   │   └── surveys +│   │   └── quiz +│   │   └── 9xdbxs46sp1p5X9yqSe_uQ.txt +│   └── frontend +│   ├── README.md +│   ├── package-lock.json +│   ├── package.json +│   ├── public +│   │   ├── favicon.ico +│   │   ├── index.html +│   │   ├── logo192.png +│   │   ├── logo512.png +│   │   ├── manifest.json +│   │   └── robots.txt +│   ├── src +│   │   ├── App.css +│   │   ├── App.js +│   │   ├── App.test.js +│   │   ├── components +│   │   │   ├── areaChart-mini.js +│   │   │   ├── barChart-mini.js +│   │   │   ├── bubbleChart-mini.js +│   │   │   ├── choropleth-mini.js +│   │   │   ├── data +│   │   │   │   ├── 100StackedBarGraph.csv +│   │   │   │   ├── AreaChart-2.csv +│   │   │   │   ├── AreaChart.csv +│   │   │   │   ├── BarGraph.csv +│   │   │   │   ├── BubbleChart.csv +│   │   │   │   ├── Choropleth.csv +│   │   │   │   ├── Histogram-3-2.csv +│   │   │   │   ├── Histogram.csv +│   │   │   │   ├── Images +│   │   │   │   │   ├── 1.png +│   │   │   │   │   ├── 10.png +│   │   │   │   │   ├── 11.png +│   │   │   │   │   ├── 12.png +│   │   │   │   │   ├── 2.png +│   │   │   │   │   ├── 3.png +│   │   │   │   │   ├── 4.png +│   │   │   │   │   ├── 5.png +│   │   │   │   │   ├── 6.png +│   │   │   │   │   ├── 7.png +│   │   │   │   │   ├── 8.png +│   │   │   │   │   ├── 9.png +│   │   │   │   │   ├── RightAns.png +│   │   │   │   │   ├── WrongAns.png +│   │   │   │   │   └── skip.png +│   │   │   │   ├── LineChart.csv +│   │   │   │   ├── Mini-VLAT +│   │   │   │   │   ├── AreaChart.png +│   │   │   │   │   ├── BarChart.png +│   │   │   │   │   ├── BubbleChart.png +│   │   │   │   │   ├── Choropleth.png +│   │   │   │   │   ├── Choropleth_New.png +│   │   │   │   │   ├── Histogram.png +│   │   │   │   │   ├── LineChart.png +│   │   │   │   │   ├── PieChart.png +│   │   │   │   │   ├── Scatterplot.png +│   │   │   │   │   ├── Stacked100.png +│   │   │   │   │   ├── StackedArea.png +│   │   │   │   │   ├── StackedBar.png +│   │   │   │   │   └── TreeMap.png +│   │   │   │   ├── PieChart.csv +│   │   │   │   ├── Scatterplot.csv +│   │   │   │   ├── StackedArea.csv +│   │   │   │   ├── StackedBarGraph.csv +│   │   │   │   ├── Treemap.json +│   │   │   │   ├── USA.json +│   │   │   │   ├── VLAT-Pics +│   │   │   │   │   ├── AreaChart.png +│   │   │   │   │   ├── BarGraph.png +│   │   │   │   │   ├── BubbleChart.png +│   │   │   │   │   ├── Choropleth.png +│   │   │   │   │   ├── Histogram.png +│   │   │   │   │   ├── LineChart.png +│   │   │   │   │   ├── Pie.png +│   │   │   │   │   ├── Scatterplot.png +│   │   │   │   │   ├── StackedArea.png +│   │   │   │   │   ├── StackedBar.png +│   │   │   │   │   ├── StackedBar100.png +│   │   │   │   │   └── TreeMap.png +│   │   │   │   ├── scatter-2.csv +│   │   │   │   ├── scatter.csv +│   │   │   │   └── us.json +│   │   │   ├── histogram-mini.js +│   │   │   ├── linechart-mini.js +│   │   │   ├── pieChart-mini.js +│   │   │   ├── quiz.js +│   │   │   ├── scatterplot-mini.js +│   │   │   ├── stacked100bar-mini.js +│   │   │   ├── stackedArea-mini.js +│   │   │   ├── stackedbar-mini.js +│   │   │   └── treeMap-mini.js +│   │   ├── index.css +│   │   ├── index.js +│   │   ├── logo.svg +│   │   ├── pages +│   │   │   ├── introduction.js +│   │   │   ├── thank_you.js +│   │   │   ├── tutorial.js +│   │   │   └── visualization_quiz.js +│   │   ├── reportWebVitals.js +│   │   └── setupTests.js +│   └── yarn.lock +├── Test +│   └── Mini-VLAT(QuestionsBank)_Updated.pdf +├── VisImages +│   ├── AreaChart.png +│   ├── BarChart.png +│   ├── BubbleChart.png +│   ├── Choropleth.png +│   ├── Choropleth_New.png +│   ├── Histogram.png +│   ├── LineChart.png +│   ├── PieChart.png +│   ├── Scatterplot.png +│   ├── Stacked100.png +│   ├── StackedArea.png +│   ├── StackedBar.png +│   └── TreeMap.png +└── mini-vlat-tree.txt + +17 directories, 118 files