Menu

Post image 1
Post image 2
1 / 2
0

How I Built a NASA-Style Name Generator with Next.js and Canvas API

DEV Community·Knipper Mccarville·about 1 month ago
#kUgfO1cr
Reading 0:00
15s threshold

Ever wondered what your name looks like from space? I built Your Name in Landsat — a web app that spells out any name or short phrase using real Landsat satellite imagery tiles shaped like alphabet letters. The Idea NASA's Landsat program has been capturing Earth observation data since 1972. Among the millions of satellite images, some natural and man-made features on Earth's surface happen to resemble letters of the alphabet. I thought it would be fun to collect these "letter tiles" and let people spell their names with them. Tech Stack Next.js 16 with App Router for server-side rendering and routing React 19 for the interactive UI TypeScript for type safety Tailwind CSS 4 for responsive styling Canvas API for compositing letter tiles into a single shareable image Cloudflare Workers for edge deployment How It Works The user types a name or short phrase The app maps each character to a pre-curated Landsat satellite image tile Canvas API composites all tiles side by side into one panoramic image The result…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.

Read More