Build your first Dapp on Tezos (Dapp template, email and wallet connection) — 2023
The rise of blockchain technology has paved the way for exciting new possibilities in various industries, with decentralized applications (DApps) leading the way. Tezos, a third-generation blockchain platform, stands out by offering innovative features, self-amending governance, and secure smart contracts. If you’re a developer eager to create a DApp on the Tezos blockchain, you’ve come to the right place.
In this article, we will explore a React Ts DApp template that I have created for developers who want to build on the Tezos blockchain. This template provides a solid foundation for developing decentralized applications on Tezos, allowing developers to have wallet connection functionality with a Tezos wallet and a pre-made email with Magic and Beacon. We will delve into the features and advantages of this template, focusing on its ease of use and the flexibility it offers to developers. If you are passionate about DApp development and want to explore the possibilities offered by Tezos, this article is for you. Get ready to dive into a new world of decentralized development on Tezos with this innovative and powerful DApp template.
Throughout this tutorial, we’ll be using :
- Vite-js — for build reactive and fastest React-Typescript app
- Tailwind and Mantine ( the best ) for app style.
- Beacon and Magic for wallet/email connection.
You can see the final rendering here: https://tez-dapp-template.surge.sh/ (If you like it, let’s go, I’ll show you how to easily use it in this tutorial 😃)
Let us now learn about the steps involved in the creation of Tezos dApp.
Pre-requisites:
You already know how to build a React application. If not, some parts may be difficult to assimilate
Step 1 :
Setting up an environment and Running it before understanding 😄
Before trying to understand the project (or not), set the necessary configurations and make sure it’s already running on your local machine.
Clone project in your terminal
git clone https://github.com/specialOne-coder/tezos-dapp-template.git
Install project dependencies
npm install
Create .env file in root folder and add this two following line :
VITE_RPC_URL=https://rpc.tzkt.io/ghostnet
VITE_MAGIC=
VITE_MAGIC is magic Key after create magic dedicated wallet on magic.link
Be careful, all variables preceded by VITE_ in the environment file are public, so I recommend you to use process.env when you go into production.
Run the project
npm run dev
Visit the app now at http://localhost:5173
Step 2 :
Understand project architecture 🏛
Everything you need to know is in the src folder . This project use react context like state container.
assets : contains project assets,
components : contains project react components like navbar, footer, popup etc..
context : contains project dynamic functions, connect wallet, disconnect etc.. This part uses react’s context. This is where you need to implement your methods if you want to add interactions with another third party.
styles : contains the project’s styles, but not all of them, since most of the application’s styles come from Tailwind and Mantine.
utils : contains projects constants and utils methods .
All project routes can be found in the App.tsx.
Here’s all you need to know before start using this template.
Thanks for your reading, you can find the final code here : https://github.com/specialOne-coder/Tezos-Dapp-Template
Leave a comment if you have any questions or contact me on twitter : @0xferdinand. Remember, there are never dumb questions, only dumb answers.
