Code Monkey home page Code Monkey logo

annotateme's Introduction

AnnotateMe

[Visit] link

Minimum Viable Product

AnnotateMe is a web application inspired by Genius built using Ruby on Rails and React.js. AnnotateMe allows users to:

  • Create an account
  • Log In/Log out
  • Create, read, edit and delete songs.
  • Highlight lines and add complex annotations to the lyrics.
  • Search for songs

Design Docs

Implementation Timeline

Phase 1: User Authentication, User Sessions, Song Model and JSON API

In Phase 1, I will begin by implementing user signup and authentication (using BCrypt). There will be a basic landing page after signup that will contain the container for the application's root React component. I will also set up the sessions aspect of the website. Before building out the front end, I will begin by setting up a full JSON API for Songs.

[Details] phase-one

Phase 2: Flux Architecture and Song CRUD

Phase 2 is focused on setting up Flux, the React Router, and the React view structure for the main application. After the basic Flux architecture has been set up, a Song store will be implemented and a set of actions corresponding to the needed CRUD functionality created. Once this is done, I will create React views for the Songs Index, IndexItem and Form. At the end of Phase 2, Songs can be created, read, edited and destroyed in the browser. Songs should save to the database when the form loses focus or is left idle after editing. Lastly, while constructing the views I will start building the basic CSS for styling.

[Details] phase-two

Phase 3: Annotations and Search

Phase 3 adds annotations to the Songs. Annotations belong to a Song and a User. Create JSON API for Annotations. Users can bring up annotations in a separate AnnotationsIndex view by searching for their annotations. Searching mechanism for songs will be implemented as well.

[Details] phase-three

Phase 4: Styling of Annotations

Phase 4 adds the highlighting feature of Genius for annotating the lyrics.

Phase 5: Seeding and final clean-up

Phase 5 adds seed data, and if needed, refactoring of code.

Bonus

  • Users can follow each other.
  • Artists have their own page, and can be followed.
  • Searching improvements - can allow to search by artist or song name.
  • Add more features to annotations - images, youtube/soundcloud links, etc

annotateme's People

Contributors

mihirjham avatar

Watchers

James Cloos avatar  avatar

annotateme's Issues

Annotations

What is your plan for associating the annotations with their snippet at the view layer?

Phase 1

I think you should set up your backend for songs in phase 2 when you set up the song frontend

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.