francoasdev / art-book-app

🖼 ArtBook is a full-stack web app for exploring art portfolios. Ruby on Rails, PostgreSQL, React+Redux.

ArtBook

https://artbookapp.herokuapp.com/

ArtBook is a portfolio showcase web application. It is a full-stack app built using a Ruby on Rails backend, PostgreSQL database, and React/Redux front-end architecture.

Planning & Design

Design documents can be found in the wiki!

Technologies

Backend

• Ruby On Rails, PostgreSQL, Heroku, Cloudinary

  

Frontend

• React/Redux, HTML5, CSS3/SCSS, npm, webpack

  

Testing

• RSpec Rails, Jest

Features & Implementation

1. Users: A user can sign up, log in, and log out. Each user has a profile.

2. Projects: Users own many projects, which are composed of images. Images belong to a specific project. Projects can be explored on the dashboard.

3. Comments: Users can comment on projects and delete their own comments.

4. Likes: Users can like and unlike projects. A users liked projects are displayed on their profile.

# User Model Associations
class User < ApplicationRecord
  # ...
  has_many :projects, dependent: :destroy
  has_many :images, through: :projects, source: :images
  has_many :comments, dependent: :destroy
  has_many :likes, dependent: :destroy
  has_many :liked_projects, through: :likes, source: :project
  # ...
end

Secure Authentication

• BCrypt for password-salting and hashing for a secure authentication system.
• Guest / Demo Account

Modals

Modals were used to implement the Login/Signup session forms, as well as project views.

render() {
  const project = this.props.project;
  return (
    <div>
      <div className="project" key={project.id}>
        <section onClick={this.openModal.bind(this)}>
          <img className="thumbnail" src={project.thumbnail_url}/>
        </section>
        <section className="thumbnail-info">
          <span className="project-title">{project.title}</span>
          <Link to={`/users/${project.user_id}`}
                className="artist-name">{project.user}
          </Link>
        </section>
      </div>

      <Modal
        contentLabel="Modal"
        isOpen={this.state.modalOpen}
        onRequestClose={this.closeModal}
        style={style}>

        <div className="x-button">
          <button onClick={this.closeModal}><i aria-hidden="true"></i>
          </button>
        </div>
        <div className="project-detail">
          <ImageIndexContainer project={project}/>
          <ProjectInfoContainer project={project}/>
        </div>
      </Modal>
    </div>
  );
}

Comments and Likes

Users can comment and like projects.

In-Progress

• In progress: setup Continuous Integration (Jenkins build passed)
• In progress: Deploy through AWS server and remote Postgres database.
• In progress: Configure Segment

Future Features

Infinite scroll

This will allow users to keep scrolling to retrieve more content, instead of fetching it all at once.

Follows and User-specific Feed

Users will be able to follow each other, allowing for a customizable feed per user.

Search by content (tags)

Categorizing projects will allow users to search and filter through projects.

Upload projects

Users will be able to upload, edit, and destroy their own projects through the API.