# Lesson 1: Build and test RESTful APIs with Postman

## **RESTful APIs**

### **1. What is a RESTful API?**

* **Definition:** REST (Representational State Transfer) is an architectural style for designing networked applications. A RESTful API allows interaction with web services using standard HTTP methods (GET, POST, PUT, DELETE).
* **Key Concepts and RESTful API Charateristics:**
  * **Client-Server:** The client (e.g., a web browser, mobile app) and server are separate entities.
  * **Stateless:** Each request from a client contains all the information needed to process it.
  * **Cacheable:** Responses can be cached to improve performance.
  * **Resources:** Represented as URLs (e.g., `/users`, `/products`).
  * **Uniform Interface:** A consistent way of interacting with resources using **HTTP Methods,** URLs, and data formats (typically JSON). **:**
    * **GET:** Retrieve data.
    * **POST:** Create new data.
    * **PUT:** Update existing data.
    * **DELETE:** Remove data.
  * **URLs (Endpoints):** Unique addresses used to identify resources.
  * **Representations:** Resources are transferred in a specific format, most commonly JSON (JavaScript Object Notation).
* **Example:** A RESTful API for a bookstore might have endpoints like `/books` to get a list of books or `/books/:id` to get details of a specific book.

### **2. Building RESTful APIs with Express Framework** and a Vite React Application**:**

* **Setting up the Project:**
  1. **Create a Vite React project:**

     Bash

     ```bash
     npm create vite@latest my-api-app --template react
     cd my-api-app
     npm install
     ```
* **Install Express and other dependencies:**

```bash
npm install express cors body-parser
```

* **Setup Express and Testing APIs:**

  1. **Initialize a Node.js Project:**

     ```
     mkdir my-api-app && cd my-api-app
     npm init -y
     npm install express cors
     ```
  2. **Create the server file (`server.js` or `index.js`):**
     * Create `index.js`:

       ```javascript
       const express = require('express');
       const cors = require('cors');
       const app = express();
       const PORT = 3000;

       app.use(cors());
       //app.use(bodyParser.json()); // Enable parsing JSON request bodies
       app.use(express.json());

       // Sample data
       let books = [
         { id: 1, title: '1984', author: 'George Orwell' },
         { id: 2, title: 'To Kill a Mockingbird', author: 'Harper Lee' },
       ];

       // GET all books - API Endpoints
       app.get('/books', (req, res) => {
         res.json(books);
       });

       // GET a specific book
       app.get('/books/:id', (req, res) => {
         const book = books.find(b => b.id == req.params.id);
         if (book) res.json(book);
         else res.status(404).send('Book not found');
       });

       // POST a new book
       app.post('/books', (req, res) => {
         const newBook = { id: books.length + 1, ...req.body };
         books.push(newBook);
         res.status(201).json(newBook);// 201 Created status code
       });

       // PUT to update a book
       app.put('/books/:id', (req, res) => {
         const index = books.findIndex(b => b.id == req.params.id);
         if (index !== -1) {
           books[index] = { id: parseInt(req.params.id), ...req.body };
           res.json(books[index]);
         } else res.status(404).send('Book not found');
       });

       // DELETE a book
       app.delete('/books/:id', (req, res) => {
         books = books.filter(b => b.id != req.params.id);
         res.status(204).send();
       });

       app.listen(PORT, () => console.log(`Server running on http://localhost:${PORT}`));
       ```
  3. **Testing RESTful APIs with Postman:**

     * **Install Postman:** Download from [postman.com](https://www.postman.com/).
     * **Testing Steps:**
       1. **GET Request:**
          * Open Postman and enter `http://localhost:3000/books`.
          * Click **Send** to retrieve the list of books.
       2. **POST Request:**
          * Select **POST** and enter `http://localhost:3000/books`.
          * Go to **Body**, select **raw**, and choose **JSON** format.
          * Enter the following:

            ```json
            {
              "title": "The Great Gatsby",
              "author": "F. Scott Fitzgerald"
            }
            ```
          * Click **Send** to add a new book.
       3. **PUT Request:**
          * Select **PUT** and enter `http://localhost:3000/books/1`.
          * Update the book information in the **Body** and click **Send**.
       4. **DELETE Request:**
          * Select **DELETE** and enter `http://localhost:3000/books/1`.
          * Click **Send** to delete the book.

     **4. Integrating the API with a Vite React Application:**

     * **Fetching Data from API:**
       * Edit `src/App.jsx`:

         ```jsx
         import { useState, useEffect } from 'react';

         function App() {
           const [books, setBooks] = useState([]);

           useEffect(() => {
             fetch('http://localhost:3000/books')
               .then(response => response.json())
               .then(data => setBooks(data));
           }, []);

           return (
             <div className="p-4">
               <h1 className="text-2xl font-bold">Book List</h1>
               <ul>
                 {books.map(book => (
                   <li key={book.id}>{book.title} by {book.author}</li>
                 ))}
               </ul>
             </div>
           );
         }

         export default App;
         ```

  **Run both the server and the React app:**

  * In your terminal, navigate to your project directory and run: <mark style="color:red;">**`node index.js`**</mark> (or `nodemon index.js` for automatic restarts).
  * In a separate terminal, run: <mark style="color:orange;">**`npm run dev`**</mark> (or `yarn dev`) to start your React development server.

**Student Activity:**

* Build a RESTful API using Express to manage a list of tasks.
* Test the API using Postman (add, update, delete tasks).
* Create a Vite React app to display and interact with the API.

By the end of this session, students will understand RESTful APIs, how to build them using Express, and how to test and integrate them into a React application.