Development notes

Built with Claude

This site was built in close collaboration with Claude, Anthropic's AI assistant. This page documents the tools, decisions, and process that brought it to life — from a blank EC2 instance to a live, interactive web application.

What this site is

This is a personal portfolio and travel tracking site built from scratch on AWS infrastructure. The centrepiece is an interactive world map that visualises every country visited, colour-coded by how many times it's been visited, with individual city markers and live progress tracking toward the goal of visiting every country on Earth.

The site includes a password-protected admin panel for updating country and city data without touching any code, backed by a REST API with JWT authentication. All data is served dynamically — changes made in the admin panel are reflected on the map immediately.

The stack

Technologies were chosen for being lightweight, proven, and appropriate to the scale of the project — no unnecessary frameworks, no over-engineering.

Mapping
D3.js v7 + TopoJSON
Interactive SVG world map with zoom, pan, hover tooltips, and dynamic country colouring
Backend API
Python + Flask
Lightweight REST API handling authentication and data persistence, running as a systemd service
Authentication
JWT + PBKDF2
Password hashed with PBKDF2-SHA256 (260k iterations), session tokens issued as signed JWTs
Web Server
Nginx
Serves static files and reverse-proxies API requests to Flask. Handles HTTP→HTTPS redirection
SSL
Let's Encrypt
Free, auto-renewing TLS certificate via Certbot, with HTTPS enforced site-wide
Frontend
Vanilla HTML/CSS/JS
No frontend framework — intentionally minimal, fast, and maintainable

Hosted on AWS

The site runs on a single AWS EC2 instance — a deliberate choice to keep the architecture simple, cost-effective, and fully within my control.

Platform AWS EC2 — Amazon Linux 2023
Web server Nginx — static files + reverse proxy to Flask on port 5001
TLS / HTTPS Let's Encrypt via Certbot — auto-renewing certificates
API process systemd service — Flask starts on boot, restarts on failure
Data storage JSON file — simple, no database overhead for this scale
Domain www.danscodellaro.com — DNS pointed to EC2 public IP

What was built

How Claude was used

Claude served as a hands-on technical collaborator throughout the build. Every feature started with a clear brief — what it should do, how it should look, and what constraints to observe — and Claude translated those requirements into working code.

The process was genuinely iterative. Requirements were refined through conversation, implementations were reviewed and adjusted, and technical approaches were discussed before committing to them. Claude suggested options; I made the calls.

1
Infrastructure & HTTPS
Configured the EC2 instance, installed and set up Nginx, obtained an SSL certificate via Certbot, and verified end-to-end HTTPS connectivity to the domain.
2
Static landing page
A minimal work-in-progress home page was put in place while the main content was developed.
3
Interactive travel map
Built the D3.js world map with TopoJSON, country highlighting, zoom/pan, city dot markers, hover tooltips, and the stats header. Country and city data was entered by hand.
4
Visit frequency colour coding
Added a four-tier colour system (once → 5+ visits) so the map communicates depth of travel experience, not just presence.
5
Admin panel & API backend
Replaced hardcoded data with a Flask REST API backed by a JSON data file. Built the password-protected admin panel with JWT auth, country search, tier editing, and city management — all without touching the map code after saving.
6
Ongoing refinement
UX details added iteratively: purple city markers for contrast, a country rules panel, additional country and city data, social profile links, a GitHub-backed public repo, and a RAG-powered chatbot with document ingestion — plus this documentation page.
On AI-assisted development: Using Claude is a force multiplier, not a shortcut. It doesn't replace product thinking, architectural judgement, or knowing what you're trying to build — it accelerates the translation of clear requirements into working software. Every decision on this site was made deliberately; Claude handled the typing.