🚀 Updating the Frontend to Sync with the Backend

 If you haven’t read my previous post Upgrading the Todo Web App Backend: Adding User Login/Signup and Task Ownership, make sure to check it out first — it covers the essential backend changes that made this frontend update possible.

---

Now that the backend of our Todo Web App supports user authentication, signups, and task ownership, it’s time to bring the frontend up to speed. In this update, we focused on connecting the frontend to our upgraded backend and keeping things functional with a clean and minimal layout.

You may access the frontend with this url: https://optimistic-creativity-production-e88d.up.railway.app/

There is still 25 days to go before it expires as of July 15, 2025.

---

🔄 What We Did

Here’s a quick summary of what we implemented in the frontend:

• ✅ Login and Signup Integration:
  Users can now log in and sign up using credentials that get stored securely (locally, for now). Upon login, the username and role are used to authenticate API requests via HTTP Basic Auth.

• ✅ Role-based Display:
  We now show different labels depending on the user's role. If the logged-in user is an admin, the title updates to To Do List (Global) instead of My To Do List.

• ✅ Hello, [username] Greeting:
  A simple but effective greeting that confirms the user is recognized by the system.

• ✅ Logoff Button:
  Clears all local storage and sends the user back to the login screen — nice and clean.

• ✅ Task Fetching by User:
  Each user now only sees their own tasks unless they’re an admin (who sees all).

• ✅ Cleaner Layout:
  We redesigned the screen to simplify everything:

  • The heading + greeting + logoff button are placed at the top in a neat horizontal layout.

  • The task input and list area follow below.

---

💡 Design Note

This isn’t the final UI/UX — far from it! Our goal was to get things working first while keeping the layout clean and readable. No flashy styling yet. Just enough structure to allow users to:

• See their tasks

• Know they’re logged in

• Add, update, and delete todos securely

We’ll worry about beauty later. Right now, it’s all about functionality over form.