Day 29 of #100DaysOfCode — Connecting Backend to Frontend

For today, Day 29, I built the frontend UI of the Library Management System using React and TailwindCSS , and connected it to the backend I built yesterday. Here’s the complete breakdown of how the frontend communicates with the backend , how requests travel through middlewares, and how each UI action maps to backend logic. 🔗 Yesterday’s backend article: Day 28 — Building a Library API Enabling Backend ↔ Frontend Communication With CORS To make the frontend talk with the backend, we need to install cors and mention it in the app.js First, install cors: npm install cors Then, mention it in the app.js : // app.js import cors from " cors " ; app . use ( cors ()); // add this before your routes This ensures the browser doesn’t block API requests. 1. Fetch the request — fetchApi Every single request goes through this one function in the frontend: // App.jsx const fetchAPI = async ( path , options = {}, token = "" ) => { const headers = { " Content-Type " : " application/json " }; if ( token