Building the Frontend

With your backend API running, it's time to build the frontend that users actually interact with. This interface will call your API endpoints to create, display, update, and delete data — bringing your full stack application to life.

Planning the Interface

For a todo app, you need a few key components:

• An input field to type new todos
• A button to submit new todos
• A list displaying existing todos
• Controls on each todo (checkbox for complete, button for delete)
• Feedback for loading states and errors

Sketch this out mentally or on paper before prompting AI. Knowing what you want helps you write better prompts and evaluate the results.

Connecting to Your API

Your frontend uses fetch() to communicate with the backend. Each user action triggers an API call:

• Page loads → GET /todos to fetch existing items
• User adds todo → POST /todos with the text
• User checks complete → PUT /todos/:id with updated status
• User clicks delete → DELETE /todos/:id

After each successful API call, update the display to reflect the change. This keeps the UI in sync with the database.

Handling All States

A robust frontend handles three states for each operation:

Loading — show a spinner or disable buttons while waiting for the API response. This prevents duplicate submissions and tells users something is happening.

Success — update the display with new data. Clear input fields, add items to lists, remove deleted items.

Error — display a helpful message when things fail. "Could not save todo. Please try again." is better than silently failing or showing a cryptic error.

Prompting AI for the Frontend

Be specific about your API's location and expected behavior:

"Create a frontend for my todo app. The API runs at http://localhost:5000. Include: an input and button to add todos (POST /todos with {text}), a list showing all todos from GET /todos, a checkbox on each todo that calls PUT /todos/:id with {completed: true/false}, a delete button that calls DELETE /todos/:id. Show loading states and error messages. Use vanilla HTML/CSS/JS with a clean, modern design."

Testing the Connection

With both frontend and backend running locally, test every feature. Add a todo — does it appear in the list? Refresh the page — is it still there? Mark it complete — does the checkbox state persist? Delete it — does it disappear?

Check your browser's Network tab to see API calls. Verify requests go to the right endpoints with correct data, and responses contain what you expect.

See More

• Fetching Data From an API
• Adding Interactivity With JavaScript
• Browser Developer Tools
• Request and Response Lifecycles

Further Reading

• Using Fetch
• Async JavaScript