<?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: Folded</title>
    <description>The latest articles on DEV Community by Folded (@foldedweb).</description>
    <link>https://dev.to/foldedweb</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%2F4054557%2F6dc7fec8-fdc8-4c8b-bc48-cac3348d132d.jpg</url>
      <title>DEV Community: Folded</title>
      <link>https://dev.to/foldedweb</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/foldedweb"/>
    <language>en</language>
    <item>
      <title>I built a link-in-bio tool that gamifies your audience growth (with XP, ranks, and achievements)</title>
      <dc:creator>Folded</dc:creator>
      <pubDate>Thu, 30 Jul 2026 08:33:40 +0000</pubDate>
      <link>https://dev.to/foldedweb/i-built-a-link-in-bio-tool-that-gamifies-your-audience-growth-with-xp-ranks-and-achievements-m88</link>
      <guid>https://dev.to/foldedweb/i-built-a-link-in-bio-tool-that-gamifies-your-audience-growth-with-xp-ranks-and-achievements-m88</guid>
      <description>&lt;p&gt;Like most developers with a side project, I got tired of the same boring link-in-bio tools. You drop your Linktree in your Instagram bio, people click it, and... nothing. No data, no reward, no reason to come back.&lt;/p&gt;

&lt;p&gt;So I built &lt;a href="https://folded.sg" rel="noopener noreferrer"&gt;Folded&lt;/a&gt; — a link-in-bio that turns your audience growth into a game.&lt;/p&gt;

&lt;h2&gt;
  
  
  How it works
&lt;/h2&gt;

&lt;p&gt;Every time someone visits your Folded profile, you earn &lt;strong&gt;XP&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;XP unlocks &lt;strong&gt;ranks&lt;/strong&gt; — 15 tiers with unique badge artwork, from Stone all the way up to Apex. The system uses log-scale thresholds so early progress feels fast and rewarding, while the top ranks remain genuinely hard to reach.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Stone      → 0 XP
Seedling   → 500 XP
Woodcrest  → 1,500 XP
Iron       → 4,000 XP
Summit     → 8,000 XP
Guardian   → 15,000 XP
Spectre    → 30,000 XP
Navigator  → 60,000 XP
Vanguard   → 120,000 XP
Inferno    → 250,000 XP
Sovereign  → 500,000 XP
Warlord    → 1,000,000 XP
Eternal    → 2,500,000 XP
Ascendant  → 5,000,000 XP
Apex       → 10,000,000 XP
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;There are also &lt;strong&gt;20+ achievements&lt;/strong&gt; — badges you unlock for hitting milestones like getting your first 100 visitors, maintaining a 7-day streak, or referring 5 friends.&lt;/p&gt;

&lt;h2&gt;
  
  
  The tech stack
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;React 19&lt;/strong&gt; + &lt;strong&gt;Vite 8&lt;/strong&gt; — fast SPA&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Firebase&lt;/strong&gt; — Auth, Firestore, Hosting, Cloud Functions v2&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Capacitor&lt;/strong&gt; — wraps the web app into native Android and iOS apps&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Google AdSense&lt;/strong&gt; — for monetisation on free profiles&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;One tricky part was the mobile auth flow. &lt;code&gt;signInWithPopup&lt;/code&gt; completely breaks inside a Capacitor WebView (the OAuth popup can't return to the app). The fix is &lt;code&gt;signInWithRedirect&lt;/code&gt; + &lt;code&gt;getRedirectResult&lt;/code&gt; on native, with a platform check:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;isNative&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./lib/platform.js&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;handleGoogle&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;async &lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;isNative&lt;/span&gt;&lt;span class="p"&gt;())&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nf"&gt;signInWithRedirect&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;auth&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;googleProvider&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;result&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nf"&gt;signInWithPopup&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;auth&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;googleProvider&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
  &lt;span class="c1"&gt;// ...&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;And on mount, pick up the redirect result:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nf"&gt;useEffect&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;!&lt;/span&gt;&lt;span class="nf"&gt;isNative&lt;/span&gt;&lt;span class="p"&gt;())&lt;/span&gt; &lt;span class="k"&gt;return&lt;/span&gt;
  &lt;span class="nf"&gt;getRedirectResult&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;auth&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;then&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;async&lt;/span&gt; &lt;span class="nx"&gt;result&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;!&lt;/span&gt;&lt;span class="nx"&gt;result&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;return&lt;/span&gt;
    &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nf"&gt;loadOrCreateProfile&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;result&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;user&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
  &lt;span class="p"&gt;})&lt;/span&gt;
&lt;span class="p"&gt;},&lt;/span&gt; &lt;span class="p"&gt;[])&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  What's live
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;[x] XP + rank system&lt;/li&gt;
&lt;li&gt;[x] 20+ achievements with pop-in animations&lt;/li&gt;
&lt;li&gt;[x] Daily login streaks&lt;/li&gt;
&lt;li&gt;[x] Discover leaderboard (public, global)&lt;/li&gt;
&lt;li&gt;[x] QR code for your profile&lt;/li&gt;
&lt;li&gt;[x] Referral system (+XP for both sides)&lt;/li&gt;
&lt;li&gt;[x] Native Android + iOS via Capacitor&lt;/li&gt;
&lt;li&gt;[x] Dark/light mode&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Try it
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://folded.sg" rel="noopener noreferrer"&gt;folded.sg&lt;/a&gt; — free forever, no credit card needed.&lt;/p&gt;

&lt;p&gt;I'd love feedback from the dev.to community, especially on:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;What would make you actually use this instead of Linktree?&lt;/li&gt;
&lt;li&gt;What gamification mechanics are missing?&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Drop a comment below 👇&lt;/p&gt;




&lt;p&gt;&lt;em&gt;Justin · maker of Folded · &lt;a href="https://folded.sg" rel="noopener noreferrer"&gt;folded.sg&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;

</description>
      <category>showdev</category>
      <category>webdev</category>
      <category>react</category>
      <category>javascript</category>
    </item>
  </channel>
</rss>
