<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: AtlasTrack</title>
    <description>The latest articles on DEV Community by AtlasTrack (@atlastrackapp).</description>
    <link>https://dev.to/atlastrackapp</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4148173%2F397f3fca-6e1f-49eb-868c-fe42772c272a.jpg</url>
      <title>DEV Community: AtlasTrack</title>
      <link>https://dev.to/atlastrackapp</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/atlastrackapp"/>
    <language>en</language>
    <item>
      <title>Visualize your data live to reveal the multidimensional truth..</title>
      <dc:creator>AtlasTrack</dc:creator>
      <pubDate>Mon, 28 Sep 2026 23:11:40 +0000</pubDate>
      <link>https://dev.to/atlastrackapp/visualize-your-data-live-to-reveal-the-multidimensional-truth-ia3</link>
      <guid>https://dev.to/atlastrackapp/visualize-your-data-live-to-reveal-the-multidimensional-truth-ia3</guid>
      <description>&lt;p&gt;I just launched the public beta of AtlasTrack, a timeline and atlas tool I've been building solo. I want to share the one design decision that shaped the whole app.&lt;/p&gt;

&lt;p&gt;The problem&lt;br&gt;
Most timeline tools assume events happen on real-world dates. That falls apart quickly when you're mapping:&lt;/p&gt;

&lt;p&gt;a manga's story, where "time" is chapter numbers&lt;br&gt;
a fantasy world with its own invented way of counting years&lt;br&gt;
a company roadmap measured in quarters&lt;br&gt;
two historical figures you want to compare at "Day 1 of their career"&lt;br&gt;
I wanted a single engine that handled all of these.&lt;/p&gt;

&lt;p&gt;The approach: separate position from meaning&lt;br&gt;
An event's position in AtlasTrack is just a number. A separate object called a basis defines what that number means: its zero point, its units, and how it's displayed.&lt;/p&gt;

&lt;p&gt;Real-world basis → the number maps to actual dates&lt;br&gt;
Chapter basis → the number is a chapter&lt;br&gt;
Custom basis → whatever time system your fictional world uses&lt;br&gt;
Since events don't know or care which basis they're on, the rendering layer (timeline canvas, charts, map view, playback) works identically across all of them. And you can line up timelines from completely different eras side by side just by anchoring their bases.&lt;/p&gt;

&lt;p&gt;Other things I learned&lt;br&gt;
Lean data formats pay off. Events are stored as small modular text-based files rather than one giant blob, which keeps storage tiny and makes import/export easy.&lt;br&gt;
Offline-first changes everything. It's a PWA with a local encrypted vault, so most of the app works without a server. That simplified some things and made sync much harder.&lt;br&gt;
Flexible models invite new use cases. Once time was abstract, users started imagining things I hadn't planned, like power-scaling charts for anime characters.&lt;br&gt;
Stack&lt;br&gt;
React + TypeScript, Firebase (auth, storage, functions), installable PWA.&lt;/p&gt;

&lt;p&gt;Try it&lt;br&gt;
The beta is free and I'd genuinely love feedback, especially from anyone who's built timeline or offline-first apps: &lt;a href="https://atlastrack.org/about/" rel="noopener noreferrer"&gt;[link]&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;What's the weirdest time system you've had to model? I'd love to hear about it in the comments.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F4itmxzna0ykcqx527axi.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F4itmxzna0ykcqx527axi.png" alt=" " width="800" height="565"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>react</category>
      <category>data</category>
      <category>webdev</category>
    </item>
  </channel>
</rss>
