2023-05-25 - Rails Frontend (SASS)

• back to Le Wagon's Bootcamp log.
• link to the lecture
• maybe this course can be useful: CSS com SASS - Origamid

main topics

• SASS
• assets pipeline
  • precompile
  • concatenate
  • minify
  • fingerprint (for caching)
  • compress (gzip)

main takeaway

rails new new_app
cd new_app

Gemfile

gem 'simple_form'
gem 'sassc-rails'

config/initializers/assets.rb

Rails.application.config.assets.paths << Rails.root.join("node_modules")

bundle install
yarn add bootstrap @popperjs/core
rails generate simple_form:install --bootstrap
mv app/assets/stylesheets/application.{css,scss}
echo '@import "bootstrap/scss/bootstrap"' > /app/assets/stylesheets/application.scss

Challenge

Watch-List

Seeding with movie data

Seed real movies by using this API (with open-uri and json ruby libs).

Connect to it via this proxy: http://tmdb.lewagon.com

For images, use this URL prefix: https://image.tmdb.org/t/p/w500/

Here’s how it works:

1. the API would say: use https://api.themoviedb.org/3/movie/top_rated?api_key=<your_api_key>
2. What you should do is replace this part of the url https://api.themoviedb.org/3 by http://tmdb.lewagon.com
3. You can try it here

Movie Images

To understand how to get the movie images from the API, make sure to carefully read this page in the docs.

User actions

• lists
  • As a user, I can see all my movie lists
  • As a user, I can see the details of a movie list
  • As a user, I can create a movie list
• bookmarks
  • As a user, I can bookmark a movie inside a movie list
  • As a user, I can destroy a bookmark