🚀 How I Built & Deployed a Real DevOps Project from Scratch (AWS GitHub Netlify)

Source: Dev.to

🎯 The Challenge I Gave Myself

I wanted to simulate how real companies work.
Instead of:

“Build React app → run locally”

I aimed for:

Developer → Cloud → GitHub → CI/CD → Production

Goal: Build a React application using AWS infrastructure and deploy it with an automated pipeline.

☁️ Step 1 — Building My Own AWS Cloud Environment

Before writing any code I created real AWS networking from scratch:

• Custom VPC (10.0.0.0/16)
• Public Subnet (10.0.1.0/24)
• Internet Gateway
• Route Table with public internet route
• Security Group (SSH + HTTP access)

Then I launched an Ubuntu EC2 instance inside this VPC. This was the moment DevOps stopped being theory and started feeling real.

💻 Step 2 — Developing Inside the Cloud (EC2)

Instead of coding locally, I connected to the EC2 instance via SSH and turned it into my development machine. I installed:

• Node.js
• Git
• npm

After that I created a React application directly on the server—literally coding inside AWS ☁️.

🎮 Step 3 — Building a Real React Application

I didn’t settle for a simple “Hello World”. I built a KBC‑style AWS Quiz App with the following features:

• 🔐 Login page (demo credentials)
• ⏱ Timer per question
• 📊 Progress bar
• 🏆 Score tracking
• 🌙 Dark / Light theme toggle
• 💾 High score saved in browser
• 🔀 Questions shuffled each session
• 🔄 Restart quiz functionality

The project started feeling like a real product.

🐙 Step 4 — Turning It Into a Professional GitHub Project

I moved the code to GitHub, learning a lot along the way:

• Initialized a Git repo on EC2
• Created a GitHub repository
• Generated a Personal Access Token for secure pushes
• Pushed the project
• Wrote a professional README
• Added architecture diagrams, LICENSE, and a screenshots folder

The repository now looks like a real developer project.

🔄 Step 5 — Creating a CI/CD Pipeline with Netlify

Connecting the GitHub repo to Netlify gave me a fully automated pipeline:

1. Dependencies install automatically
2. React app builds automatically
3. Site deploys automatically
4. Website goes live 🌍

No manual hosting or uploads—real CI/CD in action.

🌍 The Final Result

The application is live and accessible worldwide.

Live Demo:
https://6988f216c9b850f7db01d08b—tiny-begonia-c0a233.netlify.app/

🏗️ Architecture Overview

DevOps Pipeline

Developer → AWS EC2 → GitHub → Netlify → Users

AWS Infrastructure

VPC → Public Subnet → EC2 → Internet Gateway

💡 What This Project Taught Me

• How AWS networking works
• How to develop inside an EC2 instance
• How GitHub authentication works
• How CI/CD pipelines deploy apps
• How frontend apps go live globally

Most importantly: DevOps is best learned by building real projects.

🚀 What’s Next?

Planned upgrades:

• Custom domain setup
• Backend API on AWS
• Database integration
• Full‑stack deployment pipeline

GitHub profile: https://github.com/IrfanPasha05

Advice for beginners:
Stop waiting. Start building. Hands‑on projects teach more than any course ever will. 💯