Why I Built It
I've been a GTA fan since Vice City. When Rockstar released the first trailer for GTA 6, like all other fans, I was watching the screen, but instead of trying to catch every detail, I was thinking about websites. There were already some GTA 6 fan sites, but most of them looked abandoned or had no soul, with auto-updating news sections, and maps that were either sparse or difficult to use. I wanted a site that had a personal touch, where one could go to read news articles that have been fact-checked by a human, see the characters and trailers in an organized way, and eventually explore a map of Leonida that didn't make me cry.
That's how LeonidaAtlas.com was born — a GTA 6 companion site that started as a news platform in June 2026, launched an interactive map in July 2026, and will become a full empire planner before the release of GTA 6 on November 19th, 2026. No budget. No team. Just me, a laptop, and an unreasonable number of tabs open to Rockstar's press kit.
The Tech Stack
Being a frontend developer, I knew that using a CMS or a database for Phase 1 was not an option. I had to make something that was as fast and light as possible but had full control over the code. Here's what I've used:
- Next.js 16 (App Router): Server components by default, SSG for articles, and zero config for deployment on Vercel. The App Router allowed me to colocate layout, page, and API routes.
- Tailwind CSS v4: No
tailwind.config.jsneeded, as v4 uses CSS-native@themeblocks. All the theming is done via CSS custom properties inglobals.cssand automatically picked up by Tailwind. - TypeScript: Strictly enforced, no compromises.
- MDX + gray-matter: For writing articles as
.mdxfiles in acontent/articles/directory. The frontmatter of each article is used to set the title, slug, badge, category, and cover image, while the body is parsed with a custom MDX pipeline using@mdx-js/mdx'sevaluate()function. No CMS needed, just some Git commits. - Resend: For emails, a single audience with no segmentation needed, just a POST request to their API endpoint.
- Supercluster: For clustering the hundreds of pins on the interactive map.
- Cloudflare R2: For storing the map tiles. An API route proxies the requests to R2, so the client never talks to it directly. The map tiles are cached with aggressive caching headers.
- Vercel: For hosting, obviously. The entire app is pushed to the main branch, and the magic of Vercel does the rest.
And that's it. No databases, no CMS, no bloated dependencies. The package.json for the frontend has only 12 runtime dependencies.
Key Features & Highlights
The Credibility Badge System
The credibility badge system was the first thing I built on the site, and it's the reason why every article and every map pin has a badge attached to it. The three types of badges are: Official (green), Rumor (orange), and Unverified (gray). This was a design decision that came from seeing too many sites present speculation as fact. Every piece of content on LeonidaAtlas is tagged so readers know exactly where it came from.
The Custom Map (1,719 Lines of Canvas)
This one is my favorite — I rolled out a custom interactive map instead of using any third-party libraries like Leaflet or Mapbox. The MapClient.tsx component has 1,719 lines of code and handles the rendering of the tiles, fetching of the landmarks, Supercluster marker clustering, 21 types of icons rendered as paths on canvas, pinch-to-zoom gestures, drag-to-move, search, and tag filtering. But my favorite part is the custom spawn animations of the pins when zooming in. When the markers are spawned, they have a nice scaling animation with a 220ms easeOutCubic curve, and when the user clicks on a cluster to reveal the child markers, they all burst out with a 350ms scale animation.
The map has two tile sources, with the first one being the Cloudflare R2 bucket, and the second one being the 134 local tiles in the public/map-tiles/ directory. It will use the first one if it's available, but if it's not, it will fall back to the local ones — because nothing is worse than a broken map.
The Live Countdown
The countdown to November 19th, 2026, was another fun feature to implement. The tricky part was avoiding hydration errors, as the server and the client had different time values. I handled it by using the mounted state to conditionally render the countdown on the client only. It also has a nice transition to the "GTA 6 IS OUT NOW" state after the release date has passed.
The Content Pipeline
So far, there have been 33 articles published on the site, ranging from pre-order guides and price speculations to the Rockstar union story and a GTA 6 clone game launching on Steam on the same day as the release. Every article starts as a research and writing session, then gets edited and published as an MDX file to the content/articles/ directory. The site automatically generates a sitemap, OpenGraph images (using next/og's ImageResponse), and JSON-LD structured data for each page, including NewsArticle, BreadcrumbList, VideoObject, and WebSite with SearchAction. This way, Google can index the site as a real publisher.
The CTA Buttons
The buttons on the homepage have a subtle scanline overlay and a light beam sweep animation on hover. The news button has a pink-purple glow, while the map button has a neon-blue one. All of it is done with CSS, no JavaScript needed. Sometimes the simplest animations are the most magical — especially when done with pseudo-elements.
Challenges & Lessons Learned
The map was a real challenge to build, as HTML5 Canvas has very limited built-in features, and I had to roll out a lot of custom logic to get the panning and zooming to feel right. It was especially challenging to get the cursor-based panning to behave nicely at different zoom levels. The coordinate system was also a pain to work with, as I had to convert between tile, world, and screen coordinates.
As mentioned before, the content creation was more important than the tooling for this project. The entire site was up and running within a week, but the real work started when I realized that the 33 articles I've written so far are more valuable than any fancy features. It's a weekend project, and I try to publish 1–2 articles a week. But the tooling for it was built in one weekend.
Tailwind v4 was a huge headache, as I started working on the project when the new version was still unstable. The migration from the config-file-based theming to the CSS-native @theme blocks broke most of the Stack Overflow answers, and I had to learn the new way the framework works. But once I got the hang of it, it was much easier — there's now a single source of truth for theming: the globals.css file.
No database was the right decision, as every competitor site I've seen so far used either a CMS or a database. I avoided both, and I'm glad I did — the articles are version-controlled, searchable (with grep), and there's nothing stopping me from adding a database in Phase 2 when the time comes.
What's Next
Phase 1 is done, the news section is up and running, the sitemap is indexed, and Google is sending traffic to the site. But the real work has just begun.
Phase 2 is the Empire Planner — a tool that will help users plan their criminal empire before the game's release. The interactive map is already live and fully functional, so now it's about layering tools on top of it. It all depends on what Trailer 3 will be about, as I'm trying to avoid building features that other sites will also have.
Phase 3 will be about combining the Empire Planner with the map, and Phase 4, which is a distant goal, will be about turning the project into a mobile app.
But for now, I'm focused on Phase 1.5 — writing more articles and building tools that don't yet exist. After all, that's what made this project worth doing in the first place: being able to provide an alternative perspective on GTA 6, one that's not driven by rumors or corporate interests.
LeonidaAtlas.com is a fan-made website and has no affiliation with Rockstar Games or Take-Two Interactive.