Test
Covey.Town provides a virtual meeting space where different groups of people can have simultaneous video calls, allowing participants to drift between different conversations, just like in real life. Covey.Town was built for Northeastern's Spring 2021 software engineering course, and is designed to be reused across semesters. You can view our reference deployment of the app at app.covey.town, and our project showcase (Fall 2022, Spring 2022, Spring 2021) highlight select student projects.
The figure above depicts the high-level architecture of Covey.Town.
The frontend client (in the frontend
directory of this repository) uses the PhaserJS Game Library to create a 2D game interface, using tilemaps and sprites.
The frontend implements video chat using the Twilio Programmable Video API, and that aspect of the interface relies heavily on Twilio's React Starter App. Twilio's React Starter App is packaged and reused under the Apache License, 2.0.
A backend service (in the townService
directory) implements the application logic: tracking which "towns" are available to be joined, and the state of each of those towns.
Running the application locally entails running both the backend service and a frontend.
To run the backend, you will need a Twilio account. Twilio provides new accounts with $15 of credit, which is more than enough to get started. To create an account and configure your local environment:
- Go to Twilio and create an account. You do not need to provide a credit card to create a trial account.
- Create an API key and secret (select "API Keys" on the left under "Settings")
- Create a
.env
file in thetownService
directory, setting the values as follows:
Config Value | Description |
---|---|
TWILIO_ACCOUNT_SID |
Visible on your twilio account dashboard. |
TWILIO_API_KEY_SID |
The SID of the new API key you created. |
TWILIO_API_KEY_SECRET |
The secret for the API key you created. |
TWILIO_API_AUTH_TOKEN |
Visible on your twilio account dashboard. |
- In the
.env
file in thetownService
, you will need to add credentials for connecting to the MongoDB back-end. Please use these credentials:
MONGODB_USERNAME='guest'
MONGODB_PASSWORD='guest123'
MONGODB_URI='personal-pet-collection.hbmnsu4.mongodb.net/pet-collection?retryWrites=true&w=majority&appName=personal-pet-collection'
- You will also need to add the base URL for the server we are running on the back-end. Please also make these additions to your
townService/.env
file:
NEXT_PUBLIC_AXIOS_BASE_URL=http://localhost:8081/api
NEXT_PUBLIC_API_KEY='Vt2V6gBuDw3AU4LnZngwv'
- In the
.env
file in thefrontEnd
, you will need to add the server information in addition to the previous variables:
NEXT_PUBLIC_AXIOS_BASE_URL=http://localhost:8081/api
NEXT_PUBLIC_API_KEY='Vt2V6gBuDw3AU4LnZngwv'
Once your backend is configured, you can start it by running npm start
in the townService
directory (the first time you run it, you will also need to run npm install
).
The backend will automatically restart if you change any of the files in the townService/src
directory.
Create a .env
file in the frontend
directory, with the line: NEXT_PUBLIC_TOWNS_SERVICE_URL=http://localhost:8081
(if you deploy the towns service to another location, put that location here instead)
For ease of debugging, you might also set the environmental variable NEXT_PUBLIC_TOWN_DEV_MODE=true
. When set to true
, the frontend will
automatically connect to the town with the friendly name "DEBUG_TOWN" (creating one if needed), and will not try to connect to the Twilio API. This is useful if you want to quickly test changes to the frontend (reloading the page and re-acquiring video devices can be much slower than re-loading without Twilio).
In the frontend
directory, run npm start
(again, you'll need to run npm install
the very first time). After several moments (or minutes, depending on the speed of your machine), a browser will open with the frontend running locally.
The frontend will automatically re-compile and reload in your browser if you change any files in the frontend/src
directory.