AlgoFlow - Visual Algorand Smart Contract & Transaction Builder

A visual, node-based development environment for building and deploying Algorand smart contracts and transactions without writing code.

Overview

AlgoFlow is a powerful visual programming platform that enables developers to create Algorand blockchain applications using an intuitive drag-and-drop interface. Build smart contracts, compose transactions, and deploy to the Algorand network - all through a visual flow builder.

Key Features

Visual Flow Builder: Drag-and-drop interface for building Algorand applications
Smart Contract Builder: Create and deploy smart contracts visually
Transaction Composer: Build complex transaction flows without code
Live Code Generation: See JavaScript code generated in real-time
Wallet Integration: Connect with Algorand wallets (Pera, Defly, Exodus, Lute)
Built-in Terminal: Execute and test your flows directly in the browser
Dark/Light Mode: Comfortable development environment

Technology Stack

Frontend: Next.js 14 with App Router
UI Components: shadcn/ui with Tailwind CSS
Flow Editor: React Flow
Blockchain: Algorand SDK (algosdk)
Wallet Integration: Algorand wallets
Code Generation: Custom AST-based generator

Getting Started

Prerequisites

Node.js 18+ installed
npm, yarn, or pnpm package manager
An Algorand wallet (optional, for testing)

Installation

Clone this repository:

git clone https://github.com/yourusername/algoflow.git
cd algoflow

Install dependencies:
```
npm install
```
Run the development server:
```
npm run dev
```
Open http://localhost:3000 in your browser to see the result.

Project Structure

├── app/
│   ├── build/
│   │   ├── contracts/    # Smart contract builder
│   │   └── transactions/ # Transaction builder
│   ├── layout.tsx        # Root layout
│   └── page.tsx          # Home page
├── components/
│   ├── flow-builder.tsx  # Main flow editor
│   ├── node-sidebar.tsx  # Node palette
│   ├── wallet-panel.tsx  # Wallet interface
│   ├── terminalbuild.tsx # Execution terminal
│   └── ui/               # UI components
├── lib/
│   └── code-generator.ts # Code generation engine
└── public/               # Static assets

Quick Start

Create a Wallet: Click the wallet button to generate a new Algorand wallet
Build a Flow: Drag nodes from the sidebar onto the canvas
Connect Nodes: Link nodes together to create your logic flow
Deploy: Click "Deploy Contract" or "Run Flow" to execute
Export Code: Download the generated JavaScript code

For detailed instructions, see FULL_guide.md

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Documentation

Full Guide - Complete documentation
Algorand Docs

Algocraft Flow

Install / Use

README