From Errors to Understanding: A Chronicle with the Alien Friend

This wasn’t just a project.
It was a dialogue — between me, the Alien Friend (JavaScript), the Messenger Between Worlds (API), and the Gatekeeper (JWT).

It wasn’t just about writing code.

It was about learning how to speak their language, of requests and tokens, of silence and errors, of debugging and trust.

At first I will ask for something but it would scream errors or worse respond with silence. I didn’t build the backend myself , but I worked with it closely, and I listened. It helped me understand how to connect frontend logic with protected routes, handle JWT and debug API response.

Project Goal

Build a basic authentication and post management system with role-based access control. That supports three users

Super Admin: can add admin and manage posts

Admin: can create/edit/delete post

User/Viewer: can only view post

The Admin Dashboard

User Dashboard

Key Features

User Registration and Login

Role-based Access Control

Post Creation, Update, and Deletion

Token-based Authentication (JWT)

Logout and Session Clearing

Testing with the Messenger(API + Postman)

Before I Could Code, I Had to Listen

Before I could speak to the Gatekeeper, I had to learn how to talk to the Messenger Between the Worlds — the API.

The API doesn’t use words — it uses POST, GET, PUT, and DELETE. It doesn’t shout. It just responds with numbers:

• 200 OK: the door opens

• 401 Unauthorized: You forgot your key or didn’t bring ID

• 500 Server Error: Something broke from the inside

  Before writing code on the frontend, I used Postman to test each endpoint and that saved me hours of debugging.

Using Postman it helped me learn:

• How to test login and registration using POST requests correctly

• How to pass headers, body, and params correctly

• Read responses like a second language

Meeting the Gatekeeper - Understanding JWT Authentication

The Gatekeeper doesn’t open doors without proof.

• When a user logs in, the backend hand over a token (JWT) - proof of identity

• I store the token in the localStorage

• For protected routes (like adding posts), I attach it to the request header: Authorization:Bearer ${token}

Without it? The API (Messenger) asks “Who are you again?”

No proof = no access. Simple. Secure. Game-changing.

Seeing the Loop How Data Flows Between Frontend and Backend

The biggest mindset shift

I started to see a cycle not just code

A request goes out, the backend responds, the frontend reacts.

From login to logout, from post creation to deletion.

When the Alien Friend (JavaScript) Spoke Back

Every bug was a message I had to decode

Bug 1: The Mysterious Page Refresh

When the Code Doesn’t Trust You Yet

The logic seems sound. But the browser stares back at you - blank, silent.

As if saying, “I don’t trust your confidence just yet.”

After registration, my page kept refreshing — even with e.preventDefault().

What I tried:

setTimeout(() => {

window.location.href = "login.html";

}, 1000);

What worked:

window.location.href = "login.html";

I didn’t need a delay. I needed clarity

Bug 2: “Invalid User” “After Login ”

Issue: The backend kept saying "Invalid User" after login.

No role → No access → Everything broke.

**What happened:
**It couldn’t find the user’s role after login, so no role-based logic worked.

**What I thought it was:
**Maybe the front end wasn’t reading the role correctly. When I use condition to checked whether Admin or Viewer, Invalid User

**What I tried that didn’t work:
**I checked data.role

data.user.role.toUpperCase() Still undefined.

What fixed it:

The backend wasn’t sending the user.role in the response.

Once added, the role-based logic started working.**

Bug 3:Token Not Recognized**

Issue: I was using data.token in my code.

But the backend actually sent: data.accessToken
The Alien Friend was following my exact (wrong) instructions.

Bug 4: Edit Post Failed with PATCH

The Messenger wanted a different dialect.

Issue: I used PATCH to update a post. The backend replied: 404 Not Found.

Fix: Changed the request to PUT, and it worked.

Sometimes it’s not what you say — it’s how you say it.

Bug 5: Delete Blocked by Ownership

I tried deleting a post created by another admin. The action failed

The backend checked if createdBy === adminId

**Lesson learned:
**Security is not just about roles — it's also about ownership and proper access checks.

Bug 6: Logout Failed

Logout wasn’t working.

I was sending only headers — but the backend needed the userId in the request body.

Fix:

fetch("/logout", {

method: "POST",

headers: { Authorization: Bearer ${token} },

body: JSON.stringify({userId: Number(userId)}),

});

What I Learned from the Alien Friend & The Messengers

• Talk to your API before writing frontend code. Postman is your interpreter.

• Don’t assume. Inspect responses. Read the docs.

• JWT = Gatekeeper. Protect it. Pass it right.

• Know your roles, Each role has different power — and different limits.

• The Alien Friend follows exactly what you say, even when you're wrong.

This project wasn’t just about building a blog. It was about breaking things, getting stuck, and fixing real-world problems.

Every error was a teacher. Every fix was a step forward.

It taught me how to think through bugs, test with intention, and understand how frontend and backend truly connect.

And this is what it means to build — not just projects, but understanding.