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

• IDE: Visual Studio Code
• Version Control: Git (see powerpoint)
• Node.js
• React

Tutorials

• Getting started with Node.js
• Quick Overview of React
• ReactJS Basics Tutorial
• Hour long indepth video about React

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