/DoThatDance

Primary LanguageJavaScript

DoThatDance

For dancers around the world, its not always possible to learn new choreo directly from a teacher in-person. Which, as many things do, leads us to the internet. Today, millions of self-taught dancers learn how to dance from videos online, and DoThatDance is the perfect assistant for that.

Most times, unless you’re combining multiple browser extensions or using a paid app, its difficult to find a video sharing service that includes all the features a dancer needs, until now. Go out there and DoThatDance.

MVP

  • Access videos from YouTube links
    • Unstretch goal: Have users upload a mp4 instead
  • Mirror the video
  • Slowdown or speed up the video
  • Loop specified portions of the video
  • Save timestamps
  • Homescreen
  • User authentication

Stretch Goals

  • Keyboard shortcuts
  • Notes at each timestamp
  • Make the video fullscreen
  • Post comments (tips, explanations, reactions, etc) by timestamp
  • Save most recently viewed videos
  • Let users rank videos by difficulty

Tech Stack

  • Frontend
    • Figma
    • React
  • Backend
    • Firebase

Things to Install

Tutorials

Timeline

Week 1:

  • Decide on roles
  • Confirm app MVP and techstack
  • Download software, set up environment and Git, watch tutorials

Week 2:

  • Brainstorm front-end design and finish prototype
  • Watch tutorials, get link from user and display YouTube embed

Week 3:

  • Edit and finish (detailed) wireframes on Figma (see MVP)
  • Start looking into YouTube embed customizations

Week 4:

  • Code the main page
  • Mirror the YouTube video

Week 5:

  • Slow down the video based on percentage
  • Make User Authentification

Week 6:

  • Loop the video between two timestamps
  • Make User history of past videos

Week 7:

  • Integrate with back end
  • Animate UI with transitions

Week 8:

  • Complete integration
  • begin working on presentation

Week 9:

  • Finish presentation and being practicing
  • Brainstorm fun ideas for presentation

Week 10:

  • Prepare for presentation!

Competition

  • Mirrorthevideo.com
    • Mirrors the whole youtube page, which make it hard to read UI like timestamps for speed changing
  • YouTube's built-in features
    • Can't mirror the video
  • Looper (Google Chrome extension for YouTube)
    • Can't mirror the video or change the speed of it

Github CheatSheet!

Master cheatsheet: https://www.atlassian.com/dam/jcr:8132028b-024f-4b6b-953e-e68fcce0c5fa/atlassian-git-cheatsheet.pdf

Some basic ones:

Command Description
cd "DoThatDance" Change directories to our repository
git branch Lists branches for you
git branch "branch name" Makes a new branch
git checkout "branch name" Switch to branch
git checkout -b "branch name" Same as the 2 previous commands together
git add . Finds all changed files
git commit -m "Testing123" Commit with message
git push origin "branch" Push to branch
git pull origin "branch" Pull updates from a specific branch

Developers

Back-end:

  • Alex Tang
  • Sravya Kotamraju

Front-end:

  • Srishti Kannan
  • Rishna Renikunta