algorandfoundation / algokit-react-frontend-template Goto Github PK

This template provides a baseline React web app for developing integrating with any ARC32 compliant Algorand smart contracts.

To use it install AlgoKit and then either pass in -t react to algokit init or select the react template interactively during algokit init.

This is one of the official frontend templates used by AlgoKit to initialise an Algorand enabled React web app ready for integrating with your smart contracts. It's made by relying on a Copier templates.

This template supports the following features:

• 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.
• 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 pipeline using GitHub Actions (Vercel or Netlify for hosting)

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

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.