Rails MVC for Frontend Devs Public

(This badge is a work in progress)

Learning Objectives

• Folder structure of the rails apps
• Basic MVC structure
• Some sort of incredibly abbreviated introduction to ruby syntax
• Asset Pipeline
• Routes File
• ERB Templates

Resources

• Ruby basics: https://pine.fm/LearnToProgram/
• Hartl Tutorial:  https://www.learnenough.com/ruby-on-rails-4th-edition-tutorial/beginning
• Rails Guides/Documentation relevant to our static MVC apps:
  
  • Layouts and Rendering in Rails:  https://guides.rubyonrails.org/layouts_and_rendering.html)
  • Rails Routing from the Outside In:  https://guides.rubyonrails.org/routing.html)
  • Debugging Rails Applications:  https://guides.rubyonrails.org/debugging_rails_applications.html)
  • The Asset Pipeline:  https://guides.rubyonrails.org/asset_pipeline.html)
  • Working with JavaScript in Rails:  https://guides.rubyonrails.org/working_with_javascript_in_rails.html)

Challenge:

Add a new static page to the LSP website application: https://github.com/badgelist/lsp/tree/master/ruby/website

1. Setup environment

• if you haven't already, clone the LSP monorepo

2. Create a new local branch that should be named in the format:   

• 000-rails-mvc-badge-USERNAME   
• replace USERNAME with your github username
  

3. Add a new static page to the Rails MVC project   

• Generate a new controller for a new page called 'badge_challenge'   
• Customize the Title for the entire site   
• Add a variable to the 'badge_challenge' index controller that can be set to either of these string values: "content_a" or "content_b"
• Add functionality in the view (use partials) to show one set of content or another set of content depending on the value of that controller variable
• Add a CSS page to customize the background-color to any color you like-- add a JS file to print to the console the inner text of the partial that is being shown on the page based on the controller variable value

4. When done:         

• create a remote branch on the github LSP monorepo to mirror your local branch   
• push your branch up to the remote branch   
  
• Post a link to the branch in #Challenge
• Request feedback on this badge