This page is a work in progress.You can help improve it. →

The Rise (again) of the Tamagotchi

This project will build a front-end for an existing API. See the The Rise of the Tamagotchi assignment for the details of your API.

Your front end's functionality will include the four parts of a web app: create, read, update, and delete.

Objectives

  • Deploy your API.
  • Create a front-end that implements CRUD features against your existing API.
  • Practice React: useState, useEffect, maybe 'React Query', and React Router

BEFORE YOU GET STARTED

Before you get started on any of the following, you must deploy your API assignment.

To do so:

  1. Navigate to your old assignment.
  2. Open the file STUDENT.md and follow the instructions for To SETUP deployment to Heroku
  3. Once you have successfully deployed your application: Use the Insomnia app to work with your API. At a minimum, use your API endpoints to create and list your Pets

NOTE: You may run into problems deploying your application for the first time. You may have database migration issues or other code issues. If you receive errors: STOP and seek the help of your instructor or teaching assistants.

Setup

degit $GITHUB_USER/react-project-template TamagotchiFrontEnd

Explorer Mode

  • Design a front end application that has multiple features and pages:

    • Have fun with the styling. Make your CSS neat and presentable, but apply your creativity!
    • The home page should show a list of all the pets in your API. The listing should include their name, birthday, hunger level, and happiness level.
    • Add a form to your home page to input a new pet's name and use your "CREATE" API to make a new pet. The list of pets should refresh.
    • Make each pet on the home page a <Link> to a page showing the pet's detail. The detail page should show the name, birthday, hunger level, and happiness level.
    • On the detail page, add buttons to:
      • Play with the pet
      • Feed the pet
      • Scold the pet
    • After each of the above actions, reload the data for the pet (use React to do this, NOT a force page reload)
    • Add a button to delete a pet. After deletion, redirect the user to the home page
    • Add a link on the detail page to navigate to the home page.
  • DEPLOY your front end and test it on your netlify version.

  • SHARE it with friends and brag about how you created the entire code for this.

Adventure Mode

  • Add some new fields to your pet. Perhaps a string-based URL of an image of the pet to display beside its name.
  • Add a "search" field on the home page. When the user types in that field, dynamically update the pet list only to include pets whose name includes the input text.
  • Ensure the pets on the home page are sorted by their NAMES. You could implement this in the FRONT END or the BACK END.

Epic Mode

Add a user interface on the home page to sort your pets by their name, hunger level, or happiness level.

© 2017 - 2021; Built with ♥ in St. Petersburg, Florida.