Code Monkey home page Code Monkey logo

dailyrecord's Introduction

Daily Record http://daily-record.herokuapp.com

Simple use multi-track collaborative music blog

Starting off following this tutorial. It’s kind of old, but let’s see what we can get out of it anyway. For portions that I know are out of date, I am referencing onemonthrails.

Files

Generate Track scaffold

rails g scaffold tracks author:string title:string reflection:text
rake db:migrate

Install the ‘aws-sdk’ ruby gem

Gemfile

gem 'aws-sdk', '~> 1.47.0'

Install paperclip

Gemfile

gem 'paperclip', '~> 4.2.0'

Setup Devise

https://github.com/plataformatec/devise

Gemfile

Install Devise

gem 'devise'
bundle install
rails g devise:install

Setup Devise

  • [ ] Define default url options in environments files
    • [ ] development.rb
      config.action_mailer.default_url_options = { host: 'localhost:3000' }
              
    • [ ] production.rb
      config.action_mailer.default_url_options = { host: 'http://daily-record.herokuapp.com' }
              
  • [ ] Define root_url to something

    routes.rb

    root to: "tracks#index"
        
  • [ ] Place flash messages

    application view

    <p class="notice"><%= notice %></p>
    <p class="alert"><%= alert %></p>
        
  • [ ] Generate Devise views
    rails g devise:views
        
  • [ ] Generate Devise User model
    rails g devise User
    rake db:migrate
        

Configure tracks model with paperclip

track.rb

belongs_to :user
has_attached_file :audio

Generate a paperclip migration

rails g paperclip track audio
rake db:migrate

Update the Tracks controller for strong parameters

tracks controller

def track_params
  params.require(:track).permit(:author, :title, :reflection, :audio)
end

Update Tracks views

Configure S3

production.rb

config.paperclip_defaults = {
  :storage => :s3,
  :s3_credentials => {
    :bucket => ENV['AWS_BUCKET'],
    :access_key_id => ENV['AWS_ACCESS_KEY_ID'],
    :secret_access_key => ENV['AWS_SECRET_ACCESS_KEY']
  }
}
  • [ ] Create an S3 bucket in AWS

    dailyRecordTracks

    • [ ] Grant permission to everyone to upate/delete, edit, view

Get secret keys from AWS and configure heroku configs

heroku config:set AWS_BUCKET=dailyRecordTracks
heroku config:set AWS_ACCESS_KEY_ID=***
heroku config:set AWS_SECRET_ACCESS_KEY=***

Set up for audio playback

User/Track associations

rails g migration add_user_id_to_tracks user_id:integer:index
rake db:migrate

track.rb

belongs_to :user

user.rb

class User < ActiveRecord::Base
  # Include default devise modules. Others available are:
  # :token_authenticatable, :confirmable,
  # :lockable, :timeoutable and :omniauthable
  devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :trackable, :validatable

:

  has_many :tracks
end

Authentication

Tracks Controller

Set up Bootstrap

Bootstrap-sass

  • [ ] Create custom bootstrap stylesheet

    ./app/assets/stylesheets/bootstrap_and_customization.css.scss

    • [ ] create file
      echo "@import 'bootsrap';" > app/assets/stylesheets/bootstrap_and_customization.css.scss
              

    NOTE Place new variables before “@import ‘bootstrap’”

    • [ ] Fonts

      EXAMPLE:

    @import url(http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,700italic,700|Clicker+Script);
        
    • [ ] Variables
    $phill-grn: #3f8000;
        
  • [ ] Require Bootstrap’s Javascript, after jquery_ujs

    ./app/assets/javascripts/application.js

    //= require jquery
    //= require jquery_ujs
    //= require bootstrap
    //= require turbolinks
    //= require_tree .
        

Configure Views

Application

Application View

Header

Static Pages

Songs

Style

Stylesheets

Custom Bootstrap

Tracks Styles

dailyrecord's People

Watchers

 avatar  avatar

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.