Giter VIP home page Giter VIP logo

snillingur's Introduction

Snillingur "Nordic Genius"

Snillingur "Nordic Genius" is a pixel-perfect tribute to a personal favorite site of mine, Genius.com featuring exclusively Nordic artists.

Screen Shot 2020-02-05 at 8 35 18 PM

I created this app using:

  • Ruby on Rails for backend routes and REST-ful API endpoints
  • PostgreSQL database, ActiveRecord and Active Storage / AWS S3 cloud storage for media and asset hosting
  • JBuilder formatting framework, AJAX calls
  • React.js frontend components with full Redux cycles
  • SCSS / Sass for styling
  • Full user authentication flow for users via BCrypt Hashing and salting and protected routes

Specifications:

  • Ruby version
    • 2.5.1
  • System dependencies
    • Please see package.json and Gemfile for dependencies

Features and Implementation

Full User Authentication flow

Users of the site can sign up for accounts and log into existing accounts via an authentication system encrypted with the BCrypt hashing and salting. Users who have not signed in with an account are prompted to sign in or login before they can contribute to annotations.

Search by Song Title and by Lyric

Users can search the app by song title (e.g. Dancing on My Own) or by lyric (e.g. "I'm giving it my own..). This is accomplished by having a stateful React component whose onChange event handler sends out a request to the API backend of the application with the users' input. In order to improve app efficiency and reduce thrash, I debounced the requests, so that the Axios request only sends out after the user has paused typing for a specific set of time. The Rails controllers and JBuilder receive and formulate the response to client.

Top Song Chart View with Filtering Based on Song Genre + # of Songs to Display

Users can view a listing of songs with artist information and album images. The chart view also features a filtering menu drop down which fetches results from the Rails backend routes based on the selected song genre and filters results by amount.

View Song Page Lyrics and View Related Annotations

Users can view the lyrics of a song on the song's dedicated song page. On page load, any pre-existing annotations that other users or the currently logged in user have added will be interactable. The user can click to open the annotation.

Annotating A Song, a simplified flow

Users can also submit an annotation for a song, update any existing annotations and delete an annotation. I redesigned this portion of the app's UI/UX to feature a more simplified and less costly flow:

Simplifications to UI / UX

Redesign of annotation look / feel

  • The lyric to which the annotation refers is on the card itself, creating greater relationship between the line and the interpretation.
  • I Redesigned the look of the annotation to have a "weightier feel" with drop shadow. This increased the distinction visually between a lyric and it's associated annotation and aids the user's eye in getting to relevant information.
  • I lightened some of the heavier elements on the annotation to better direct visual attention to the annotation itself.
  • Actions are present, but less visually clunky.
  • Color is used to highlight possible actions the user can take, as well as contributers to the annotation.

Screen Shot 2020-02-21 at 10 22 52 AM Screen Shot 2020-02-21 at 10 25 45 AM

Reducing steps to complete action => fewer clicks, less requests to the backend

  • The original Genius.com app featured a 4 step process to creating an annotation:

    1. select a section of song lyric to highlight
    2. Click button confirming that they wish "Start the Genius Annotation"
    3. Compose the annotation / interpretation of the lyric
    4. Hit confirm
  • If the user didn't do steps 3 (compose) and 4 (confirm), the annotation highlight persists, indicating that step 2 initiates a backend request. On page refresh, you can see the highlighted section with no annotation. This can easily lead to clutter on an already fairly cliuttered ui.

snillingur's People

Contributors

dependabot[bot] avatar srajiang avatar

Watchers

 avatar

snillingur's Issues

Project Proposal

Wiki Page Home

  • Is the first page you see upon entering the wiki
  • Contains a welcome message
  • Contains a link/placeholder for a link to the live page
  • All links in the right sidebar should contain each wiki page and link to the correct page
  • Correctly formatted
    • each wiki page is listed in bullet points
    • all links route the correct page

Comments


MVP List

  • Should have 7 MVPs.
    • 3 of those are User Auth, Heroku, and Production README.
    • The other 4 are from the MVP List or they have clarified them with you
  • Contains a description sentence of the app
  • Includes two to three detailed bullets on functionality and presentation of feature
  • At least one CRUD feature, which states what CRUD operations are planned (creation, reading, updating, deletion)
  • Estimates how long it will take the code each MVP
  • Correctly formatted
    • MVPs are listed in an ordered list
    • Each MVP is broken down into bullet points

Comments

  • under the ordered list, change to bullet points

Database Schema

  • Contains correct datatypes
  • Contains appropriate constraints/details
    • primary key
    • not null
    • unique
    • indexed
    • foreign key
  • Contains bullet points after the table that state which foreign keys will reference to which table, or references to the associations which will be made
    • foreign key and table name are lowercased, snake_cased and back_ticked
  • Correctly formatted
    • schema is written in a table format
    • the table's name are lowercased, snake_cased and back_ticked
    • the table header column names are bolded
    • columns names are lowercased and snaked_cased and back_ticked

Comments

  • add backticks to referent table

Sample State

  • State shape is flat!
  • State's keys are camelCased
  • All keys within the values in the state are accessible in the schema
  • Correctly formatted
    • Sample state is rendered with triple backticks, and the language ```javascript...```). This will display the state as a code block instead of a giant line of text
    • Top level slices
      • entities
      • session
      • errors (here or in ui)
      • ui (if needed)
    • Should NOT have nested slices, aka comments inside of posts
      • Some info from other tables is ok, for instance:
        • the author username and imageurl for a post. basically any info that the user can't change
        • like count and a boolean on whether the user likes the post instead of a likes slice

Comments


Backend Routes

  • Contains the following sections: HTML, API Endpoints(Backend)
  • Each route has a description
  • API Endpoint routes contains wildcard variables written in snake_case
  • Routes does not contain superfluous routes
  • Have API routes that will allow the front end to get all info it needs and does not have unneeded routes:
    • probably doesn't need a GET likes api endpoint because that info comes through the post show

Comments

  • snake_case instead of camelCase for wildcard variables

Frontend Routes

  • Frontend routes contains wildcard variables written in camelCase
  • Correctly formatted
    • Routes are displayed with inline coding text (backticks)

Comments

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.