samdatkins / sing-along Goto Github PK

View Code? Open in Web Editor NEW

3.0 4.0 1.0 2.32 MB

Dockerfile 0.42% HTML 0.75% CSS 0.35% TypeScript 45.44% Python 52.57% Shell 0.47%

sing-along's Introduction

Sing-along App

Mac Installation

Backend
- Ensure you're running python 3.9 - 3.11 (python3 --version)
  - If not, install and use python 3.11 using pyenv
- Install Docker Desktop
- Install pipx
  - brew install pipx
- Install poetry
  - pipx install poetry==1.2.2
  - The command will tell you to run a command that looks something like this: export PATH="/Users/{your username}/.local/bin:$PATH", so add that to the end of your ~/.zshrc file and re-open your terminal
- run poetry config virtualenvs.in-project true
Frontend
- Install NPM
  - brew install node
- Install Yarn
  - npm install --global yarn

Loading seed data

Connect to the web docker instance
- From the root of the project: docker-compose run web bash
Load the seed data into the database
- python manage.py loaddata api/seed/0001_initial.json

Running the project

Backend
- Run poetry install from the root of the project
- Run docker-compose up --build (mac) or sudo docker compose up --build (Linux) from the root of the project
- To access the backend api, go to localhost:8080/api in a browser
- To access the Django Admin, go to localhost:8080/admin in a browser
Frontend
- Go to the frontend folder in a terminal
- Run yarn install && yarn start
- To view the web application, go to localhost:3000 in a browser
- Note: To login to auth0, you'll need to access localhost:8080 first

Ubuntu Based Installation

For these examples it's assumed that asdf is the version manager being used for Python, Node, and Pipx. https://asdf-vm.com/guide/getting-started.html

Ensure needed libraries are installed

sudo apt update; sudo apt install --no-install-recommends make build-essential libssl-dev zlib1g-dev libbz2-dev libreadline-dev libsqlite3-dev wget curl llvm libncurses5-dev xz-utils tk-dev libxml2-dev libxmlsec1-dev libffi-dev liblzma-dev

sudo apt install -y gcc make zlib1g-dev libreadline-dev libreadline8 sqlite3 libsqlite3-dev libbz2-dev python-tk python3-tk tk-dev

Base Backend Setup

Install Python. Note it must be 3.9 or 3.10

asdf plugin add python
asdf install python 3.10.13
asdf global python 3.10.13

Install pipx

asdf plugin add pipx
asdf install pipx latest
asdf global pipx latest

Install Poetry

pipx install poetry==1.2.2
pipx ensurepath

source ~/.zshrc

poetry config virtualenvs.in-project true

Install Docker directions from here: https://get.docker.com/

# 1. download the script
curl -fsSL https://get.docker.com -o install-docker.sh

# 2. verify the script's content
cat install-docker.sh

# 3. run the script with --dry-run to verify the steps it executes
sh install-docker.sh --dry-run

# 4. run the script either as root, or using sudo to perform the installation.
sudo sh install-docker.sh

# remove install-docker.sh
rm install-docker.sh

Frontend Setup

Install Node

asdf plugin add nodejs
asdf install nodejs latest
asdf global nodejs latest

Install Yarn

npm install --global yarn

Setup Docker And Database

Add Docker group directions from here: https://docs.docker.com/engine/install/linux-postinstall/

# Create the docker group
sudo groupadd docker

# Add your user to the docker group
sudo usermod -aG docker $USER

newgrp docker

# Verify that you can run docker commands
docker run hello-world

Copy the .env-sample file in root and populate it with your values.

Run migrations, seed the database, and create an admin user.

# TODO: Figure out why sudo is needed here and when running build

# access console in Docker
sudo docker compose run web bash

# this is all run in the resulting console
# run migrations
./manage.py migrate

# seed the db
python manage.py loaddata api/seed/0001_initial.json

# create admin user
python manage.py createsuperuser

exit

Stack Brainstorming

Web server
- Typescript
- React
- Python/Django
- Websockets
- Material UI
- Docker
- Memcached
Async
- RQ

https://profy.dev/article/react-tech-stack#1-most-popular-react-libraries

App Design

Standard web server w/ db, when songs are requested search the db to see if they already exist. If they don’t exist, fire off a request to the async server which can go out and locate the song, then hit a webhook on the web server with the result.

