QueryQuest

QueryQuest - A trivia game

Tooling • Environment Setup • Run Project • License

Overview

This is our group project for CS 4347 Database Systems. Our goal is to create a trivia game that allows users to compete against each other for the highest score on the leaderboard. The game will have a variety of categories and questions that are randomly selected for each game. The game will be built using a full-stack web application with a PostgreSQL database for storing user data and game information. The backend will be built using Python and FastAPI, while the frontend will be built using Vue.js.

There is a live demo of the project which deploys the latest changes from the main branch. You can access the demo here.

Tooling

VSCode

VSCode is highly recommended, the repo is currently set up to take advantage of devcontainers which automatically set up all dependencies for you. This is the easiest way to get the project up and running. Instructions for installing VSCode can be found here.

Docker

If you want to take advantage of the devcontainer then docker is required. If you are planning on setting up the environment manually then it is not needed. Instructions for installing Docker can be found here.

Environment Setup

This is a one-time setup. If you have already done this, you can skip to the next section.

Open Docker Desktop. Make sure it is updated and running before continuing.
Open VSCode and install the Dev Containers extension.
In VSCode, press Ctrl+Shift+P and type Git: Clone.
You may be prompted to login to your GitHub account. Sign in.
Type adibarra/query-quest. Select it.
If prompted, select the main branch.
Once cloned, you should see a popup in the bottom right corner of the screen. Click Reopen in Container.
Let the container build. This will take 2-5 minutes depending on your machine (only the first time).
Once the build is complete, you can begin development.
Make sure to fill out the .env files with the appropriate values.

Manual Environment Setup

The devcontainer does all of this for you while making sure the environment is consistent with the production environment and the rest of the team. If you want to set up the environment manually, follow these steps:

Install Python3 for your platform.
Install nvm (preferred) or Node.js for your platform.
Git clone the repository.
Run the following commands:

  $ nvm use || nvm install --lts # if you installed nvm
  $ corepack enable
  $ corepack install
  $ cp --no-clobber .env.example .env.production
  $ cp --no-clobber .env.example .env.development

Additionally, make sure to fill out the .env files with the appropriate values.

Reconnect to Environment (devcontainer)

You can re-attach the devcontainer by doing the following from a new VSCode window:

Click the Remote Explorer tab.
Select Dev Containers in the dropdown menu.
Find the query-quest container.
Click the → button to re-attach the container.
You can now continue development.

Run Project

Make sure you are in the repo's root directory before running these commands.

  # # # # # # # # # # # # # # # # # # # # # # # #
  # Start the development environment           #
  # Access the app here: http://localhost:3333  #
  # # # # # # # # # # # # # # # # # # # # # # # #
  $ pnpm dev

  # --- OR ---

  # # # # # # # # # # # # # # # # # # # # # # # #
  # Build and run for production (preview mode) #
  # Access the app here: http://localhost:3000  #
  # # # # # # # # # # # # # # # # # # # # # # # #
  $ pnpm preview

Project Scripts

Scripts	Description
pnpm install	installs dependencies for entire project
pnpm dev	runs development environment
pnpm clean	removes build artifacts
pnpm clean:all	removes build artifacts and dependencies
pnpm lint	prints warnings about code formatting
pnpm lint:fix	auto-fixes the code formatting
pnpm typecheck	checks for type errors in the code
pnpm build	builds the app for production
pnpm preview	runs the full built app in production preview mode

adibarra/query-quest