Module 1: Full Stack Part Two - Backend

---

1. Backend Responsibilities

The backend involves authenticating users, processing requests and data, and API endpoints.

A. Authentication

Are the user’s credentials valid?

Backend checks:

1. Is the request properly formatted?
2. Does it have valid data?
3. Is the user allowed to submit responses?

B. Logic Processing

How should this request be processed?

C. Data Processing

How should this data be organized and stored?

D. API Endpoints

What can the user do?

| Method | Purpose | Your Free Response Example |
|--------|---------|---------------------------|
| **GET** | Retrieve data | View all submitted responses |
| **POST** | Create new data | Submit your answer (what you coded!) |
| **PUT** | Update entire resource | Edit your entire response |
| **PATCH** | Update part of resource | Just fix a typo in your response |
| **DELETE** | Remove data | Delete your response |

### HTTP Status Codes

Your code already handles these!
```javascript
if (res.ok) {
  // Status 200-299: Success!
  messageDiv.textContent = ` Response saved! (ID: ${data.id})`;
} else {
  // Status 400-599: Error!
  messageDiv.textContent = " Error submitting response.";
}

4. Databases: Where Data Is Stored

Key Terms:

• Table: Groups of related data (like “responses”)
• Row: One record of data
• Column: One category of information (ex: name, id)
• Primary Key: Unique ID for each row

example responses table in a database:

id	name	response	created_at
1	Alice	The frontend HTML builds the structure…	2024-10-28 10:30:00
2	Bob	Full stack systems link user interaction	2024-10-28 11:15:00
3	Charlie	The JavaScript function sends data…	2024-10-28 14:22:00

---

5. APIs: The Bridge Between Frontend and Backend

What is an API?

API = Application Programming Interface

APIs allow the frontend and backend to communicate with each other.

RESTful API Design

REST = REpresentational State Transfer

Rules:

1. URLs represent endpoints: /api/responses
2. HTTP methods represent actions: POST (create), GET (read)
3. Each request is independent
4. Responses use standard formats (JSON)

Example API Design:

POST   /api/responses     → Create new response
GET    /api/responses     → Get all responses
GET    /api/responses/42  → Get response with ID 42
PUT    /api/responses/42  → Update response 42
DELETE /api/responses/42  → Delete response 42

---

6. JSON

What is JSON?

JSON = JavaScript Object Notation

JSON is used to send data between frontend and backend.

Why JSON?

JSON is:

• Short and clean
• Easy to read
• Native to JavaScript
• Fast to parse

---

7. Environment Setup & Development

Local vs Production

Local Development :

const javaURI = "http://localhost:8085";  

Production (Live website):

const javaURI = "https://api.mywebsite.com";  

Benefits of using const javaURI:

• Change URL in one place
• Easy to switch between local and production
• Can test different backend servers
• Keeps code clean and maintainable

Up Next

In the next submodule, you’ll learn about APIs and Databases. Keep progressing in order to receive a certificate for completing this module.

8. Quick Quiz — Module 1 (Interactive)

Answer the five questions below. Pick the best choice (A–D) and click Submit to see your score.

1. You see this frontend call:

   fetch(`${javaURI}/api/responses`, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ name: "Ana", response: "Here is my answer" })
   });
   

2. What is the backend expected to do first when this request arrives?</div>
   A. Write the body to the database without checks
   B. Return status 200 immediately to acknowledge receipt
   C. Validate the request format and required fields, then authenticate the user if needed
   D. Close the connection
3. A request arrives without an Authorization header but the endpoint requires authentication. Which status code should the backend most appropriately return?
   A. 200 OK
   B. 400 Bad Request
   C. 401 Unauthorized
   D. 500 Internal Server Error
4. Which Content-Type header should the client set when sending JSON in the request body?
   A. text/plain
   B. application/json
   C. multipart/form-data
   D. application/x-www-form-urlencoded
5. Your responses table declares `id` as a primary key. Two incoming inserts accidentally use the same id value. What is the typical outcome?
   A. The database accepts both rows and duplicates the id
   B. The database rejects the second insert or raises a constraint error
   C. The database silently renames the second id to keep it unique
   D. The backend will always overwrite the first row automatically
6. During development you switch `javaURI` from `http://localhost:8085` to your production API by mistake and run tests. What's the primary risk?
   A. Tests will run faster and use fewer resources
   B. You might modify or overwrite real production data and leak test input
   C. Local files will be deleted on your machine
   D. The browser will block all requests automatically
</ol>
</form>

Next Lesson →

✓ Lesson 1 completed!