Orientation Website

Welcome to the University of Toronto’s Frosh engineering orientation website, used by more than 1,000 incoming students each year. This website serves as the primary platform for registering and paying for orientation events, and offers a range of features including a main schedule, announcements, a personal profile page with the ability to edit, a Scunt (scavenger hunt) game, sign-up for the Frosh retreat, QR code scanning for automated registration on event day, and more.

This website is built using React, Express, Mongoose, Stripe, Docker, etc, and serves as a valuable resource for incoming students as they prepare for their first year at the University of Toronto. We hope this website helps to make the orientation process as smooth and enjoyable as possible.

This repository holds the source code for UofT Engineering’s Orientation Website! This fullstack website is split into two “packages”. First, there is the frontend package, client, and second there is the backend package server.

Table of contents

1. Orientation Website
2. Getting started
   1. Installing yarn
   2. Installing root dependencies
   3. Installing frontend dependencies
   4. Installing backend dependencies
   5. Installing docker
3. Running the code
   1. Running both the frontend and the backend
   2. Running just the frontend
   3. Running just the backend
   4. View all the component stories

Getting started

Note: You will need to contact a project maintainer to get access to the .env environment variables and keys.

To get started, you need to install all the necessary dependencies, and then you need to install docker. This project uses yarn for dependency management, so the first step is to install yarn.

Installing yarn

npm install -g yarn

After installing yarn, we are now ready to install the remaining dependencies.

Installing root dependencies

First, we will install the dependencies in the root directory. To do this, navigate to the root directory of the repository in your terminal and run:

yarn install

Installing frontend dependencies

Next, we will install the frontend dependencies. To do this, navigate to the client directory in your terminal and run:

yarn install

Installing backend dependencies

Finally, we need to install the backend dependencies. To do this, navigate to the server directory in your terminal and run:

yarn install

Installing docker

The easiest way to install docker is to follow the instructions at https://www.docker.com/products/docker-desktop/

Running the code

When running the code, you can choose whether you want to run just the frontend, just the backend, or both at the same time. For most purposes, it is recommended to run both. Another common way to run the code is run all the stories for the frontend React components. All of these scenarios are explained below.

Running both the frontend and the backend

To run both the frontend and the backend, you will need docker installed. With docker installed, navigate to the root directory of the repository, then run:

docker-compose up --build

Running just the frontend

To run just the frontend, navigate to the client directory in your terminal and run:

yarn dev

Running just the backend

To run just the backend, navigate to the server directory in your terminal and run:

yarn start:dev

View all the component stories

To view the stories, navigate to the client directory in your terminal and run:

yarn storybook