Git Product home page Git Product logo

resty's Introduction

RESTy

phase 4 changes :

1- refactore the code so that the useReduser takes care of all the states 2- made sure that all rest methodes work correctly 3- added a history section 3- deployed the app

phase 3 changes :

1- refactore the code so that the use effect takes care of changing the formatted response once a response arrives 2- made sure that all rest methodes work correctly 3- deployed the app

Components and How They Work

  1. Header:

    • Displays the application name "RESTy" at the top of the page.
  2. Form:

  • Allows users to input the API URL and choose an HTTP method (GET, POST, PUT, DELETE).
  • When the user submits the form:
    • Sends an API request to the specified URL with the chosen HTTP method using Axios.
    • Displays the response and selected request parameters in the Results component.
  1. Results:

    • Displays the API response in a formatted JSON format.
    • Uses the response data stored in the App component's state.
  2. Footer:

    • Displays a simple copyright notice.
  3. App:

    • Manages the application state and logic.
    • Renders the Header, Form, Results, and Footer components.
    • Passes down functions and data to child components.

Getting Started

Prerequisites:

  • Node.js and npm (Node Package Manager) should be installed on your system. You can download them from https://nodejs.org/.

Installation:

  1. Clone the repository:

    git clone [repository_url]
  2. Navigate to the project directory

  3. Install dependencies:

    npm i
  4. Run the app

    npm run

    Interact with the App

  5. In the opened browser window, you'll see the RESTy app interface.

  6. Enter an API URL:

    • Locate the input field labeled "URL."
    • Type or paste the desired API URL into the input field. For example: https://api.example.com/data.
  7. Select an HTTP Method:

    • Just below the URL input field, you'll find buttons representing different HTTP methods: GET, POST, PUT, and DELETE.
    • Click on the appropriate button to select the desired HTTP method for the API request.
  8. Simulate Making an API Request:

    • Once you've entered the API URL and selected an HTTP method, click the "GO!" button located next to the input field.
    • This will simulate making an API request based on your selected parameters.
  9. View the Response:

    • After clicking "GO!", the Results section on the page will display the mock API response data in a structured JSON format.

Example

lab26

screen

lab27

screen

lab28

screen

resty's People

Contributors

mohannaddqa 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.