nulll

A modern, minimal, and highly interactive algorithm visualizer and code execution environment built with Next.js, Pyodide, and Tailwind CSS.

Overview

nulll is an interactive visualization platform designed to bring algorithms to life. It features a built-in code editor, client-side code execution, and step-by-step visual debugging. The architecture focuses on performance and a seamless, distraction-free user experience. More languages will be added in the future!

Key Features

• Interactive Code Editor: A rich, in-browser coding experience powered by Monaco Editor.
• Client-Side Execution: Secure, real-time Python execution using Pyodide (WASM).
• Step-by-Step Visualization: Granular control over execution flow with play, pause, and step-through capabilities.
• Algorithm Library: Pre-built visualizations for Sorting, Trees, Mathematics, and Array Operations.
• Modern UI: A clean, minimal, and highly responsive interface with seamless dark/light mode support.
• Multi-language Expansion: While currently focused on Python, support for additional programming languages is coming soon.

Technologies Used

• Framework: Next.js
• Language: TypeScript
• Styling: Tailwind CSS
• Execution Engine: Pyodide
• Code Editor: Monaco Editor
• Data Visualization: D3.js
• Animations: Framer Motion
• UI Components: shadcn/ui

Getting Started

To run this project locally, follow these steps:

1. Clone the repository

   git clone https://github.com/KlyrhonMiko/nulll.git

2. Install dependencies

   npm install

3. Run the development server

   npm run dev

4. Open http://localhost:3000 with your browser to see the result.

Project Structure

• /components: Reusable UI elements, the code editor, and visualization components.
• /lib: Core utilities, including the Pyodide Python runner integration.
• /app: Next.js App Router pages, layouts, and global styles.
• /public: Static assets like images and fonts.