Timbre is a web application inspired by SoundCloud that will be built using Ruby on Rails, and React/Redux. By the end of Week 9, this app will have the following set of features, as a minimum:
- Hosting on Heroku
- New account creation, login, and guest/demo login
- A production README, replacing this README
- Song CRUD
- Smooth, bug-free navigation
- Adequate CSS styling
- Playback using Web Audio
- User comments
- Smooth, bug-free navigation
- Adequate seed data to demonstrate the site's features
- Adequate CSS styling
- Realtime 'playback' of comments based on where in song they were created
- User pages with profile information
- Smooth, bug-free navigation
- Adequate seed data to demonstrate the site's features
- Adequate CSS styling
- Continuous Playback
Objective: Functioning rails project with front-end Authentication
- create new Rails project
- set up webpack & Redux scaffold with skeleton files
- create
User
model - authentication backend setup
- setup
APIUtil
to interact with the API - create
StaticPages
controller and root view - set up Redux cycle for frontend auth
- user signup/signin components
- blank landing component after signin
- style signin/signup components
- seed users
- set up Heroku
Objective: Users can create CRU profiles
- build out API and components for:
- creating a profile
- profiles are only editable by owner
- Seed profiles
Objective: Tracks can be created, read (played), edited and destroyed through the API. Users can start or stop the song by clicking a play/pause button
- create
Track
model - seed the database with a small amount of test data
- CRUD API for tracks (
TracksController
) - test out API interaction in the console.
- jBuilder views for tracks
- implement each track component
-
TracksIndex
-
TrackIndexItem (minus playback)
-
TrackForm
-
- save tracks to the DB when the form loses focus or is left idle after editing.
- style tracks components
- seed tracks
- Add playback/pause button to TrackIndexItem
- Integrate Web Audio functionality to start and stop a track
- Build out state of the TrackIndexItem using Web Audio analyzer so that
- it knows the current position of playback
- it knows whether its track is currently playing or not
- it can (optionally) keep track of elapsed time of the track using setTimeout (supposedly it is non-trivial to fetch elapsed time from Web Audio)
- given these, all tracks can be in multiple states of play status and position at the same time
- displaying a user's tracks
Objective: a currentTrack component allows users to navigate around site while track plays and control playback
- Create currentTrack footer component
- keeping track of the currently played song, regardless of navigation
- the current tracker updates only when a new play button, outside of the current track footer, has been pressed
-
Next
button resets currentTrack to whatever is next on the trackIndex's track list
- Use progress bar from previous phase to visualize track's progress
- Add volume control to currentTrack component and control using a gain node in Web Audio
- Test current track by navigating around site and trying to break it. Make sure it works smoothly and without stutters
- Style currentTrack footer component
Objective: Comments belong to tracks and to users. As a bonus, they are played at a particular position in the song
- create
Comment
model - build out API and components for:
- Comment CRUD
- Add comment input to TrackIndexItem
- Adding comments requires the user to have started listening to track - A simple implementation will add a comment input when the play/pause button or track visualizer has been engaged. More complex could keep track of plays by a particular user
- Allow all of a songs comments to be viewed on TrackIndexItem
- Comment CRUD
- Use CSS to style new components
- Seed Comments
- BONUS: tracks are
played
in the order in which they were created, one at a time
- Add Likes
- Add Messaging
- Add Waveforms
- Add Follow