AlgoFi 🎨🎵

Table of Contents

1. Overview

2. Features

3. Tech Stack

   • Frontend
   • Backend
   • Smart Contract

4. Project Structure

5. Installation

   • Prerequisites
   • Backend Setup
   • Frontend Setup
   • Smart Contract Deployment

6. Usage

   • For Creators
   • For Collectors

7. API Endpoints

   • NFT Operations
   • Transaction Operations
   • Marketplace

8. Smart Contract Functions

9. Testing

10. Security Considerations

11. Troubleshooting

12. Future Enhancements

13. Resources

14. License

15. Contributing

16. Support

---

AlgoFi 🎨🎵

A decentralized NFT marketplace on the Algorand testnet where creators can mint, showcase, and distribute a wide range of NFTs including art, music, and standard digital collectibles.

Features

• Multi-Type NFT Support: Mint art NFTs, music NFTs, and standard digital collectibles
• Purchasable & Non-Purchasable NFTs: Support for both tradeable assets and free collectibles
• Integrated Marketplace: Browse, buy, and sell NFTs seamlessly
• Portfolio Management: View and manage your NFT collection
• Secure Wallet Integration: Connect using Pera Wallet
• Low Fees: Built on Algorand with minimal transaction costs (~0.001 ALGO)
• Fast Transactions: 4.5-second finality

Tech Stack

Frontend

• React 18
• Tailwind CSS
• React Router
• Axios
• Pera Wallet Connect
• Algorand SDK

Backend

• Node.js
• Express.js
• Algorand SDK
• CORS

Smart Contract

• PyTeal (Algorand Smart Contracts)
• Algorand TestNet

Project Structure

algomint/
├── backend/
│   ├── src/
│   │   ├── controllers/
│   │   │   └── nftController.js
│   │   ├── routes/
│   │   │   └── nftRoutes.js
│   │   └── services/
│   │       └── algorandService.js
│   ├── .env
│   ├── package.json
│   └── server.js
├── frontend/
│   ├── public/
│   │   └── index.html
│   ├── src/
│   │   ├── components/
│   │   │   ├── Header.js
│   │   │   ├── MintForm.js
│   │   │   └── NFTCard.js
│   │   ├── views/
│   │   │   ├── Home.js
│   │   │   ├── Marketplace.js
│   │   │   └── Portfolio.js
│   │   ├── App.js
│   │   ├── index.js
│   │   └── index.css
│   ├── .env
│   ├── package.json
│   └── tailwind.config.js
└── smart_contracts/
    └── algomint_contract.py

Installation

Prerequisites

• Node.js (v16 or higher)
• Python 3.7+ (for smart contract compilation)
• Algorand TestNet account
• Pera Wallet (mobile or browser extension)

Backend Setup

1. Navigate to the backend directory:

cd backend

2. Install dependencies:

npm install

3. Configure environment variables:

cp .env.example .env

Edit .env file:

PORT=5000
ALGOD_SERVER=https://testnet-api.algonode.cloud
APP_ID=YOUR_APP_ID_AFTER_DEPLOYMENT
PLATFORM_WALLET=YOUR_PLATFORM_WALLET_ADDRESS
PLATFORM_FEE=5

4. Start the backend server:

npm run dev

Frontend Setup

1. Navigate to the frontend directory:

cd frontend

2. Install dependencies:

npm install

3. Install Tailwind CSS:

npx tailwindcss init -p

4. Configure environment variables:

cp .env.example .env

Edit .env file:

REACT_APP_API_URL=http://localhost:5000/api
REACT_APP_ALGOD_SERVER=https://testnet-api.algonode.cloud
REACT_APP_APP_ID=YOUR_APP_ID_AFTER_DEPLOYMENT
REACT_APP_NETWORK=testnet

5. Start the development server:

npm start

The application will open at http://localhost:3000

Smart Contract Deployment

1. Install PyTeal:

pip install pyteal

2. Navigate to the smart contracts directory:

cd smart_contracts

3. Compile the contract:

python algomint_contract.py

This generates approval.teal and clear.teal files.

4. Deploy to Algorand TestNet using the Algorand SDK or goal CLI:

# Example using goal
goal app create --creator YOUR_ADDRESS \
  --approval-prog approval.teal \
  --clear-prog clear.teal \
  --global-byteslices 1 \
  --global-ints 3 \
  --local-byteslices 5 \
  --local-ints 2

5. Update APP_ID in both backend and frontend .env files with the deployed application ID.

Usage

For Creators

1. Connect Wallet: Click "Connect Wallet" and select Pera Wallet
2. Mint NFT:
   • Go to Home page
   • Fill in the mint form
   • Upload your file (image, audio, etc.)
   • Choose NFT type (Art, Music, or Standard)
   • Set as purchasable or non-purchasable
   • If purchasable, set your price
   • Click "Mint NFT" and sign the transaction
3. Manage Portfolio: Visit the Portfolio page to view your created NFTs

For Collectors

1. Connect Wallet: Connect your Pera Wallet
2. Browse Marketplace: Explore available NFTs
3. Filter & Search: Use filters to find specific types of NFTs
4. Purchase NFT: Click "Buy Now" on any listed NFT and confirm the transaction
5. View Collection: Check your Portfolio to see owned NFTs

API Endpoints

NFT Operations

• POST /api/nfts/mint - Create mint transaction
• POST /api/nfts/list - Create list transaction
• POST /api/nfts/buy - Create buy transaction
• GET /api/nfts/details/:assetId - Get NFT details
• GET /api/nfts/account/:address - Get account NFTs

Transaction Operations

• POST /api/nfts/submit - Submit signed transaction
• POST /api/nfts/opt-in - Create opt-in transaction

Marketplace

• GET /api/nfts/marketplace - Get marketplace listings

Smart Contract Functions

• initialize - Initialize the marketplace contract
• mint_nft - Mint a new NFT
• list_nft - List NFT for sale
• buy_nft - Purchase an NFT
• update_price - Update listing price
• delist_nft - Remove NFT from marketplace

Testing

Get TestNet ALGO

Visit the Algorand TestNet Dispenser to fund your wallet with test ALGO.

Test the Application

1. Mint a test NFT
2. List it on the marketplace
3. Use a second wallet to purchase it
4. Verify transactions on Algorand TestNet Explorer

Security Considerations

• Never commit .env files to version control
• Use strong wallet passwords
• Verify all transactions before signing
• This is a testnet application - do not use mainnet credentials
• Platform fees are set to 2.5% (250 basis points)

Troubleshooting

Wallet Connection Issues

• Ensure Pera Wallet extension is installed
• Check that you're on the TestNet network
• Clear browser cache and reconnect

Transaction Failures

• Verify you have sufficient ALGO for fees
• Check that APP_ID is correctly configured
• Ensure wallet is opted into the application

Backend Connection Issues

• Verify backend server is running on port 5000
• Check CORS configuration
• Ensure API_URL in frontend .env matches backend URL

Future Enhancements

• IPFS integration for decentralized file storage
• Royalty system for secondary sales
• Auction functionality
• Collection creation
• Social features (likes, comments, follows)
• Mobile app using React Native
• Mainnet deployment

Resources

• Algorand Documentation
• PyTeal Documentation
• Pera Wallet
• Algorand TestNet Explorer
• Algorand TestNet Dispenser

License

MIT License

Contributing

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

Support

For issues and questions, please open an issue on the GitHub repository.

---

Built with ❤️ on Algorand