🖼 ArtBook is a full-stack web app for exploring art portfolios. Ruby on Rails, PostgreSQL, React+Redux.
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.
Ruby On Rails, PostgreSQL, Heroku, Cloudinary
React/Redux, HTML5, CSS3/SCSS, npm, webpack
Users: A user can sign up, log in, and log out. Each user has a profile.
Projects: Users own many projects, which are composed of images. Images belong to a specific project. Projects can be explored on the dashboard.
Comments: Users can comment on projects and delete their own comments.
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
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>
);
}
Users can comment and like projects.
This will allow users to keep scrolling to retrieve more content, instead of fetching it all at once.
Users will be able to follow each other, allowing for a customizable feed per user.
Categorizing projects will allow users to search and filter through projects.
Users will be able to upload, edit, and destroy their own projects through the API.