CS50Web Capstone – Cloud Infrastructure Visualizer
Hi! This is my CS50Web Capstone project demo.
🔹 Course: CS50’s Web Programming with Python and JavaScript (Harvard University)
🔹 Project: CloudViz — A cloud infrastructure diagramming tool for creating and visualizing AWS-style architectures
🔹 Tools Used: Python, Django, JavaScript, HTML, CSS, SVG, Fetch API, Bootstrap 5, SweetAlert2, html2canvas
________________________________________
🕒 Demo Timestamps
0:00 — Introduction
Overview of CloudViz, the purpose of the project, and the main interface (Projects page & editor layout).
0:14 — Creating a New Project
Using the “New Project” form to add a project and opening it in the diagram editor.
0:39 — Adding Components
Adding VPC, Subnet, EC2, S3, and other cloud components to the canvas.
0:46 — Auto Layout / Drag & Drop / Delete Nodes / Clear Canvas
Demonstrating automatic grid positioning of all components computed by the Django backend.
Repositioning components with drag-and-drop, renaming them, and removing nodes with the Delete/Backspace key.
1:13 — Edit / Connecting Components (Graph Editing)
Using “Connect Nodes” mode to visually create relationships rendered as SVG lines.
1:54 — Saving the Diagram
Saving all components & connections to the database through a JSON API.
1:56 — Export PNG
Exporting the full canvas diagram as a PNG using html2canvas.
2:36 — Terraform Import
Uploading a .tf file to automatically generate components and connections from AWS Terraform resources (VPC → Subnets, EC2 → Subnets, IGW → VPC, ALB → Subnets, etc.).
3:00 — Collaboration (Add / Remove)
Adding another user as a collaborator, SweetAlert2 status messages, and removing collaborators.
3:37 — Permissions Check
Viewing the project as a collaborator and confirming access limitations.
4:14 — Delete Project (Owner Only)
Using a SweetAlert2 confirmation dialog to permanently delete a project.
________________________________________
💻 GitHub Repository
👉 https://github.com/me50/eieiphyu339/web50/...
________________________________________
🗨️ “This project demonstrates my understanding of Django models, user authentication, JSON APIs, file upload handling, real-time UI updates, drag-and-drop interfaces, Terraform parsing, and dynamic JavaScript rendering with SVG.”
#CS50W #HarvardX #Django #JavaScript #CloudArchitecture #Terraform #WebDevelopment #CapstoneProject #FrontendDevelopment #BackendDevelopment #FullStack