Sunny Animal Shelter

The Sunny Animal Shelter has been looking for volunteers to set up their website, so you offered your help because what better way to add onto your resume and use your newly aquired knowledge for web development? Let's get started, there are animals that need to be adopted!

Learning Objectives

  • Full CRUD Express app with React frontend using lets-code

Prerequisites

  • JavaScript
  • Node / Express
  • React

The Overview

The animal shelter wants a shiny new site where they can list the animals they have up for adoption for potential adopters to see and maybe even reserve. The following user stories cover all the main functionality that they're hoping for.

User Stories

  • As a user, I should be able to see all the animals up for adoption
  • As a user, I should be able to add an animal as up for adoption
  • As a user, I should be able to edit an animal's information in case anything changes
  • As a user, I should be able to delete an animal's listing in case they find a happy new home!

Please use the the Bookmarks Mern videos and class recordings to help you

The Steps

Getting Started

  1. run lets-code and use the name animal_shelter
  2. cd animal_shelter when its done and open in vs-code
  3. Do all your work for this app inside the animal_shelter folders.
  4. Don't forget to open your gulpfile and tweak the watch if you add an extra folder

Creating the Express API

Set up a full CRUD Express API for the animals that will be listed on the website as up for adoption. Since we have no frontend at this point just yet, test to make sure your routes are working as you go along by using Postman.

NOTE: Remember that we're creating an API, so our data will be coming back as JSON

Guide

  1. Create an animal model, a sample schema can be found below:

    {
name: String,
species: String,
image: String,
reservedForAdoption: Boolean
}
  2. Create a router for the animals
  3. Create a create controller
  4. Create an index controller
  5. Create a delete controller
  6. Create an update controller
  7. Make sure you test that all the above routes work with Postman before moving on to the frontend portion!

Consuming the API with React - Index and Create

Now that we have an API, we want to actually connect it to a front-end. So, let's go ahead and create the front-end of the Animal Shelter's website that will use our API data. Beginning with the index and create!

  1. In your App.js, remove the default code generated by lets-code
  2. Write a basic component that just has an h1 of Sunny Animal Shelter and render it to your page to make sure everything's connected correctly

  3. Once you're sure everything's connected, build out the CR functionality

    • Create a form that on submit will make a POST request to your backend

      • The create form should only have: name, species, and image
      • Instead of giving the user the option to specify the reservedForAdoption value, make it be false by default for every animal listing created
    • Make it so that when your page loads, all the animals that are up for adoption will populate the page

Consuming the API with React - Delete and Update

Great! The shelter is already happy with just that functionality and it's been getting more people to visit! With the boom in adoptions, they now need a way to remove animal listings once they've found a new home. They've also noticed that they commonly made typos every now and then, so they would love a way to edit the listings in those cases!

  1. Build out the UD functionality

    • Add a "Found a new home" button on each animal, so that when the user clicks on it the animal will be removed from the shelter

    • Make it so they can update an animal's listing

      • Similar to the create form, do not worry about letting the user update the reservedForAdoption value. Just let them edit the name, species, and image
      • If you want to let them updated that value, take a look at hungry for more!

And that's it! The shelter is very happy with the work you've done for them 🐶🐱

Hungry for More?

While the shelter is perfectly content with the current state of the app, as you worked on it you had a couple more feature ideas!

In the backend

  1. Update the schema to add a few more details about the animals: age (Number), sex (String, male or female), breed (String)

    • Don't forget to update all your current database entries to make sure they have those fields as well!

In the frontend

  1. Make it so that when you click on an animal's name, it will toggle all the extra information that you just added (age/sex/breed)

    • On page load, don't show this information. Only show it when they click on an animal to see those extra details. When they click again, it should re-hide the information

  2. Add another button to each animal that says "Reserved" so that when a user clicks it, it automatically updates the animal's reservedForAdoption status

    • If the current status is true, it should change it to false and vice versa
  3. Make buttons at the top of the page where you can filter by species (e.g. clicking on a "Cats" button will show only the cats)
  4. Style the frontend up!
  5. Think of other features you would personally like to add and try to implement them