---

This full-stack template provides both a baseline React web app and a production-ready baseline for developing and deploying Algorand Python, Algorand TypeScript, TealScript smart contracts. It's suitable for developing and integrating with any ARC32 compliant Algorand smart contracts.

To use this template, install AlgoKit and then either pass in -t fullstack to algokit init or select the relevant template interactively during algokit init.

This is one of the official templates used by AlgoKit to initialize both a frontend React web app and Algorand smart contract project. It's created based on the Copier templates.

Features

This template supports a multitude of features for developing full-stack applications using official AlgoKit templates. Using the full-stack template, currently allows you to create a workspace that combines the following frontend template:

• algokit-react-frontend-template - A React web app with TypeScript, Tailwind CSS, and all Algorand specific integrations pre configured and ready for you to build.

And the following backend templates:

• algokit-python-template - An official starter for developing and deploying Algorand Python smart contracts.
• algokit-typescript-template - An official starter for developing and deploying Algorand TypeScript smart contracts.
• algokit-tealscript-template - An official starter for developing and deploying TealScript smart contracts.

The examples directory contains pre initialized examples. These are used for our snapshot tests, however can also be used as example projects:

• p-py is a production fullstack template with Algorand Python smart contract.
• p-ts is a production fullstack template with Algorand TypeScript smart contract.
• p-tls is a production fullstack template with TEALScript smart contract.
• s-py is a starter fullstack template with Algorand Python smart contract.
• s-ts is a starter fullstack template with Algorand TypeScript smart contract.
• s-tls is a starter fullstack template with TEALScript smart contract.

Frontend

• React web app with Tailwind CSS and TypeScript
• Styled framework agnostic CSS components using DaisyUI.
• Starter Jest unit tests for TypeScript functions. Can be disabled if not needed.
• Starter playwright tests for end-to-end testing. Can be disabled if not needed.
• Integration with use-wallet for connecting to Algorand wallets such as Pera, Defly, and Exodus.
• Example of performing a transaction with HelloWorld smart contract.
• dotenv support for environment variables, as well as a local-only KMD provider that can be used for connecting the frontend component to an algokit localnet instance (Docker required).
• CI/CD pipelines using GitHub Actions to deploy to Vercel or Netlify

Refer to the official algokit-react-frontend-template repository for up-to-date information on the frontend template.

Backend

• Compilation of multiple python, typescript, tealscript contracts to a predictable folder location and file layout where they can be deployed.
• Deploy-time immutability and permanence control.
• Poetry for Python dependency management and virtual environment management.
• Linting via Ruff or Flake8.
• Formatting via Black.
• Type checking via mypy.
• Testing via pytest (not yet used).
• Dependency vulnerability scanning via pip-audit (not yet used).
• VS Code configuration (linting, formatting, breakpoint debugging).
• dotenv (.env) file for configuration.
• Automated testing of the compiled smart contracts.
• CI/CD pipeline using GitHub Actions.

Refer to the respective backend repository mentioned in features for up-to-date information.

Getting started

Once the template is instantiated you can follow the README.md file to see instructions for how to use the template.

Interactive Wizard

To initialize using the algokit CLI:

• Execute the command algokit init. This initiates an interactive wizard that assists in selecting the most appropriate template for your project requirements.

To initialize within GitHub Codespaces:

• Follow these steps to leverage GitHub Codespaces for template selection:

  1. Go to the algokit-base-template repository.
  2. Initiate a new codespace by selecting the Create codespace on main option. This can be found by clicking the Code button, then navigating to the Codespaces tab.
  3. Upon codespace preparation, algokit will automatically start LocalNet and present a prompt with the next steps. Executing algokit init will initiate the interactive wizard.