Use SSE to push data to clients to keep them up to date. SSE loop can check memcached to see if current state has changed, and if so update it.

User Stories

Data/Events on sing-along page

Data
- Song contents
- Timer
- Current position (cur song / total songs)

References

sing-along's People

Contributors

Stargazers

Watchers

Forkers

jackconwayiv

sing-along's Issues

feature: user profile

Click avatar, navigate to profile view rather than modal? Unclear to what degree this would have bang for its buck. Could have some basic metrics:

number of power hours attended
number of noodle mode songbooks owned (?)
Total num of songs requested (in power hours) - straight-up songbook-entry count
Site-wide rank of song requests? (Among common songbooks?)
Total num of songs liked
Top 5? most requested songs

reduce redundant blank lines in lyrics mode
lyrics only doesn’t need to include capo details
maybe filter out lines of tabs (for lyrics only) that include both | and -

total number of songbooks / power hours
number of users
number of distinct songs in songbooks
total number of songs (in power hours only?)
total number of liked songs (in power hours only?)
longest power hour (difference from first to last song entry timestamp)
average power hour length (use maths)

User signup approval

Users should probably be moderated in some way - likely new users should be created unapproved and should require admin approval to proceed

feature: songbook settings

piggyback off refactoring "create songbook" modal, perhaps
Add to existing settings modal a songbook settings tab only accessible if you're an owner on current songbook
- promote a member to owner (and perhaps revoke?)
- custom action verb
- add theme (choose from word wheel or create new)
- toggle noodle / power
- rename songbook (record previous name?)
- change song cap

no keyboard? currently no way to delete songs from noodle mode songbooks
add a button or hamburger menu option to delete current song (same code as exists in control panel of power hour?)

refactor songlist to a separate page view with sortable data

Songlist becomes a page view with a table, sortable by: sequence, title, artist, number of likes, number of songbook appearances, who requested it.
number of likes on each song in list view (and lets you toggle your own like from there?)
related bug: currently, noodle mode songbook has a songlist in hamburger but it doesn’t navigate, as it was refactored to be a modal. it will return to being a separate page
refactor endpoint to serve this data in sortable shape

Reported Issue: on mobile add song page, “Already requested” toast is below recs, can’t see

the keyboard takes up the bottom half of the page view
on some mobile resolutions, the 6th rec and the refresh recs link are not available without scrolling / hiding keyboard

wrap the whole transpose keystroke watcher in the “are you not pressing alt, control, or meta key? if so, transpose"
push state up to the top wrapper (app level?) and pass down setter and state to children as needed

scrollbars sometimes appear in full screen view now that we have font size scaling

feature: end-of-session stats for likes

related issue: make it so falling off the end of a power hour resets song entry to first, resets state to show "Start" button, and opens stats modal

BACKEND

given a songbook key, fetch all song_entries for that songbook with >0 likes.
- also include the name of the user who requested that song_entry
- also include the song details (at least title and artist)
- also include a list of each like on that song_entry with the users who liked it
sort these song_entries by number of likes, then annotate them with likes_count
who got the most likes? ("thumbs cup" a crown? a rose?)
who gave the most likes? ("cheerleader")
who had the best ratio of song_entries to likes? ("batting 1000") (these names all need improving)
XC: Requested songs most consistently (beg, mid, end)
XC: Innovator, requested most NEW songs
XC: Supporter, requested most songs from other users’ lists
XC: I Know What I Like: requested most songs from their own list

FRONT END

third tab for "Liked Songs" in stats modal
red bar graph ranking most liked songs
across the top, "medals" or some kind of call-outs for people who earned each of the awards above
"Best Contributor: Johnny's requests got 27 likes!" or something

it's potentially unclear that clicking a recommended song doesn't actually add the song

ensure that songs only get removed from wishlist when they're added to songbook
how does this work when the user types nonsense that finds 0 hits?

refactor wishlist UI / welcome page

a new tab with songbooks
uses same song search component as add song
single input, with text input cursor
refactor back end to conditionally filter only if songbook key is provided
on auto-complete word wheel, show a sparkle icon if song has never had an (undeleted) song_entry (tho maybe if it was deleted, that's telling us something)
- do this for all usages of song search component