Connecting the Frontend to the Backend: Proposal Voting App Demo

In the previous video, we successfully completed our smart contract. Now, we're transitioning to the frontend portion of the project. However, instead of building the frontend from scratch, this lesson focuses on integrating the existing frontend with our backend smart contract.

Overview of the Integration

Our goal is to understand how to connect a smart contract backend to a prebuilt frontend interface. This is particularly useful for developers who may already have a frontend designed and simply want to add blockchain capabilities.

Demonstrating Existing Functionality

To begin, let's walk through the current state of the application. I've already created a few proposals:

• First Proposal
• Second Proposal
• Third Proposal

Now, let’s add a new one.

Creating a New Proposal

To demonstrate the functionality:

• I entered the title “Fourth Proposal”.
• Clicked the "Send Proposal" button.
• The new proposal was successfully added to the list.

We now see four proposals, with the newly added one displayed along with the others.

Editing a Proposal

Let’s say we want to improve the name of the fourth proposal. I edited it to “Proposal X”. Upon refreshing the page, the updated name is immediately visible, demonstrating that changes are being saved and retrieved accurately from the backend.

Voting on Proposals

Users can vote on active proposals. However, there's an important restriction in place: a user can only vote once per proposal. When I attempt to vote a second time on the same proposal, the system prevents it—just as intended.

Ending a Proposal

Proposals can also be marked as inactive. By clicking the “End Proposal” button, a proposal is deactivated and no longer accepts votes. This ensures control over the lifecycle of each voting instance.

Summary of Frontend Features

Although the interface is basic, it effectively demonstrates the core features of our smart contract:

• Creating new proposals
• Editing proposals (title and active status)
• Voting functionality (with restrictions)
• Ending proposals (disabling further interaction)

This frontend allows us to verify and visualize how our backend operates in a real application.

Next Step: Exploring the Code

Now that we've reviewed the interface and key interactions, the next step is to dive into the code. We’ll explore how these features are implemented and how the frontend communicates with the backend smart contract using asynchronous calls and data structures.