sara-ls / scribbled

An online books library built with React/Rails

An online books and documents library inspired by Scribd, built with Ruby on Rails

LIVE SITE

Technologies

• Ruby on Rails
• BCrypt
• React.js
• Redux.js
• PostgreSQL
• AJAX
• Heroku
• AWS S3
• HTML
• SCSS

Features

Splash page with modal that toggles between a login and signup form

Modal UI component renders either the login or signup form container components

const Modal = ({ modal, closeModal }) => {
  if (!modal) {
    return null;
  }

  let component = null;
  switch (modal) {
    case "login":
      component = <LoginForm id="form" />;
      break;
    case "signup":
      component = <SignupForm id="form" />;
      break;
  }
  return (
    <div className="modal-background" onClick={closeModal}>
      <div className="modal-child" onClick={e => e.stopPropagation()}>
        {component}
      </div>
    </div>
  );
};

Login/signup form container component provides session form component with correct form type, actions, and a button to switch to other form type as props

const mapStateToProps = ({ session, entities: { users }, errors }) => ({
  currentUser: users[session.id],
  formType: "login",
  errors: errors.session,
});

const mapDispatchToProps = (dispatch, ownProps) => ({
  processForm: (user) => dispatch(login(user)),
  demoLogin: () =>
    dispatch(login({ email: "[email protected]", password: "demopassword" })).then(
      () => {
        setTimeout(() => {
          alert("Your demo user session has expired. Please log in again.");
          dispatch(logout());
        }, 600000);
      }
    ),
  closeModal: () => dispatch(closeModal()),
  // Button to change modal to other form type
  otherForm: (
    <button
      className="other-form"
      onClick={() => dispatch(openModal("signup"))}
    >
      Sign Up
    </button>
  ),
  clearErrors: () => dispatch(clearSessionErrors()),
});

Book Reviews

• Logged in users can rate books by selecting a certain number of stars

• A processing animation is shows when reviews are submitted, and then the new review appears at the top of the list

// Book reviews component - called when "Post Review" clicked
handleSubmit(e) {
  e.preventDefault();
  let { loading, ...review } = this.state;
  review.rating = parseInt(review.rating);

  // Show loading animations
  this.setState({
    loading: true
  });
  
  // AJAX POST request
  this.props.submitReview(review).then(
    () => {
      // Refetch book reviews after new review added
      this.props.fetchBook(this.props.bookId).then(
        () => {
          // Reset component state
          this.setState({
            review_text: "",
            rating: undefined,
            book_id: this.props.book.id,
            user_id: this.props.user_id,
            loading: false // Remove loading animation
          });
       });
    },
    err => {
      this.setState({
        loading: false
      });
    }
  );
}

scribbled's Issues

Enable save button on books show page

MVP: User Auth

User Auth

Functionality

• The main button with logo should link to /
• Has working demo login
• Smooth, bug free navigation

Before Login

• The /login page should not display a link to Log In. Same for /signup
• Going to a random route /#/oweiniouewbrviuwebv should redirect or display a 404 page
• Errors should display for both /signup and /login.
• Errors should clear when moving between /signup and /login.
• Can sign up a user
• Can sign in as a user
• Can log out a user
• Can't sign up with the same username/email
• Pressing enter after filling out the session form should use the form data, not the demo user

After Login

• Should not be able to visit /login or /signup
• Should be able to refresh the page and still be logged in

Style

• The site should look exactly like the actual site
• All relevant elements should have cursor: pointer on hover
• When errors are displayed, most elements should not move around the page (particularly input boxes)
• Remove Redux logger and all console.log()'s from production

Seeds

• Adequate and appropriate seeds

React router bug

Fix React bug when hitting back button on book show page

FSP: Proposal

Wiki Page Home

• Is the first page you see upon entering the wiki
• Contains a welcome message
• Contains a link/placeholder for a link to the live page
• All links in the right sidebar should contain each wiki page and link to the correct page
• Correctly formatted
  • each wiki page is listed in bullet points
  • all links route the correct page

Comments

---

MVP List

• Should have 7 MVPs.
  • 3 of those are User Auth, Heroku, and Production README.
  • The other 4 are from the MVP List or they have clarified them with you
• Contains a description sentence of the app
• Includes two to three detailed bullets on functionality and presentation of feature
• At least one CRUD feature, which states what CRUD operations are planned (creation, reading, updating, deletion)
• Estimates how long it will take the code each MVP
• Correctly formatted
  • MVPs are listed in an ordered list
  • Each MVP is broken down into bullet points

Comments

---

Database Schema

• Contains correct datatypes
• Contains appropriate constraints/details
  • primary key
  • not null
  • unique
  • indexed
  • foreign key
• Contains bullet points after the table that state which foreign keys will reference to which table, or references to the associations which will be made
  • foreign key and table name are lowercased, snake_cased and back_ticked
• Correctly formatted
  • schema is written in a table format
  • the table's name are lowercased, snake_cased and back_ticked
  • the table header column names are bolded
  • columns names are lowercased and snaked_cased and back_ticked

Comments

---

Sample State

• State shape is flat!
• State's keys are camelCased
• All keys within the values in the state are accessible in the schema
• Correctly formatted
  • Sample state is rendered with triple backticks, and the language ```javascript...```). This will display the state as a code block instead of a giant line of text
  • Top level slices
    • entities
    • session
    • errors (here or in ui)
    • ui (if needed)
  • Should NOT have nested slices, aka comments inside of posts
    • Some info from other tables is ok, for instance:
      • the author username and imageurl for a post. basically any info that the user can't change
      • like count and a boolean on whether the user likes the post instead of a likes slice

Comments

---

Backend Routes

• Contains the following sections: HTML, API Endpoints(Backend)
• Each route has a description
• API Endpoint routes contains wildcard variables written in snake_case
• Routes does not contain superfluous routes
• Have API routes that will allow the front end to get all info it needs and does not have unneeded routes

Comments

---

Frontend Routes

• Frontend routes contains wildcard variables written in camelCase
• Correctly formatted
  • Routes are displayed with inline coding text (backticks)

Comments

Update README

• Add gifs
• Add description / highlights / how it works

File upload

• Flash upload errors
• Upload documents to AWS
• Style uploaded documents page
• Upload seed data to AWS