Awesome

This full-stack template provides both a baseline React web app and a production-ready baseline for developing and deploying Algorand Python, TealScript and Beaker 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-tealscript-template - An official starter for developing and deploying TealScript smart contracts.
• algokit-beaker-default-template - A production-ready baseline for developing and deploying Beaker smart contracts.

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, tealscript, beaker 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.
• Output stability tests of the TEAL output. Artifacts folder is also available as standalone examples for anyone curious to see default instances of preset projects.
• 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.