Project · Full Stack
A small internet rabbit hole turned into a website where you type a name and see it spelled using real NASA Landsat photos. No AI image generation, no fake textures — just rivers, islands, glaciers, deserts, and mountains that happen to look like letters from space.
Hero Image
ADD HERO SCREENSHOT HERE
Suggested: the name generator result page or the spinning globe intro.
The Story
I found the idea while scrolling through Twitter. Someone had posted about NASA having satellite photos of Earth that naturally look like alphabet letters. It was one of those tiny facts that immediately sticks in your head.
My first thought was: what if I collected all of them and let people spell their own names with actual places on Earth?
That became EarthSpell. You enter a name, the site picks matching NASA Landsat images for each letter, and you get a little poster made out of real landscapes. You can open each card, see where that letter exists on the planet, download the result, or share it with friends. It is intentionally fun — the kind of thing people would want to screenshot and post.
Screens To Add
ADD IMAGE 1
Name input / globe screen
ADD IMAGE 2
Generated letter cards
ADD IMAGE 3
Coordinate/detail view
ADD IMAGE 4
Downloaded poster preview
What I Built
I scraped the NASA Landsat alphabet gallery with Python, pulled the letter images, location names, and coordinates, then cleaned everything into a format the app could use.
The original files were too heavy for a quick website. I used Pillow to convert the large PNGs into WebP images and cut the total asset size by more than 70%.
The frontend uses Next.js, TypeScript, Tailwind, and a small Three.js globe. When someone submits a name, the page does a quick zoom into Earth and then brings the letter cards up one by one.
Users can download a high-res PNG poster with their name, the satellite cards, coordinates, index labels, and a small EarthSpell watermark.
The app can generate a custom social preview image for a name, so links look good when shared instead of showing a generic thumbnail.
The Tech
The project has two halves: a Python pipeline that prepares the data, and a Next.js app that turns that data into the actual experience.
Python scraper: uses BeautifulSoup to collect image metadata, places, and coordinate details from NASA's Landsat gallery.
Image processing: uses Pillow to convert high-res PNGs to lighter WebP files before upload.
Firebase: stores the images in Cloud Storage and keeps the letter data in Firestore.
API route: /api/letters looks up the images for a name and keeps a small memory cache to avoid unnecessary Firestore reads.
OG route: /api/og builds a 1200×630 share image with the actual letter cards for the name in the URL.
Problems I Had To Solve
Canvas downloads kept breaking
The download feature draws Firebase images onto a canvas and exports the final poster. Browser security did not like that at all, because cross-origin images can taint a canvas. I fixed it by loading the images through Next.js's local image proxy first, so the canvas could safely export the PNG.
Repeated letters looked boring
Names like JEFFERSON can repeat the same letter a lot. If every E or R uses the same satellite image, the result feels flat. I added server-side selection logic that tracks which filenames were already used and picks a different image for the same letter whenever possible.
Stack
FRONTEND
Next.js 14 + TypeScript
STYLING
Tailwind CSS
GRAPHICS
Three.js
BACKEND
Firebase + Next.js APIs
PIPELINE
Python, BeautifulSoup, Pillow
DEPLOYMENT
Vercel