AlgoLearn

AlgoLearn is an interactive platform designed to help users learn and practice algorithms revolving around Algorand Smart Contracts. Built with modern web technologies, it provides an intuitive interface and multi-language support to enhance the learning experience.

🌐 Live Demo

The application is live and can be accessed here: https://algo-learn.com

🚀 Features

• Secure, multi-language code execution (core feature): Run Python, JavaScript (Node), and Go snippets against an isolated Docker-backed runner. Each submission spins up a fresh container preloaded with Algorand SDKs (py-algorand-sdk, algosdk, go-algorand-sdk), executes the code, captures stdout/stderr, and streams results back to the UI in real time, ensuring both safety and reproducibility.

• Fast, relevant search: Find chapters by title, content, or code snippets with real-time filtering.

• Algorand SDK–ready environment: Built-in support for Algorand development across Python, JavaScript, and Go so learners can interact with contracts and examples immediately.

• Clean, accessible UI: Responsive, component-driven interface (Next.js + Tailwind + shadcn/ui) with sensible defaults and ARIA best practices.

• Modern React patterns: Lean state management via React hooks and Suspense for smooth async UX.

• Scalable Next.js foundation: Optimized routing, image/link components, and edge-friendly architecture for performance and future growth.

• Deployment-ready setup: Frontend on Vercel; Dockerized code-runner on a dedicated VM (PM2-managed) with clear environment configuration for local or cloud runs.

🛠️ Technologies Used

Category	Technologies/Tools
Frontend	React, Next.js (TypeScript), Tailwind CSS, Shadcn/UI, Lucide React, Axios, React Suspense, Next.js Image & Link components
Backend	Next.js API Routes (for some tasks), Express/Node.js server (in separate code-runner context), Docker (for ephemeral code execution), Python + py-algorand-sdk, Node.js + algosdk, Go + pinned go-algorand-sdk in a single Docker image
Containerization	Docker (Alpine-based image containing Python, Node, Go, plus pinned Algorand SDK dependencies)
Data Management	Static Data Files (@/data/chapters)
Development Tools	Node.js, npm, TypeScript, ESLint, Prettier
Version Control	GitHub
UI/UX Features	Responsive Design, Dark Mode Toggle, Accessibility (ARIA), Dropdown Menus
Icons	Lucide React Icons
Security	Docker-based code isolation for user snippets, external code execution environment with pinned Go modules, error handling & logging
Deployment	Vercel (for the Next.js frontend), GCP VM (e2-micro) hosting Docker-based code-runner backend
Additional Libraries	Axios for HTTP requests, React Suspense for async data, Shadcn/UI for component library, plus environment variables & secrets management

🛡️ How the Backend Code-Runner Works

1. User Submits Code: The user interface sends code (in Python, JavaScript, or Go) and the chosen language to the backend.
2. Node.js/Express Server: A dedicated server receives the snippet and orchestrates ephemeral Docker containers.
3. Docker Container: The snippet is mounted into a Docker container that already has Python, Node, Go, and the respective Algorand SDKs installed.
4. Code Execution: Docker runs the snippet (e.g., python3 script.py, node script.js, or go run main.go). The server captures output or errors.
5. Result Returned: Output is sent back to the frontend in real time.

This approach ensures isolation (each snippet runs in a fresh environment) and includes Algorand SDK capabilities in all three languages for advanced contract interactions.

🛡️ Installation and Setup

Follow these steps to set up the project locally:

1. Clone the Repository:

   git clone https://github.com/mibernard/algolearn.git
   cd algolearn

2. Install Dependencies:

   npm install

3. Run the Application:

   npm run dev

   By default, this starts the Next.js frontend on http://localhost:3000.

4. Configure the Backend (Optional Advanced):

   • If you’re also running the Docker-based code-runner backend locally, you need:
     1. Docker installed.
     2. A suitable Docker image built with go-algorand-sdk, py-algorand-sdk, and algosdk.
   • Ensure environment variables for any external compilers or APIs (Judge0, etc.) are configured.

5. Access the Application: Open your browser to http://localhost:3000.

🌐 Deployment

• The frontend is hosted on Vercel. Push to the main branch, and Vercel automatically builds and deploys.
• The Docker-based code-runner is hosted on a GCP e2-medium VM with Docker installed. The Node.js/Express server runs there (via PM2). Adjust your API endpoints to point from the Next.js app to this external service.

🤝 Contributing

Contributions are welcome! Follow these steps:

1. Fork the repository.
2. Create a feature branch: git checkout -b feature-name.
3. Commit your changes: git commit -m "Add a feature".
4. Push to the branch: git push origin feature-name.
5. Submit a pull request.

📜 License

This project is licensed under the MIT License.

👩‍💻 Authors

• Matthew Bernard - Creator and Maintainer