Apartment Application

Create new Rails project with a PostgreSQL database

$ rails new apartment-app -d postgresql -T
$ cd apartment-app
$ rails db:generate
$ rails s

Add rspec to the Application

$ bundle add rspec-rails
$ rails generate rspec:install

Add Devise to the application

$ bundle add devise

$ rails generate devise User

Add React

$ bundle add react-rails
$ rails webpacker:install:react
$ rails generate react:install
$ rails generate react:component App

Serve React Components

$ rails generate controller Home

Added index.html.erb and input component call

<%= react_component 'App' %>

direct the Rails app to serve the React App.js component as the landing page

# ../config/routes.rb

Rails.application.routes.draw do
  resources :apartments
  devise_for :users
  root 'home#index'
end

Updated Javascript file with class component

import React, { Component } from 'react'

class App extends Component {
  render() {
    return(
      <>
        <h1>Hello World!</h1>
      <>
    )
  }
}

export default App

Generate Apartment Resource

$ rails g resource Apartment street:string city:string state:string manager:string email:string price:string
$ rails db:migrate

create relationship between users and apartments

# ./app/models/user.rb
class User < ApplicationRecord
  # Include default devise modules. Others available are:
  # :confirmable, :lockable, :timeoutable, :trackable and :omniauthable
  devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :validatable
  has_many :apartments
end

Navigation

As an unregistered user, I can see the navigation options for a page with all the apartment listings, a page where I can create an account, and always get back to the home page.

$ git checkout -b navigation

# ./config/environments/development.rb
# Creates a special model called User that gets devise code injected into each new model instance.
# allows for devise sign in and sign up forms
config.action_mailer.default_url_options = { host: 'localhost', port: 3000 }

# ./config/routes.rb
<%= react_component 'App', {
  logged_in: user_signed_in?,
  current_user: current_user,
  new_user_route: new_user_registration_path,
  sign_in_route: new_user_session_path,
  sign_out_route: destroy_user_session_path
} %>

$ bundle add bootstrap
$ yarn add reactstrap
$ yarn add react-router-dom@5.3.0