<?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>Forem: Archit Gopal</title>
    <description>The latest articles on Forem by Archit Gopal (@architrixs).</description>
    <link>https://forem.com/architrixs</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.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F727328%2F8793bf74-d77f-4cec-b334-ef219127211f.jpeg</url>
      <title>Forem: Archit Gopal</title>
      <link>https://forem.com/architrixs</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/architrixs"/>
    <language>en</language>
    <item>
      <title>Terra Nova: A Cinematic Travel App from Scratch with Uno Platform</title>
      <dc:creator>Archit Gopal</dc:creator>
      <pubDate>Fri, 05 Dec 2025 04:57:22 +0000</pubDate>
      <link>https://forem.com/architrixs/terra-nova-a-cinematic-travel-app-from-scratch-with-uno-platform-244i</link>
      <guid>https://forem.com/architrixs/terra-nova-a-cinematic-travel-app-from-scratch-with-uno-platform-244i</guid>
      <description>&lt;p&gt;&lt;em&gt;This is a submission for the &lt;a href="https://dev.to/challenges/unoplatform"&gt;AI Challenge for Cross-Platform Apps&lt;/a&gt; - WOW Factor&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  What I Built
&lt;/h2&gt;

&lt;p&gt;I built &lt;strong&gt;Terra Nova&lt;/strong&gt;, a cinematic travel discovery application designed to bridge the gap between utility booking apps and immersive travel journalism.&lt;/p&gt;

&lt;p&gt;Most travel apps are just scrolling lists of thumbnails. I wanted to build something that felt like holding a high-end magazine. I chose a &lt;strong&gt;"National Geographic meets Airbnb"&lt;/strong&gt; theme, focusing on:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Destination as UI:&lt;/strong&gt; The destination image &lt;em&gt;is&lt;/em&gt; the interface, not just a decoration.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Cinematic Dark Mode:&lt;/strong&gt; A layout that prioritizes content popping against deep black gradients.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Editorial Typography:&lt;/strong&gt; Using crisp, high-contrast text hierarchies to mimic the look of luxury print media.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Demo
&lt;/h2&gt;

&lt;p&gt;Here is &lt;strong&gt;Terra Nova&lt;/strong&gt; in action. Notice the smooth transitions and the editorial layout style.&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.amazonaws.com%2Fuploads%2Farticles%2F39jiqetqa3vx2umgkttb.gif" 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.amazonaws.com%2Fuploads%2Farticles%2F39jiqetqa3vx2umgkttb.gif" alt="terra_nova" width="560" height="379"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Links:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Source Code:&lt;/strong&gt; &lt;a href="https://github.com/Architrixs/TerraNova_uno" rel="noopener noreferrer"&gt;https://github.com/Architrixs/TerraNova_uno&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Cross-Platform Magic
&lt;/h2&gt;

&lt;p&gt;This app runs natively on &lt;strong&gt;Windows&lt;/strong&gt; and &lt;strong&gt;WebAssembly (Web)&lt;/strong&gt; from a single shared C# and XAML codebase.&lt;/p&gt;

&lt;p&gt;The "Magic" for me was the &lt;strong&gt;Layout Engine&lt;/strong&gt;.&lt;br&gt;
Usually, getting a full-screen image with a gradient overlay to look identical on a Windows Desktop app and a Web Browser requires fighting with CSS or platform-specific hacks. With Uno Platform, I defined my &lt;code&gt;Grid&lt;/code&gt; and &lt;code&gt;LinearGradientBrush&lt;/code&gt; &lt;strong&gt;once&lt;/strong&gt; in XAML, and it rendered pixel-perfectly on both targets immediately.&lt;/p&gt;

&lt;h2&gt;
  
  
  Interactive Features
&lt;/h2&gt;

&lt;p&gt;The app is built around a tactile &lt;strong&gt;Discovery Flow&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;The Infinite Carousel:&lt;/strong&gt; I implemented a full-screen &lt;code&gt;FlipView&lt;/code&gt; that allows users to "swipe" through countries like a photo album.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Smart Overlays:&lt;/strong&gt; A "Vignette" gradient ensures that white text remains readable even when the background photo is bright (like snow in Canada), keeping the interaction accessible.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Editorial Details:&lt;/strong&gt; The information (Price, Rating, Title) is laid out with specific letter spacing and weighting to create a "cover story" effect for each location.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  The Wow Factor
&lt;/h2&gt;

&lt;p&gt;I am most proud of the &lt;strong&gt;Immersive Editorial Flow&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Instead of a busy dashboard, I built a carousel where the &lt;strong&gt;destination itself is the UI&lt;/strong&gt;. By pairing full-bleed imagery with &lt;strong&gt;typography-driven layouts found in luxury travel editorials&lt;/strong&gt;, the app creates a sense of wanderlust that standard grids cannot match. The "Wow" moment comes from the &lt;strong&gt;immersive discovery flow&lt;/strong&gt;—swiping feels less like browsing software and more like turning the pages of a premium travel magazine.&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.amazonaws.com%2Fuploads%2Farticles%2F35hofl9dpt8fsvhto7s3.gif" 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.amazonaws.com%2Fuploads%2Farticles%2F35hofl9dpt8fsvhto7s3.gif" alt="Hot_design" width="600" height="439"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;(I also used the Uno Hot Design to tweak the typography weights in real-time to get the editorial look just right!)&lt;/em&gt;&lt;/p&gt;

</description>
      <category>devchallenge</category>
      <category>unoplatformchallenge</category>
      <category>dotnet</category>
      <category>crossplatform</category>
    </item>
  </channel>
</rss>
