ZooWorld

ZooWorld is a React frontend, JSON-server backend based app that features:

1. creation and deletion of zoos,
2. adding or removing animals to those zoos,
3. and randomly generating a selection of animals from an external API source.

Goals

• Build a React single page application (index.html only) from scratch
  • Use create-react-app
  • 5 or more React components
  • Well organized and commented code
• Apply your knowledge of components, props and state management
• Incorporate client-side routing
  • React Router
  • RESTful Routing Conventions
• Use data from an API
• JSON-Server with GET / POST / PUT / DELETE requests
  • Use forms to interact with the backend JSON-Server

Routes

React Router

| Route Name | URL              | HTTP Verb  | Description                           |
| ---------- | ---------------- | ---------- | ------------------------------------- |
| Index      | /movies          | GET        | Display all movies                    |
| New        | /movies/new      | GET        | Display new movie form                |
| Create     | /movies          | POST       | Add new movie to db                   |
| Show       | /movies/:id      | GET        | Display a single movie's info         |
| Edit       | /movies/:id/edit | GET        | Display form to update specific movie |
| Update     | /movies/:id      | PUT/PATCH  | Update a specific movie               |
| Destroy    | /movies/:id      | DELETE     | Delete a specific movie               |

Requirements

4. Use a json-server to create a RESTful API for your backend and make both a GET and a POST request to the json server. Use a form to make your post request, specifically a controlled form/component. Additionally, you may choose to incorporate data from an external API but it is not required.

   • You should keep your json-server data simple: avoid nested data and associations. You'll learn how to work with more complex data in the next two phases. Focus on the frontend for this project.

   • Upon return of json from your POST request, a state update by a setState function is required!

     // in App:
     function addMovie(newMovie){
      setMovies([...movies, newMovie]) // Updating movies state.
     }
     
     //in Form
     const configObj = {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({title: "Titanic"})
     }
     
     fetch('http://localhost:3000/movies', configObj)
      .then(res => res.json())
      .then(data => addMovie(data)) //THIS STATE UPDATE IS REQUIRED!!!
      // clear form
     
     

     Remember: responsibility for re-rendering the page to display the updated list of movies should belong to the addMovie function; depending on a subsequent action to load the new data is not best practice.

5. Add some styling: you're encouraged to write your CSS from scratch, either by using styled components or writing CSS files and using id/className to style your elements. You can also incorporate a UI framework (like React Bootstrap, Semantic UI, or Material UI) if you prefer.

Stretch Goals

Once you have met the minimum requirements, feel free to explore! These are only the basic requirements — you're free to add on as much stuff as you'd like. For example, you may want to incorporate data from an external API. Check out this list of APIs if you need some inspiration!

Setup

For this project, you will need two separate repositories: one for your frontend and one for your backend. This will make it easier to deploy your project later, should you choose to do so.

Frontend Setup

Use create-react-app to generate starter code for your project. Follow the instructions on the create-react-app site to get started.

Backend Setup

You can use this json-server template to generate your backend code. Using this template will make it easier to deploy your backend later on.

If you prefer, instead of using the template, you can create a db.json file in the root of your project with a structure that looks like this:

{
  "toys": [
    {
      "id": 1,
      "name": "Woody",
      "image": "http://www.pngmart.com/files/3/Toy-Story-Woody-PNG-Photos.png",
      "likes": 8
    },
    {
      "id": 2,
      "name": "Buzz Lightyear",
      "image": "http://www.pngmart.com/files/6/Buzz-Lightyear-PNG-Transparent-Picture.png",
      "likes": 14
    }
  ]
}

Then, assuming you have json-server installed globally, you can run this command to run the server:

$ json-server --watch db.json

Whatever top-level keys exist in your db.json file will determine the routes available. In the example above, since we have a key of toys pointing to an array of toy objects, json-server will generate the following routes:

• GET /toys
• POST /toys
• GET /toys/:id
• PATCH /toys/:id
• DELETE /toys/:id

You can consult the json-server docs for more information.

Deploying

When your project is complete, you are encouraged to deploy it! You'll need to deploy your frontend and backend repos to their own standalone servers.

For your backend, if you are using json-server, you will need a service capable of running a Node.js server. We recommend using Render. See the json-server template for instructions on deploying your backend to Render.

For your frontend, we recommend using Netlify; however, there are a number of free services you can use if you'd like to explore alternatives.

Deploying Tips & Tricks

Routing

If you're using React Router, you'll also need to set up a _redirects file as specified here:

• Netlify Redirects

Your redirects file should be placed in the public folder. It looks like this:

/*    /index.html   200

Environment Variables

When working on your app, it's useful to consider which environment you're working on:

• Development: when working locally
• Test: when running tests
• Production: when deployed to server

You'll likely have some variables that change depending on what environment you're working in. For example, after deploying your site to production, you won't be able to access your backend on localhost anymore.

To handle these kinds of environment variables, we can use .env files.

create-react-app has some tools for working with .env files that you can read about here:

Custom Environment Variables

You can make a .env.development and .env.production file to keep track of separate environment variables. Note that these files should be in the root of your application directory (not in /src). For example, you might set up a .env.development file with your local development server URL:

REACT_APP_API_URL=http://localhost:4000

And a .env.production file with your deployed backend URL:

REACT_APP_API_URL=https://my-awesome-project.onrender.com

To use these environment variables in your code, you can access them at process.env.REACT_APP_VARIABLE_NAME:

fetch(`${process.env.REACT_APP_API_URL}/cats`)
  .then((r) => r.json())
  .then(setCats);

What Happens When I Deploy?

Glad you asked! Deploying your site involves taking the code that lives on your machine, and setting it up to run on someone else's machine.

As you'll recall, our frontend applications are a type of app known as a Single Page Application. What that means is that there is only one HTML file, along with a handful of JavaScript, CSS, fonts, images, and other static assets. So when our site is deployed, the main thing we need is a server to host all of those files and let other people from around the world access those files with their browsers.

In order to generate those files, create-react-app comes with a special build script that uses another tool, webpack, to take all of our JavaScript, CSS, and other assets from the src directory and optimize them by bundling (merging files together) and minifying (shortening the lines of code) so that the files load as fast as possible.

You can try this out on your own by running npm run build. This will create a new directory with your bundled and minified source code!

When you upload your project to Netlify, this build script will run automatically on Netlify's server, so that they can host the content for you. Any time you update your code and push the changes up to Netlify, the build

Netlify can be configured to use Continuous Deployment, which typically works by connecting your Git repository with Netlify's build process. Then, any time you push up changes to your main branch, your deployed site will automatically update! This makes it very easy to add features even after you've deployed.