My Journey from Backend to Full-Stack Development
Building and Deploying My First Web Server: A Complete Journey from domain purchase to fully deployed, secure website with AI-assisted development
Introduction
As a backend developer with 10 years of experience in fintech using Java, C++, and Tcl, I decided to expand my skillset into modern web development. This post chronicles my actual journey from purchasing a domain to having a fully deployed, secure website running on AWS for free with the help of Claude Code.
This is a real account of my first session building the bare bones of a website, including the mistakes, iterations, and breakthroughs that happened along the way.
The Starting Point
✅ What I Had
🎯 What I Wanted to Build
Technology Stack Selection
While building this project, I explored modern web development tools and frameworks. With help from Claude for implementation support — and through lots of googling — I settled on the following stack:
Frontend & Backend
- Next.js 15 – Full-stack React framework
- TypeScript – Static typing for reliability
- Tailwind CSS – Utility-first styling
- NextAuth.js – Simple auth integration
Database & Deployment
- PostgreSQL – Relational database
- Prisma ORM – Type-safe DB access
- AWS EC2 – Free cloud hosting
- Nginx – Reverse proxy server
- Let's Encrypt – Free SSL certificates
🤔Why Next.js?
Coming from strongly-typed languages, TypeScript felt familiar, and Next.js handles both frontend and backend in one framework, making it perfect for learning full-stack development.
Development Environment Setup
IDE Choice
Initially considered IntelliJ (as a Java dev this is my at home IDE), but switched to VS Code for web development due to:
- I use it at work for C++ development
- Better JavaScript/TypeScript support
- Extensive Next.js ecosystem
- Lighter weight for web development
- Claude Code integration for AI-assisted development
Repository Setup
Created a GitHub repository and connected it with VS Code using GitLens, crucial for my deployment pipeline.
Next.js Project Initialization
npx create-next-app@latest . --typescript --tailwind --eslint --app --src-dir --import-alias "@/*"
Building the Foundation
Core Pages and Features
Using Claude Code, I systematically built out the structure of a simple website:
✅ Completed Features
🎨 UI/UX Implementation
AWS Infrastructure & Deployment
Infrastructure Setup
EC2 Configuration
- Instance – t3.micro (free tier)
- OS – Amazon Linux 2023
- Security – HTTP, HTTPS, SSH ports
- IP – Elastic IP for consistency
Domain & SSL
- DNS – connys.co.uk → AWS IP
- Proxy – Nginx reverse proxy
- SSL – Let's Encrypt certificates
- Management – PM2 process manager
I added security and simple IAM roles that can be expanded upon later, just to set the ground work.
Deployment Challenge & Solution
⚠️Resource Constraints
Problem: t3.micro instance (1GB RAM) couldn't handle npm install or Next.js builds, the ssh connections would stall and eventually the server was dying.
Solution: Implemented a dual repository pipeline where I could build locally on my gaming PC and deploy the build files to the EC2 instance.
🏗️ Build Repository Architecture
Source Repository
Build Repository
Automated PowerShell Pipeline:
npm run build → Copy artifacts → git push builds → SSH → git pull → pm2 restart
🎨 Professional Polish
As part of the deployment process, I worked through a series of UI/UX refinements to make the website clean and responsive. Everyone who uses the internet nowadays has picked up on so many great designs that have evolved over the years — it's easy to tell when a page feels wrong, but often hard to know exactly what the right design should be. I've tried to aim for a minimalist style with off-solid colours and lots of curved edges.
🐛Problem: Mobile Button Wrapping
Issue: On smaller screens, buttons like my "LinkedIn" or "GitHub" were breaking into two lines.
Solution: Applied flex items-center whitespace-nowrap global styles to all icon buttons to maintain clean, consistent layout on mobile.
✨UX Improvements: Streamlined Navigation
Enhancement: Removed redundant navigation buttons
Redundant Elements Removed: The "Back to Blog" and "Read More" buttons were removed, as the navigation bar already provides intuitive access. The result is a cleaner, more focused interface. It seemed like the AI wanted to put buttons everywhere, I probably removed 2-3 buttons from every page created as they were redundant.
🎨Theme System Overhaul: Light/Dark Mode Support
Challenge: The original AI generated codebase had hardcoded color values (e.g. #ffffff, #333), making dark mode implementation inconsistent and frustrating.
Solution: I prompted Claude with: "Remove all hardcoded colors and move all colour rules to the global CSS file." This turned out to be trickier than expected—AI struggled with "remove all" prompts, often ending up searching for the first colour it found and removing it. I went through manually and cleaned the code after the 10th attempt to get claude to do it.
Refactoring Process:
- Removed all hardcoded hex values
- Implemented semantic Tailwind tokens (e.g., text-foreground, bg-background)
- I struggled with dark theme colours, so I settled on a VS Code Dark+ inspired solution for a developer-friendly aesthetic
- Added support for system theme detection via prefers-color-scheme
Result: Seamless light and dark theme support and a much more maintainable styling system going forward - no more color inconsistencies!
Final Architecture & Results
🏆 Complete System
Frontend Achievement
Infrastructure Achievement
🎉Live Results
Live Site: https://connys.co.uk - Secure, fast and professional
Performance
Cost Efficiency
Key Learning Points
🧠 What This Journey Taught Me
1. AI-Assisted Development
- ✅ Claude Code accelerated learning - I could ask specific questions about real problems as they arose, learning contextually
- ✅ The code diffs that were generated helped show me where things needed changing and how they were being changed
2. Resource Awareness
- ✅ Finding deployment environment limitations led to implementing my builds repo, effectively what I use daily at work
3. Professional Standards
- ✅ AI helped maintain code quality and follow web development conventions I hadn't learned yet
- ⚠️ If AI's first attempt at fixing an error fails, it tries some insane solutions. Better to cancel and fix manually
4. Automation Investment
- ✅ Spending time on deployment automation early saves time - the PowerShell pipeline now enables rapid iterations
💡For Other Backend Developers
If you're a backend developer looking to expand into full-stack, here's what worked for me:
- Build something real: Having an actual goal (personal website) keeps you motivated through challenges
- Use AI assistance: Ask specific questions about real problems rather than following generic tutorials
- Focus on one framework: Next.js covers both frontend and backend, reducing context switching
- Invest in automation: Deployment scripts and professional practices pay dividends quickly
- Leverage your daily habits: Apply the same practices you use every day to ensure professional, reliable code
- Prioritize critical architecture design: Focus on the correct solution for important decisions, while opting for quick fixes on less critical tasks
Next Steps
🚀 Immediate (1-2 weeks)
🎯 Long-term (1-6 months)
🎯Mission Accomplished
This project successfully transformed a backend developer's idea into a fully deployed web application in one intensive session.
The foundation is now solid for building web applications and the investment in proper architecture and automation will pay dividends as the application grows in complexity.
About the Author
Written by Connor Shields.