/senior-design-project-kusa

senior-design-project-meowsic created by GitHub Classroom

Primary LanguageTypeScriptMIT LicenseMIT

Open in Visual Studio Code

CS178A-B-Template

Table of Contents

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

landing landingD

Login/Signin Page

signUp

Home Page

home homeD

Profile Page

Deactivating Account

profile

Toggle Emails/Set Goals

profileD

Achievements Page

achievements achievementsD

Earning Achievements

earnAchievement

Friend Page

friendPage friendPageD

Adding Friend

addFriend

Removing Friend

removeFriend

Chat Page

chatPage chatPageD

Start New Chat

startNewChat

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/
  1. Build the docker containers

docker-compose build

  1. Put your docker containers up

docker-compose up -d

  1. 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/
  1. 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
  1. cd into the server folder
cd server/
  1. install all the dependencies
pip3 install -r requirements.txt
  1. run the server
python manage.py runserver --noreload
  1. Open http://localhost:8000 to view it in the browser.

React Setup

  1. cd into the React folder on a separate terminal
cd client/
  1. install required dependencies. Your terminal should tell you which dependencies you're missing. Simply install the missing ones.
npm install
  1. activate the react server
npm start
  1. 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/
  1. install client packages with npm install
npm install
  1. run tests with npm test
npm test
  1. test results will be displayed in the console

Diagrams

Sequence Diagram Kusa_Diagrams-Achievement Flow Kusa_Diagrams-Third Party Info drawio(1) Kusa_Diagrams-Friends List drawio(1) Kusa_Diagrams-Garden Dataflow Kusa_Diagrams-Login and Signup

Frontend Structure Kusa_Diagrams-Overall User Flow

Overall System Diagram image

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