Giter Club home page Giter Club logo

phase-4-debugging-network-requests-lab's Introduction

Putting it All Together: Client-Server Communication

Learning Goals

  • Understand how to communicate between client and server using fetch, and how the server will process the request based on the URL, HTTP verb, and request body
  • Debug common problems that occur as part of the request-response cycle

Introduction

Just like the last lesson, we've got code for a React frontend and Rails API backend set up. This time though, it's up to you to use your debugging skills to find and fix the errors!

To get the backend set up, run:

$ bundle install
$ rails db:migrate db:seed
$ rails s

Then, in a new terminal, run the frontend:

$ npm install --prefix client
$ npm start --prefix client

Confirm both applications are up and running by visiting localhost:4000 and viewing the list of toys in your React application.

Deliverables

In this application, we have the following features:

  • Display a list of all the toys
  • Add a new toy when the toy form is submitted
  • Update the number of likes for a toy
  • Donate a toy to Goodwill (and delete it from our database)

The code is in place for all these features on our frontend, but there are some problems with our API! We're able to display all the toys, but the other three features are broken.

Use your debugging tools to find and fix these issues.

There are no tests for this lesson, so you'll need to do your debugging in the browser and using the Rails server logs and byebug.

Note: You shouldn't need to modify any of the React code to get the application working. You should only need to change the code for the Rails API.

As you work on debugging these issues, use the space in this README file to take notes about your debugging process. Being a strong debugger is all about developing a process, and it's helpful to document your steps as part of developing your own process.

Your Notes Here

  • Add a new toy when the toy form is submitted

    • How I debugged:
  • Update the number of likes for a toy

    • How I debugged:
  • Donate a toy to Goodwill (and delete it from our database)

    • How I debugged:

phase-4-debugging-network-requests-lab's People

Contributors

ihollander avatar lizbur10 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.