⚡ ZeroArch

The visual infrastructure designer and AI code generator for Zerops.

Features • Architecture • Getting Started • Deploy

---

🎯 The Vision

Historically, cloud infrastructure is configured via dense, error-prone YAML files. Developers are forced to mentally map text configurations to physical architecture, and mistakes are rarely caught until deployment. ZeroArch flips this paradigm.

By providing an infinite visual canvas, developers can conceptually design their infrastructure first. Generative AI then bridges the gap-auditing the visual graph for security flaws and instantly compiling it into a production-ready zerops.yml configuration.

---

🎨 Interface & Workflows

1️⃣ Visual Architecture Canvas

Drag and drop scalable infrastructure components onto the board.

2️⃣ Live AI YAML Generation & Audit

Instant AI feedback highlighting security flaws and the generated zerops configuration.

3️⃣ Shareable Read-Only View

Collaborate with teams using cloud-persisted read-only links.

---

✨ Features Deep Dive

Feature	Description
🎨 Interactive Canvas	Built on React Flow, offering a buttery-smooth, infinite grid for mapping out Frontends, APIs, Databases, Redis Caches, and Message Brokers.
🧠 AI Compiler Engine	Sends the serialized AST (Abstract Syntax Tree) of your nodes to Google Gemini, which acts as a DevOps engineer to write perfect Zerops YAML.
🛡️ Security Auditing	The AI automatically flags anti-patterns (e.g., exposing a database directly to the internet without an API layer) before deployment.
🔗 Cloud Collaboration	Architectures are serialized and persisted to PostgreSQL. Generate a unique, read-only URL to share your blueprint with your team.
📚 Template Library	1-Click hydration of industry-standard architectures (Microservices, High-Traffic E-Commerce, AI Pipelines) to get started instantly.

---

🏗️ System Architecture

ZeroArch relies on a modern, decoupled architecture. The frontend handles state management of the node graph, while Next.js Server Actions securely process database mutations and AI prompt generation.

graph TD
    subgraph Client [Browser / UI Layer]
        UI[React Flow Canvas]
        Preview[Live YAML Preview]
    end

    subgraph Server [Next.js App Router]
        SaveAPI[POST /api/save]
        LoadAPI[GET /api/load]
        GenAPI[POST /api/generate]
        Prisma[Prisma ORM]
    end

    subgraph Infrastructure [External Services]
        DB[(PostgreSQL)]
        AI[Google Gemini AI]
        Zerops[Zerops Cloud]
    end

    UI -->|JSON Graph State| SaveAPI
    UI -->|Remix ID| LoadAPI
    UI -->|AST Data| GenAPI

    SaveAPI --> Prisma
    LoadAPI --> Prisma
    Prisma <--> DB

    GenAPI -->|Context + Prompt| AI
    AI -->|zerops.yml + Audit| GenAPI
    
    Preview -.->|Deploys to| Zerops

Loading

---

🚀 Getting Started (Local Development)

Prerequisites

• Node.js 20+
• A PostgreSQL Database (Local or Cloud)
• A Google Gemini API Key

Installation

1. Clone the repository

   git clone https://github.com/Hardikkhanduja/ZeroArch
   cd zeroarch

2. Install dependencies

   npm install

3. Configure Environment Variables Create a .env file in the root directory:

   Variable	Description	Example
   DATABASE_URL	Your PostgreSQL connection string	postgresql://user:pass@localhost:5432/zeroarch
   GEMINI_API_KEY	Your Google AI Studio key	AIzaSyB...

4. Initialize the Database

   npx prisma generate
   npx prisma db push

5. Start the Development Server

   npm run dev

---

☁️ Deploy to Zerops (Production)

Since ZeroArch generates Zerops configurations, it is naturally built to be hosted directly on Zerops itself. The repository includes a highly-optimized zerops.yml CI/CD pipeline that handles database migrations and system dependencies automatically.

1. Create a Zerops Project with a Node.js runtime and a PostgreSQL service.
2. Import this repository into your Node.js service via the Zerops GitHub integration.
3. Add Secret Variables in the Zerops GUI:
   • DATABASE_URL (Ensure it ends with your dedicated database name, e.g., /db)
   • GEMINI_API_KEY
4. Trigger the Pipeline. Zerops will automatically install dependencies, build the Next.js app, configure the Alpine Linux runtime (including legacy OpenSSL backwards compatibility for Prisma), and deploy the app instantly.

---

📖 Usage Guide

1. Design: Drag components from the left sidebar onto the canvas. Connect them by dragging from a node's source handle to a target handle.
2. Configure: Click on any node to open the Node Drawer to view its configuration.
3. Generate: Click "Generate Architecture". The AI will analyze your graph and return a production-ready zerops.yml file alongside a security audit.
4. Share: Click "Save to Cloud" to lock your architecture into the database and receive a unique, shareable URL for your team.

---

📂 Project Structure

zeroarch/
├── prisma/
│   └── schema.prisma         # Database models (Architecture)
├── public/
│   └── logo.png              # Brand assets
├── src/
│   ├── app/
│   │   ├── api/              # Next.js API Routes (AI, Save, Load)
│   │   ├── components/       # React Flow Canvas, Sidebar, Modals
│   │   ├── lib/              # Prisma Client & Template Data
│   │   ├── share/[id]/       # Dynamic Read-Only Viewer Route
│   │   ├── layout.tsx        # Global Layout & Geist Font
│   │   └── page.tsx          # Main Editor Entrypoint
│   └── ...
├── zerops.yml                # CI/CD Deployment Config
└── tailwind.config.ts        # UI Theme & Glassmorphism Utilities

---

📜 Hackathon Disclosure (Rule #9)

This project was built for the Zerops Hackathon. In adherence to the hackathon rules, I am fully disclosing that an AI pair-programming assistant was used to accelerate boilerplate code generation, debug Next.js routing, and refine CSS styles. All core architectural design choices, prompt engineering, database schemas, and product directions were driven solely by me as a solo developer.

Built with ❤️ for the Zerops Hackathon.