FormForge

Inspiration

Writing Infrastructure-as-Code (like Terraform) is a complex, abstract, and error-prone process. For junior developers, newly onboarded engineers, or business-oriented profiles, designing a cloud architecture comes with a steep learning curve. A simple syntax error or a misconfigured network link can be costly in terms of both time and security. We wanted to democratize IaC by bridging the gap between visual whiteboarding and concrete engineering.

What it does

FormForge is a Visual Infrastructure-as-Code platform. It allows users to design cloud architectures (AWS, GCP) through a seamless "Drag & Drop" Node-based UI. In the background, the application analyzes the visual graph in real-time and instantly generates clean, modular, and production-ready Terraform code. FormForge also features a static security validation engine that alerts the user if their architecture has obvious security flaws (e.g., port 22 open to the world) before any code is even executed.

How we built it

The application is built on a modern, decoupled architecture to ensure optimal performance:

• Frontend: Built with React, TypeScript, and Vite. We leveraged React Flow (XYFlow) to design the interactive node editor, paired with TailwindCSS for an immersive and professional Dark Mode interface.
• Backend: Developed in Python using FastAPI. It acts as the "brain" of the application. It receives the JSON graph from the frontend, applies a complex dependency resolution algorithm (AST-like), validates block security, and compiles everything into HCL (Terraform) syntax.
• Infrastructure: Everything is cleanly containerized with Docker and Docker Compose for a one-command local or cloud deployment.

Challenges we ran into

Our biggest challenge was translating a 2D visual graph into a strict Terraform dependency tree. In Terraform, relationships have a precise direction (e.g., a Subnet depends on a VPC, a VM depends on a Subnet). On a visual canvas, a user can draw arrows in any direction or "skip" steps entirely. We had to develop an intelligent resolution algorithm on the Python backend capable of inferring logical "Resource Relationships" regardless of the visual arrow's direction, ensuring the generated HCL code is always valid.

Accomplishments that we're proud of

We are particularly proud of achieving "Architectural Excellence" by completely hiding the underlying complexity from the user. Seeing the application automatically inject a generated VPC ID into a Subnet, and then that Subnet's ID into a VM's network interface—all in real-time with every mouse movement—feels like magic. Furthermore, we successfully designed a UI/UX worthy of a premium engineering tool.

What we learned

This project pushed us to master Directed Acyclic Graphs (DAG) for code compilation, as well as complex state management in React. We also had to deeply study the syntactic structure of HashiCorp Configuration Language (HCL) to ensure our Python generator produced code that would successfully pass a real terraform validate check.

What's next for FormForge

To take FormForge to the next level, we plan to:

1. Asynchronous CLI Execution: Integrate a worker system (like Celery) to run actual terraform plan and terraform apply commands in the background directly from the interface.
2. Multiplayer: Implement WebSockets (e.g., Yjs) to allow multiple cloud architects to collaborate on the same canvas in real-time.
3. Reverse Engineering: Allow the import of an existing .tf file so the application can automatically generate and layout the corresponding visual graph.

Built With

• docker
• fastapi
• pydantic
• python
• react
• reactflow
• tailwindcss
• typescript
• vite