CS178A-B-Template

Table of Contents

• Overview
• Usage
• Project Setup
  • Docker Setup
  • Django Setup
  • React Setup
  • Running Tests
• Diagrams
• Dependencies

Overview

Problem: Gamers spend an unhealthy amount of time playing games, which introduces health risks and a loss of time that some people want to spend on productive/other tasks Goal: Help gamers cut down their addiction or dependencies on video games and to allow them to engage in more productive tasks. Our project: Web application Gamers can connect their Steam accounts and moderate their activity

This project benefits gamers by

• better time management skills
• healthier sleep schedules
• creating social communities

Team

• Michelle Chu
• Gabrielle O'Brien
• James Ooi
• Yuteng Wu

Usage

Demo: https://youtu.be/3zdM_QOe3G0

Landing Page

Login/Signin Page

Home Page

Profile Page

Deactivating Account

Toggle Emails/Set Goals

Achievements Page

Earning Achievements

Friend Page

Adding Friend

Removing Friend

Chat Page

Start New Chat

Project Setup

1. Clone this repo

 git clone https://github.com/CS-UCR/senior-design-project-kusa.git

Docker Setup

If you prefer to use Docker to run both the server and the client:

1. Ensure docker is installed on your device from here and is using Linux containers
2. cd into the project directory

cd senior-design-project-kusa/

3. Build the docker containers

docker-compose build

4. Put your docker containers up

docker-compose up -d

5. Navigate to the appropriate local ports, localhost:8000 for the server and localhost:3000 for the client

Django Setup

1. cd into the project directory

cd senior-design-project-kusa/

2. create a virtual environment

python -m venv env

3a. For Linux, activate the virtual environment

source env/bin/activate

3b. For Linux, activate the virtual environment

admin\env\Scripts\activate.bat

4. cd into the server folder

cd server/

5. install all the dependencies

pip3 install -r requirements.txt

6. run the server

python manage.py runserver --noreload

7. Open http://localhost:8000 to view it in the browser.

React Setup

1. cd into the React folder on a separate terminal

cd client/ 

2. install required dependencies. Your terminal should tell you which dependencies you're missing. Simply install the missing ones.

npm install

3. activate the react server

npm start

4. Runs the app in the development mode.
   Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

Running Tests

Kusa's clients has a suite of tests that run on every PR in main or develop. These tests can also be ran locally.

1. cd into the client directory

cd client/ 

2. install client packages with npm install

npm install 

3. run tests with npm test

npm test 

4. test results will be displayed in the console

Diagrams

Sequence Diagram

Frontend Structure

Overall System Diagram

Dependencies

Install Node Package Manager (npm). Helpful Documentation

Client Dependencies

• react-tsparticles
• react-router-dom
• animate.css
• mui
• react-transition-group
• jest
• enzyme
• tabler
• nivo
• axios
• sass
• timeago.js

Server Dependencies

• environ
• requests
• djongo
• sqlparse
• django-apscheduler
• django-cors-headers
• djangorestframework
• social-auth-app-django