Introduction
Welcome to Part 2 of our tutorial series on building a tokenized farmer’s market on the Celo blockchain! In this article, we will focus on creating the frontend for our smart contract using Next.js and adding styling to make it visually appealing.
Requirement
It’s necessary to have completed the Part 1 of this tutorial.
Prerequisites
Before getting started, make sure you have completed Part 1 of the tutorial series, where we covered the smart contract implementation and deployment. Additionally, you should have Node.js and a code editor installed on your machine.
Setting up the Next.js Project
To begin, let’s set up a Next.js project for our frontend. Follow the steps below:
Step 1: Create a new Next.js project
Open your terminal and navigate to the desired directory where you want to create your project. Run the following command to create a new Next.js project:
npx create-next-app farmers-market
This command sets up a basic Next.js project structure for us.
Step 2: Navigate into the project directory
Navigate into the newly created project directory by running the following command:
cd farmers-market
Step 3: Start the Next.js development server
To verify that the project was set up correctly, start the Next.js development server by running the following command:
npm run dev
You should now be able to access http://localhost:3000 in your browser and see the default Next.js landing page.
Creating the ProductList Component
Now that our project is set up, let’s create a component called ProductList that will display the list of products from our smart contract.
Step 1: Create the ProductList component file
Inside the pages directory, create a new file called index.js. This file will serve as the entry point for our application.
Step 2: Implement the ProductList component
Replace the contents of pages/index.js with the following code:
import React from 'react';
const ProductList = ({ products }) => {
return (
<div>
<h1>Farmers Market</h1>
<h2>Product List</h2>
<table>
<thead>
<tr>
<th>ID</th>
<th>Seller</th>
<th>Name</th>
<th>Price</th>
<th>Quantity</th>
<th>Sold</th>
</tr>
</thead>
<tbody>
{products.map((product) => (
<tr key={product.id}>
<td>{product.id}</td>
<td>{product.seller}</td>
<td>{product.name}</td>
<td>{product.price}</td>
<td>{product.quantity}</td>
<td>{product.sold ? 'Yes' : 'No'}</td>
</tr>
))}
</tbody>
</table>
</div>
);
};
export default ProductList;
In this code, we have defined a functional component called ProductList that receives the products prop as an array of product objects. It renders a table with columns for the product details such as ID, seller, name, price, quantity, and sold status.
Updating the Home Page
With the ProductList component ready, let’s update the home page to display the list of products.
Step 1: Open the index.js file
Open the pages/index.js file.
Step 2: Update the HomePage component
Replace the existing code in pages/index.js with the following:
import React, { useEffect, useState } from 'react';
import ProductList from '../components/ProductList';
const HomePage = () => {
const [products, setProducts] = useState([]);
useEffect(() => {
// Fetch products from the smart contract or mock data
const fetchedProducts = [
{ id: 1, seller: '0x123...', name: 'Product 1', price: 100, quantity: 5, sold: false },
{ id: 2, seller: '0x456...', name: 'Product 2', price: 200, quantity: 10, sold: false },
// Add more products if needed
];
setProducts(fetchedProducts);
}, []);
return (
<div>
<ProductList products={products} />
</div>
);
};
export default HomePage;
In this code, we have created a functional component called HomePage that fetches the list of products and passes it as a prop to the ProductList component. Currently, we are using mock data, but in a real-world scenario, you would fetch the data from your smart contract.
Conclusion
Congratulations! You have successfully built the frontend for your tokenized farmer’s market on the Celo blockchain using Next.js. In this article, we learned how to set up a Next.js project, create a component to display the product list and apply styling to make the frontend visually appealing.
In the next part of this tutorial series, we will dive into integrating the frontend with the Celo blockchain by connecting to the smart contract using a library like Web3.js or ethers.js. Stay tuned for Part 3, where we will enable users to interact with the smart contract and make purchases.
Stay connected and happy coding!
About Us
Joel Obafemi
A marketer, copywriter, and collab manager for web3 brands. You can connect with me on LinkedIn.
