How I Built a Cloud App From Scratch
A plain-English walkthrough — from the first idea to a live website with a database, APIs, DNS, automatic deployments, and 360 practice exam questions.
The Idea
I was studying for the AWS and Azure certification exams and couldn't find a free study site that was easy to read. Most sites were either paywalled, cluttered, or full of jargon. So I decided to build my own.
Wrote down what the site needed: study guides for every exam domain, a practice exam for each cert, plain-English explanations, and no sign-up required.
If you're going to study something, you might as well build something with it. Building the site forced me to actually understand the cloud concepts I was trying to learn.
Designing with Claude AI
I used Claude (an AI assistant made by Anthropic) to help design the pages, write the study content, and structure the code. Think of it like having a very fast collaborator who can write, design, and code at the same time.
Described what I wanted each page to look like. Claude helped write the HTML/CSS layout, the study guide content for all six exam domains, and 360 practice exam questions.
AI tools are part of the modern developer toolkit — just like using Google or Stack Overflow, but faster. Knowing how to use AI effectively is itself a cloud/tech skill.
Signing Up for GitHub
GitHub is where all the code for the website lives. Think of it like Google Drive, but for code — every change is saved, tracked, and reversible.
Created a free GitHub account and a repository (a folder for the project). Every time I made a change I created a "commit" (a save point) and pushed it to GitHub.
Professional developers never work directly on the live site. GitHub lets you write and test changes safely, review them before they go live, and roll back if something breaks.
Building the Pages
The website is built with Next.js — a framework that makes it easy to create fast, modern web pages. Each page is a file. The study guides, practice exams, and navigation all live in separate files.
Built the cloud-prep hub page, AWS study guide, Azure study guide, and six full practice exams (60 questions each, with a countdown timer, scoring, and explanations).
Next.js pre-builds all the pages into static files so they load extremely fast — no waiting for a server to do work when someone visits. That's exactly what cloud hosting is designed for.
Hosting on Cloudflare Pages
Cloudflare Pages is the service that takes the website files and puts them on the internet. It's free, it's fast (your files get copied to 200+ locations around the world), and it connects directly to GitHub.
Connected the GitHub repository to Cloudflare Pages. Now whenever I push code to the "main" branch on GitHub, Cloudflare automatically builds and deploys the site — no manual uploading needed.
This is the "Static Hosting" requirement from the project rubric. Cloudflare's global edge network means a student in Texas and a student in Tokyo both get the same fast load time.
Setting Up DNS (Custom Domain)
DNS stands for Domain Name System. It's like a phone book for the internet — it translates "tradingwithhak.com" into the actual address where the website files live.
Registered tradingwithhak.com and pointed it at Cloudflare. Added DNS records (CNAME and A records) that tell browsers: "when someone types this domain, go here." Cloudflare also automatically gave the site a free HTTPS certificate so all traffic is encrypted.
Without DNS, the site would only be accessible at a long ugly URL like pages.dev/abc123. A custom domain makes it professional. HTTPS makes it secure — browsers show a padlock icon and block the site without it.
Setting Up Supabase (Database)
Supabase is a free cloud database service. A database is like a giant organized spreadsheet in the cloud that the website can read from and write to in real time.
Created a free Supabase account and set up a table called page_visits. Every time someone visits a page, the website sends a request to Supabase to add 1 to the counter. The visitor count you see on the site is live data from that table.
This satisfies the "NoSQL Database + Visitor Counter" requirement. Supabase uses PostgreSQL under the hood and provides a REST API so the website can talk to it without writing complex database code.
Building the API
An API (Application Programming Interface) is a small program that sits between the website and the database. When the page loads, the website calls the API: "add one visit." The API talks to Supabase, updates the count, and sends the new number back.
Wrote API routes in Next.js using Edge Runtime — meaning they run on Cloudflare's servers, right at the edge of the network, close to whoever is visiting. The visitor counter API lives at /api/cloud-prep/visit.
APIs are how every modern app works. Your banking app, Instagram, weather app — they all make API calls. Building one from scratch, connecting it to a real database, and deploying it to the cloud covers the backend requirement.
CI/CD — The Automatic Pipeline
CI/CD stands for Continuous Integration / Continuous Deployment. It means the site deploys itself automatically every time I push new code. I never manually upload files — I just save my work to GitHub and the site updates on its own.
Set up a GitHub Actions workflow file. It runs three steps automatically on every push: (1) TypeScript type check, (2) Next.js build, (3) Cloudflare Pages deploy. If any step fails, the old version of the site stays live.
Professional teams use CI/CD so that broken code never reaches users. The workflow acts as a safety net — it catches errors before they go live. This covers the CI/CD and Infrastructure-as-Code requirements.
The Final Product
The end result is a live website at tradingwithhak.com — completely free to use, no account needed. It has study guides for AWS and Azure, six full practice exams with timers and scoring, a real visitor counter powered by a cloud database, and a CI/CD pipeline that deploys automatically.
Published the site, added the team page with GitHub profiles, wrote the blog post, built this presentation, and presented it live.
The best way to prove you understand cloud technology is to use it to build something real. Every line of this rubric — hosting, database, API, DNS, HTTPS, CI/CD, monitoring, documentation — is live at tradingwithhak.com right now.
Everything described above is running right now at tradingwithhak.com — free, no account needed.