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.
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.
To begin, let's walk through the current state of the application. I've already created a few proposals:
Now, let’s add a new one.
To demonstrate the functionality:
We now see four proposals, with the newly added one displayed along with the others.
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.
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.
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.
Although the interface is basic, it effectively demonstrates the core features of our smart contract:
This frontend allows us to verify and visualize how our backend operates in a real application.
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.
Swap insights and ask questions about “Build on Internet Computer with ICP Rust CDK”.