Yenius is a fullstack clone of the music encyclopedia Genius.
The frontend is a React/Redux app that uses the Redux Hooks API. It was created using cra-template-redux, the official Redux+JS template for Create React App. The backend is an API-only Ruby on Rails app, and uses a postgreSQL database.
Live site at yenius.herokuapp.com
- Inspired by the Heroku blog post A Rock Solid, Modern Web Stack
Guide on creating an API-only Rails project
Because life is too short to configure Webpack manually
-
Configure yenius-client server to proxy any unknown API requests to the yenius-api server.
node foreman starts yenius-client and yenius-api from Procfile yenius-client: webpack-dev-server returns index.html with React app, uses react-router-dom to update Components in response to changes in frontend routes yenius-api: rails server returns JSON data in response to RESTful API calls (Procfile specifies the port to use)
Users access the application via yenius-client Adding "proxy": "http://localhost:3001/\" in package.json tells webpack-dev-server to proxy any unknown requests to yenius-api at localhost:3001.
This setup allows the application to avoid CORS issues like "No 'Access-Control-Allow-Origin' header is present on the requested resource."
https://create-react-app.dev/docs/proxying-api-requests-in-development/
- Maximize state management and minimize boilerplate with the Hooks API
- Redux store maintains single source of truth on frontend, allowing easy access to complex and interconnected song metadata
- Single page app support for lightning fast rendering on the front end
- Just the best bits, leaving React to handle the UI.
- Single source of truth in PostgreSQL backend (join tables)
- Flexible backend allows addition of new artist credits and relationships without changes to database schema
Production Deployment on Heroku
- Avoid CORS complications by managing both Node and Ruby from the same origin
Image Hosting on AWS S3
- AWS description
- API description
- User Authentication, including error handling and "Demo User" login
- BCrypt gem salts, hashes, and retrieves passwords, maintaining secure user authentication from front-end to back-end
- Authenticated Users can create, update, and delete comments/annotations
- Artist Credits
- Song Interpretations
- User metrics
The Rails API uses a counter cache to store each User's authored comments.
https://blog.appsignal.com/2018/06/19/activerecords-counter-cache.html
The counter_cache: option is specified on the belongs_to side of the association (Comment), and the symbol passed (:authored_comments_count) is the name of the field that will be added to the has_many model (User).
belongs_to :author, class_name: :User, foreign_key: :commenting_user_id, counter_cache: :authored_comments_count
Generate migration to add a column to the Users table
rails g migration AddAuthoredCommentsCountToUsers authored_comments_count:integer
Generate migration to update the existing records (avoids having to re-seed the database)
rails g migration ResetUserAuthoredCommentsCount --force
Run migrations (development)
heroku local:run rails db:migrate
Staying organized is one of the foremost challenges in creating a fullstack web application.
The file structure of this project changed multiple times over the course of development:
- AppAcademy structure
- Rails Webpacker
- 2 repositories: CreateReactApp frontend, Rails 6 API backend
- Current setup
Process Types and the Procfile | DEIS The Procfile | Heroku Dev Center The Process Model | Heroku Dev Center
- "Nothing we do is difficult, it's all just very complicated" - Scott Myers
It's a tale as old as time: everything is running smoothly in development, then you push to production and nothing works. The more our development environment resembles our production environment, the merrier you'll be when it comes time to deploy. If you're using Heroku for your production deployment, make the transition as painless as possible and use Heroku local.
In production, Heroku stores environmental variables in the config vars. (these values have been locally exported for reference and can be found at .env.prod)
In development, Heroku local reads environmental variables from a .env file.
rails start
# lib/tasks/start.rake
namespace :start do
task :development do
exec 'heroku local -f Procfile.dev'
end
end
desc 'Start development server'
task :start =- 'start:development'heroku commands are executed by the Heroku Command Line Interface (CLI).
Heroku (and by extension Heroku local) uses a Procfile to specify the commands to be executed by the app on startup
# heroku local -f Procfile.dev -e .env
web: PORT=3000 yarn --cwd client start
api: PORT=3001 bundle exec rails sHeroku CLI reads Procfile.dev and starts the tasks:
-
web: PORT=3000 yarn --cwd client startRuns the frontend on a local Node server on port 3000 Access the client at http://localhost:3000 in your browser -
api: PORT=3001 bundle exec rails sRuns the backend on a local Rails server on port 3001 Access ActiveAdmin via the API, at http://localhost:3001/admin
heroku local:run rails db:seed
heroku local:run rails db:drop && heroku local:run rails db:create && heroku local:run rails db:migrate && heroku local:run rails db:seed
git push heroku main
heroku run rake db:migrate db:seed
heroku restart && heroku pg:reset DATABASE --confirm yenius--rails6-api && heroku run rake db:migrate && heroku run rake db:seed
- pre-commit
- Prettier
- ESLint
pre-commit is a framework for managing and maintaining multi-language pre-commit hooks It requires python to run
UPDATE: pre-commit should now only run Prettier on the /client directory /client directory uses Prettier and ESLint to format code as a pre-commit hook
-
add CMS access with ActiveAdmin
-
multiple user roles:
- moderators can edit, delete all Comments
- admins can add, edit ArtistCreditTypes, SampleCreditTypes
- users can add, edit Albums, Artists, Songs, Lyrics, ArtistCredits, SampleCredits
-
show headshot on hover
- mousing over an artist link should display the artist's headshot
- the headshot should disappear when the user mouses away