Installation • Project Structure • Architecture • Running the App (Server) • Running the App (Locally) • Updating the App
- Install the following requirements
- Yarn >= 2+
- Node 14.17.0
- Latest version of Docker and Docker-Compose
- Install the dependencies for the client
cd client
yarn install
- Install the dependencies for the server
cd server
yarn install
Note: Only the core files & directories are listed below
├── server
| |── controllers
| | |── pollController.ts
| | |── socketController.ts
| | └── userController.ts
| |── db
| | |── mongoose.ts
| | └── schema.ts # Contains all database related schemas to store poll & student data
| |── routes
| | |── pollRoute.ts
| | └── userRoutes.ts
| |── redis.ts # Redis related configurations to setup the professor list
| |── server.ts
| └── socket.ts
├── client
│ ├── public # All public facing assets/files
│ │ ├── index.html
│ │ ├── newQuestions.wav
│ │ ├── favicon.ico
│ ├── components
│ │ ├── Button
│ │ ├── Chart
│ │ ├── FormInput
│ │ ├── Header
│ │ ├── Modal
│ │ ├── Navbar
│ │ ├── PollCode
│ │ ├── PollCodeSegment # Subcomponent of PollCode
│ │ └── PollOptionButton
│ ├── pages
│ │ ├── CreatePoll
│ │ ├── JoinPoll
│ │ ├── PastPolls
│ │ ├── ProfHome
│ │ ├── VoteControls
│ │ ├── VotePage
│ ├── socket.ts
│ ├── axios.ts
│ └── App.tsx # Starting point of the client
├── README.md # You are here!
├── nginx.conf # Configuration for nginx proxy
└── docker-compose.yml # Running the entire application (Redis, Client, Server, DB, Proxy)
Note: The client, proxy, server, database and cache are all running in separate containers
General Flow:
- Students/Professors sign in through Shibboleth
- If a professor's utorid is found in Redis, then they'll be redirected to the professor page
- Voting is done through Socket.io (Pass through the nginx proxy)
- All other methods of communication are through the Axios HTTP client (i.e. Fetching previous poll data) (Pass through the nginx proxy)
- All poll and student data is stored on MongoDB
Note: The app installation assumes you already have Shibboleth installed on the server.
- Setting up the client
.envfile (Placed in the root of yourclientfolder)
REACT_APP_BACKEND_URL="https://poll.utm.utoronto.ca"
- Setting up the server
.envfile (Placed in the root of yourserverfolder)
PORT=3001
MONGODB_URL="mongodb://mongodb:27017/quiz"
FRONTEND_URL="https://poll.utm.utoronto.ca"
REDIS_URL="redis://default:password@redis:6379"
WHITELIST=../whitelist
- Add instructor Utorid's to your whitelist file. It should be placed at the root of the
serverfolder.
Your whitelist file should be named "whitelist" and should look like the following...
utorid1
utorid2
utorid3
...
- Running the entire app
docker-compose up --build -d
-
Open the
docker-compose.ymlfile and comment out all services exceptcachingandmongodb -
Running Redis and Mongo
docker-compose up --build -d
- Setting up the client
.envfile (Placed in the root of yourclientfolder)
REACT_APP_BACKEND_URL="http://localhost:3001"
- Setting up
axios.ts
Note: Since we're running poll voting app locally, we'll need to provide some extra information that normally Shibboleth would provide to us.
Your
axios.tsfile should look like the following:
export const instance = axios.create({
headers: { utorid: "utorid" },
baseURL: `${process.env.REACT_APP_BACKEND_URL}`,
});
- Setting up
socket.ts
Note: Since we're running poll voting app locally, we'll need to provide some extra information that normally Shibboleth would provide to us.
Your
socket.tsfile should look like the following:
export const socket = io(`${process.env.REACT_APP_BACKEND_URL}`, {
withCredentials: true,
extraHeaders: { utorid: "utorid" }
});
- Running the client
yarn run start
- Add instructor Utorid's to your whitelist file. It should be placed at the root of the
serverfolder.
Your whitelist file should be named "whitelist" and should look like the following...
utorid1
utorid2
utorid3
...
- Setting up the server
.envfile (Placed in the root of yourserverfolder)
PPORT=3001
MONGODB_URL="mongodb://localhost:27018/quiz"
FRONTEND_URL="http://localhost:3000"
REDIS_URL="redis://default:password@localhost:6379"
WHITELIST=../whitelist
- Running the server
yarn run start
The client and server will be listening and serving on port 3000 and 3001 respectively.
If there's a new version of the app available, then do the following...
- Pull the latest version of the app from Github (Make sure you're on the
mainbranch)
git pull
- Stop the app
Stopping the app won't purge any data. The data will persist and only the client and server will rebuild when re-launching
docker-compose down
- Re-Launch the app
docker-compose up --build -d
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent