Creator Algorand Foundation
A comprehensive fullstack template combining a Python smart contract with a React frontend. This template demonstrates how to build and integrate a simple counter smart contract with a modern React user interface. Perfect for developers looking to understand the full development cycle of a decentralized application on Algorand.
This starter full stack project has been generated using AlgoKit. See below for default getting started instructions.
AlgoKit
following this guide.algokit project bootstrap all
in the project directory. This command sets up your environment by installing necessary dependencies, setting up a Python virtual environment, and preparing your .env
file.algokit generate env-file -a target_network localnet
from the dApp-basic-contracts
directory to create a .env.localnet
file with default configuration for localnet
.algokit project run build
. This compiles your project and prepares it for running.This project is structured as a monorepo, refer to the documentation to learn more about custom command orchestration via
algokit project run
.
algokit project bootstrap all
again.This project makes use of Python and React to build Algorand smart contracts and to provide a base project configuration to develop frontends for your Algorand dApps and interactions with smart contracts. The following tools are in use:
It has also been configured to have a productive dev experience out of the box in VS Code, see the backend .vscode and frontend .vscode folders for more details.
Refer to the dApp-basic-contracts folder for overview of working with smart contracts, projects/dApp-basic-frontend for overview of the React project and the projects/dApp-basic-frontend/contracts folder for README on adding new smart contracts from backend as application clients on your frontend. The templates provided in these folders will help you get started.
When you compile and generate smart contract artifacts, your frontend component will automatically generate typescript application clients from smart contract artifacts and move them to frontend/src/contracts
folder, see generate:app-clients
in package.json. Afterwards, you are free to import and use them in your frontend application.
The frontend starter also provides an example of interactions with your CounterClient in AppCalls.tsx
component by default.
You can take this project and customize it to build your own decentralized applications on Algorand. Make sure to understand how to use AlgoKit and how to write smart contracts for Algorand before you start.