README

Bagquest

Live Demo

Bagquest is a website for the bag lovers, inspired by Pinterest. It makes use of a Rails/PostgreSQL backend with React.js and Redux on the frontend.

Getting Started

Run bundle exec rails db:setup, bundle exec rails db:seed, and npm install.

Features

Active Storage

Amazon S3 services is a flexible, scalable and secure storage solution. Using Amazon S3, we don't have to store photos in database table.

/app/models/pin.rb

class Pin < ApplicationRecord
  has_one_attached :photo

  def ensure_photo
    unless self.photo.attached?
      errors[:photo] << "must be attached"
    end
  end

  validate :ensure_photo
end

/app/views/api/pins/show.json.jbuilder

json.extract! @pin, :id,:description, :author_id, :url

if @pin.photo.attached?
  json.photoUrl url_for(@pin.photo)
end

Modal

Bagquest is using BCrypt to secure frontend to backend user authentication.

login signup createBoard CreatePin are using the same modal to make code dry.

case 'signup':
  return (
    [<div className="modal-background" onClick={this.props.closeModal}>
  </div>,
    <div className="modal-child" onClick={e => e.stopPropagation()}>
      <SignupFormContainer />
    </div>]
  );
break;
case 'createBoard':
    return (
      <div className="board-modal-background" onClick={this.props.closeModal}>
        <div className="board-modal-child" onClick={e => e.stopPropagation()}>
          <CreateBoardContainer />
        </div>
      </div>
    );
break;

Dropzone

Using npm dropzone packdge to upload/drag photo to rails active storage.

Masonry

Using npm masonry package to seamlessly render photos that come in different dimensions.