HomeSweetWoof

Live

Team Members

Overview

Home Sweet Woof is a fullstack MERN application that connects adopters to dog shelter organizations. Users can sign up as either an adopter or a shelter organization. Depending on the login credentials, the user has access to different types of functionality. Adopters can look through dog listings and make an appointment with dog shelters. Shelter organizations can add adoptable dogs to the list and update the dog's information. Both users can communicate with each other in real-time through a chat box.

Main Features

Home Sweet Woof has an appointment booking feature that utilizes DatePicker from the React library. DatePicker is a reusable React component to display dates using a calendar dialog. The local state in the calendar class is set to conditionally render appointments for both shelters and adopters.

Technologies

MongoDB
Express
React/Redux
Node.js
Socket.IO

Features

Live chatting

Adopters and shelters can live chat with each other and ask any questions they may have.

Filtering

Adopters can sort through the dog listings to narrow down their search based upon their preferences

Appointments

Adopters can schedule appointments with shelters, which will be noted on shelters home page.

Full CRUD for Dogs/Users

Shelters can create/edit/delete dog listings and users can freely edit their profile

Code

  if (this.props.user._id === this.props.currentUser.id) {
    editNumber = (
      <button id="add-phone-number-btn" onClick={this.editNumber}>
        +
      </button>
    );

    editDescription = (
      <button id="user-description-edit-btn" onClick={this.editDescription}>
        ✎ Edit
      </button>
    );
  }

As one of the key features of the website is the conditional rendering of what is displayed based upon the user's priviledge. One of the common themes throughout the code is what is and what is not displayed based upon the type of user logged in.

alexsaintlam / HomeSweetWoof