Table of Contents

1. Introduction

2. Technologies

3. Features

4. Future Direction

---

Introduction

Purrojects is an Instructables clone for finding and sharing instructions for creating projects for cats.

Live link to Purrojects!

---

Technologies

Backend

Purrojects is built on a Ruby on Rails framework with a PostgreSQL database. User-uploaded images are hosted with Amazon Web Services.

Frontend

Purrojects uses React and Redux to dynamically update and respond to user interaction in a single-page app.

---

Features

• Users can browse projects

  • Project list is structured with a container component populated with reusable project index item presentational components. Project index component:

      <div className="project-list">
        {projects.map(project => (
          <ProjectIndexItem project={project} users={users} key={`project-${project.id}`}/>
        ))}
      </div>

• Users can view projects with step-by-step directions

  • Project view is structured with a container component populated with reusable step presentational components.

      <div className="project-title">{this.props.project.title}</div>
      <p>by {this.props.project.author.username}</p>
      {this.props.project.imageUrl ? (
        <img className="project-show-image" src={this.props.project.imageUrl} />
      ) : null}
      <div className="project-body">{this.props.project.body}</div>
      <StepList
        projectId={this.props.project.id}
        steps={this.props.steps}
      />

    <ul className="step-list">
      {steps.map((step, idx) => (
        <StepListItem step={step} key={`step-${step.id}`} idx={idx}/>
      ))}
    </ul>

• Users can create and update projects

  • Steps can be edited or deleted individually
  • Users can add photos to projects and steps
    • Image upload form displays an image preview if one has been uploaded

        <div className="edit-box-left">
            {this.state.imageUrl || this.props.step.imageUrl ? this.previewImage() : this.imageForm()}
        </div>

  • Users can edit and delete projects that they have authored

• Users can search for projects based on keywords in project title

  • Search dispatches an action to fetch projects with a title that matches the query param

    Async action to search projects:

    export const searchProjects = search => dispatch => (
      ProjectAPIUtil.searchProjects(search)
        .then(projects => dispatch(receiveProjects(projects)))
    );

    Ajax request to project API endpoint

    export const searchProjects = search => (
      $.ajax({
          method: "GET",
          url: `/api/projects`,
          data: { search }
      })
    )

• Users can add comments to projects

  • Clicking "Add Comment" or "Cancel" toggles visibility of comment form

    <div className="new-submit" id="comment-form">
      {this.state.clickable ? this.clickableButton() : this.unclickableButton()}
      {this.state.formVisible ? (
      <CommentFormContainer
          projectId={this.props.projectId}
          toggleForm={this.toggleForm}
      />
      ) : null}
    </div>

---

Future Direction

• Filtering projects by category