What you will be building, see our for the finished work and our . git repo live demo Introduction Welcome to our comprehensive guide on "Building a Web3 Events Marketplace with Next.js, TypeScript, and Solidity". In this tutorial, we'll construct a decentralized Events Marketplace that harnesses the power of blockchain technology. You'll gain a clear understanding of the following: Building dynamic interfaces with Next.js Crafting Ethereum smart contracts with Solidity Incorporating static type checking using TypeScript Deploying and interacting with your smart contracts Understanding the fundamentals of blockchain-based Events Marketplaces By the end of this guide, you'll have a functioning decentralized platform where users can list and participate in events, with all transactions managed and secured by Ethereum smart contracts. As an added incentive for participating in this tutorial, we're giving away a copy of our prestigious book on becoming an in-demand Solidity developer. This offer is free for the first 300 participants. For instructions on how to claim your copy, please watch the short video below. Prerequisites You will need the following tools installed to build along with me: Node.js Yarn Git Bash MetaMask Next.js Solidity Redux Toolkit Tailwind CSS To set up MetaMask for this tutorial, please watch the instructional video below: https://youtu.be/qV1mbFOtkxo?embedable=true Once you have successfully completed the setup, you are eligible to receive a free copy of our book. To claim your book, . please fill out the form to submit your proof-of-work Watch the following to receive up to 3-months of free premium courses on Dapp Mentors Academy, including: instructional videos Fullstack NFT Minting Course Fullstack NFT Marketplace Course Fullstack Blockchain Course etc. Join the Bitfinity ecosystem and be a part of the next generation of dApps. Apply your Bitfinity knowledge to create a Blockchain-based House Rental dApp in the final module. Deploy your smart contracts to the Bitfinity network and revolutionize the rental industry With that said, let’s jump into the tutorial and set up our project. Setup We'll start by cloning a prepared frontend repository and setting up the environment variables. Run the following commands: git clone https://github.com/Daltonic/dappEventX
cd dappEventX
yarn install
git checkout 01_no_redux Next, create a file at the root of the project and include the following keys: .env NEXT_PUBLIC_RPC_URL=http://127.0.0.1:8545
NEXT_PUBLIC_ALCHEMY_ID=<YOUR_ALCHEMY_PROJECT_ID>
NEXT_PUBLIC_PROJECT_ID=<WALLET_CONNECT_PROJECT_ID>
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=somereallysecretsecret Replace and with your respective project IDs. <YOUR_ALCHEMY_PROJECT_ID> <WALLET_CONNECT_PROJECT_ID> : : YOUR_ALCHEMY_PROJECT_ID Get Key Here WALLET_CONNECT_PROJECT_ID Get Key Here Finally, run to start the project. yarn dev Our user interface is prepared to incorporate smart contracts, however, we still need to integrate Redux in order to facilitate the sharing of data. Building the Redux Store The above image represents the structure of our Redux store, it will be simple since we are not creating some overly complex project. We'll set up Redux to manage our application's global state. Follow these steps: Create a folder at the project root. store Inside , create two folders: and . store actions states Inside , create a file. states globalStates.ts https://gist.github.com/Daltonic/b8fbcc4d0594d807c8da8c05455e9280?embedable=true Inside , create a file. actions globalActions.ts https://gist.github.com/Daltonic/a0180bc1ca72eff8b3bd93106b2ce47f?embedable=true Create a file inside the folder. globalSlices.ts store https://gist.github.com/Daltonic/31834ef324af3ead415c0cebcf1a5c7e?embedable=true Create an file inside the folder. index.ts store https://gist.github.com/Daltonic/4e91a72da751a7122b10722e2a2282c3?embedable=true Update the file with the Redux provider. pages/_app.tsx https://gist.github.com/Daltonic/55aa1f2995b360b42752a7c2624011de?embedable=true We have implemented Redux toolkit in our application and plan to revisit its usage when integrating the backend with the frontend. Smart Contract Development Next, we'll develop the smart contract for our platform: Create a folder at the project root. contracts Inside , create a file and add the contract code below. contracts DappEventX.sol https://gist.github.com/Daltonic/f66b58a3f938d4d7b41da56c3c2d22be?embedable=true The above smart contract is designed to manage an Events Marketplace on the blockchain. It allows users to create, update, and delete events, buy tickets for events, and handle payouts. Here's a detailed breakdown of its functions: This function initializes the contract, sets the service fee percentage, and assigns initial token parameters. Constructor ( constructor(uint256 _pct) ERC721('Event X', 'EVX') ): This function allows a user to create a new event. It requires the title, description, image URL, capacity, ticket cost, and start and end times. It validates all input data and creates a new event structure, which is stored in the events mapping. createEvent Function: This function allows a user to update an existing event. It requires the same parameters as the createEvent function. It checks that the event exists and that the caller is the owner of the event before updating the event data. updateEvent Function: This function allows the owner of an event to delete it. It checks that the event exists, that the caller is the owner of the event or the contract owner, and that the event has not been paid out or refunded. It then refunds all tickets for the event and marks the event as deleted. deleteEvent Function: This function returns all existing events. It creates an array of the right size, then fills it with all events that have not been deleted. getEvents Function: This function returns all events owned by the caller. It creates an array of the right size, then fills it with all events owned by the caller that have not been deleted. getMyEvents Function: This function returns a specific event. It simply returns the event structure from the events mapping. getSingleEvent Function: This function allows a user to buy tickets for an event. It checks that the event exists, that the sent value is at least the total cost of the tickets, and that there are enough seats available. It then creates new ticket structures for each ticket and adds them to the tickets mapping. buyTickets Function: This function returns all tickets for a specific event. It simply returns the array of ticket structures from the tickets mapping. getTickets Function: This internal function refunds all tickets for a specific event. It marks each ticket as refunded, sends the ticket cost back to the ticket owner, and decreases the contract balance. refundTickets Function: This function handles payout distribution at the end of an event. It checks that the event exists, has not already been paid out, and is no longer ongoing. It then mints tickets for the event, calculates the revenue and fee, and sends the revenue minus the fee to the event owner and the fee to the contract owner. It marks the event as paid out and decreases the contract balance. payout Function: This internal function mints tickets for a specific event. It marks each ticket and the event as minted, and mints a new ERC721 token for each ticket. mintTickets Function: This internal function sends funds to a specified address. It uses the low-level call function to send the funds and checks that the call was successful. payTo Function: This internal function returns the current timestamp. It uses the block.timestamp global variable, multiplies it by 1000, and adds 1000. currentTime Function: Contract Deployment and Seeding Now, let's deploy our smart contract and populate it with some dummy data: Create a folder at the project root. scripts Inside , create a and a file and add the following codes. scripts deploy.js seed.js Deploy Script https://gist.github.com/Daltonic/021ee2f4d05f4f7c1e80452e6fdd263f?embedable=true Seed https://gist.github.com/Daltonic/118946bc263220b15162d36837de2758?embedable=true Run the following commands to deploy the contract and seed it with data: yarn hardhat node # Run in terminal 1 yarn hardhat run scripts/deploy.js # Run in terminal 2 yarn hardhat run scripts/seed.js # Run in terminal 2 If you did that correctly, you should see a similar output like the one below: At this point we can start the integration of our smart contract to our frontend. https://www.youtube.com/watch?v=JePa-DzZsJA&embedable=true Frontend Integration First, create a folder at the project root, and inside it, create a file. This file will contain functions to interact with our smart contract. services blockchain.tsx https://gist.github.com/Daltonic/4a6faf80873bc01162436ca6b8ddf703?embedable=true The above code is a service that interacts with a Events Marketplace contract. The service interacts with a smart contract deployed on the Ethereum blockchain using the ethers.js library. Here's a detailed breakdown of its functions: This function sets up a connection to the Ethereum blockchain and the smart contract. It uses the ethers library to create a provider (to interact with the Ethereum blockchain) and a signer (to sign transactions). Then, it creates a contract instance that can be used to interact with the smart contract. getEthereumContracts Function: This function creates a new event by calling the createEvent function of the contract. createEvent Function: This function updates an existing event by calling the updateEvent function of the contract. updateEvent Function: This function deletes an event by calling the deleteEvent function of the contract. deleteEvent Function: This function handles payout distribution at the end of an event. payout Function: This function allows a user to buy tickets for an event. buyTicket Function: These functions retrieve information about all events or the events owned by the caller. They call the corresponding functions in the contract and structure the returned data. getEvents and getMyEvents Functions: This function retrieves information about a specific event. It calls the corresponding function in the contract and structures the returned data. getEvent Function: This function retrieves information about the tickets for a specific event. It calls the corresponding function in the contract and structures the returned data. getTickets Function: These functions structure the data returned from the contract into a more manageable format. They convert the data types from the contract's format to JavaScript's format and sort the data. structuredEvent and structuredTicket Functions: Next, update the file inside to include the network using the following codes. provider.tsx services bitfinity https://gist.github.com/Daltonic/94b744897ef0914a11aa9fa7e74c6b99?embedable=true Page Interacting with Smart Contract Next, we'll link the functions in the blockchain service to their respective interfaces in the frontend: Update to get data from the function. No 1:  Displaying Available Events pages/index.tsx getEvents() https://gist.github.com/Daltonic/c7c6be46e11cbf145cdc86dbbced70bb?embedable=true Take a moment and observe how we implemented the load more button, I bet you’ll find it useful. Update to get data from the function. No 2:  Displaying User’s Events pages/events/personal.tsx getMyEvents() https://gist.github.com/Daltonic/363e75afca92a660ec3992c271d56c92?embedable=true Update to use the function for form submission.. No 3:  Creating New Event pages/events/create.tsx createEvent() https://gist.github.com/Daltonic/4cc8440375151be40f6526b23445de1a?embedable=true Update to get data from the and functions. No 4:  Displaying Single Event pages/events/[id].tsx getEvent() getTickets() https://gist.github.com/Daltonic/7e00b943e92bf6bdf07893891db89de5?embedable=true Change to retrieve data from the and update by calling . No 5:  Editing a Single Event pages/events/edit/[id].tsx getEvent() updateEvent() https://gist.github.com/Daltonic/9c3897daf46d0ad92b67d7607cc6ef3b?embedable=true Update to retrieve data from the function. No 6:  Displaying Event Tickets pages/events/tickets/[id].tsx getTickets() https://gist.github.com/Daltonic/ad1f5468ac8ae44d44279e83e82abcc5?embedable=true Components with Smart Contract Let's apply the same approach we used for the previous pages and update the following components to interact with the smart contract. Update file to use the function to call the function. No 1: Purchasing Ticket components/BuyTicket.tsx handleSubmit() buyTicket() https://gist.github.com/Daltonic/7ef4354e4bfbfde36a5e04e40c85e083?embedable=true Lastly, update file to use the and functions. No 2: Deleting and Paying out Events components/EventAction.tsx deleteEvent() payout() https://gist.github.com/Daltonic/885854d5d5b71a2d7434fd738fea3eed?embedable=true It should be noted that this component is a dropdown and contains the relevant actions for managing a specific event. All the components and pages of the project have been successfully connected to the smart contract, indicating the completion of the project after implementing these updates. If your Next.js server was offline, you can bring it back up by executing the command . yarn dev For further learning, we recommends subscribing to our and . YouTube channel visiting our website for additional resources https://www.youtube.com/watch?v=Ubom39y5jX8&embedable=true Conclusion In this tutorial, we have successfully built a Web3 Events Marketplace using Next.js, TypeScript, and Solidity. We've established the development environment, constructed the Redux store, and deployed our smart contract to our local chain. We've created dynamic interfaces, crafted Ethereum smart contracts, and managed shared data with Redux. By integrating the smart contract with the frontend, we've enabled users to list and participate in events, with transactions managed and secured by Ethereum smart contracts. Now, you're equipped with the skills to build your own Web3 Events Marketplace. We've also provided you with a live demo and the finished work in our git repo for reference. Happy coding! About Author I am a web3 developer and the founder of , a company that helps businesses and individuals build and launch decentralized applications. I have over 7 years of experience in the software industry, and I am passionate about using blockchain technology to create new and innovative applications. I run a where I share tutorials and tips on web3 development, and I regularly post articles online about the latest trends in the blockchain space. Dapp Mentors YouTube channel called Dapp Mentors Discord: X-Twitter: LinkedIn: GitHub: Website: Stay connected with us, join communities on Join Follow Connect Explore Visit

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

Top Smart Contract Languages in 2024: Solidity, Rust, and Motoko

How to Build a Web3 Play-To-Earn Platform with Next.js, Typescript, and Solidity

How to Create a Web3 Events Marketplace with Next.js, Typescript, and Solidity

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Build a Web3 Movie Streaming dApp using NextJs, Tailwind, and Sia Renterd

0x (ZRX) Analysis : Decentralised Exchange Protocol On Ethereum

The Noonification: Is Automation Dehumanizing Marketing? (1/16/2024)

119 Stories To Learn About Dapps

(3/100) Crypto Countdown: Status

Build a Web3 Movie Streaming dApp using NextJs, Tailwind, and Sia Renterd

0x (ZRX) Analysis : Decentralised Exchange Protocol On Ethereum

The Noonification: Is Automation Dehumanizing Marketing? (1/16/2024)

119 Stories To Learn About Dapps

(3/100) Crypto Countdown: Status

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps