<?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: Yanson Ferdinand</title>
    <description>The latest articles on DEV Community by Yanson Ferdinand (@yanson_ferdinand_1a9905de).</description>
    <link>https://dev.to/yanson_ferdinand_1a9905de</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%2F2781215%2F3f2cef1c-af43-4358-8f65-20c61505528e.jpg</url>
      <title>DEV Community: Yanson Ferdinand</title>
      <link>https://dev.to/yanson_ferdinand_1a9905de</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/yanson_ferdinand_1a9905de"/>
    <language>en</language>
    <item>
      <title>I Spent 8 Months Building a Dashboard Template (With a 2-Month Stretch Where I Just Stopped)</title>
      <dc:creator>Yanson Ferdinand</dc:creator>
      <pubDate>Thu, 16 Jul 2026 07:54:03 +0000</pubDate>
      <link>https://dev.to/yanson_ferdinand_1a9905de/i-spent-8-months-building-a-dashboard-template-with-a-2-month-stretch-where-i-just-stopped-3hni</link>
      <guid>https://dev.to/yanson_ferdinand_1a9905de/i-spent-8-months-building-a-dashboard-template-with-a-2-month-stretch-where-i-just-stopped-3hni</guid>
      <description>&lt;p&gt;Every admin dashboard I've ever built starts the exact same way: a sidebar, a header, a theme toggle, four stat cards, one data table. By the time that's done, I've already spent a week or two and haven't touched the actual feature I set out to build.&lt;/p&gt;

&lt;p&gt;So back in November 2025, I decided to just build the thing once, properly, and never do it again. That "once" ended up taking 8 months.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The part I don't usually admit in these posts&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Somewhere around month 3 or 4, I hit a wall. Not a technical one — a creative one. The components were working, the architecture was solid, but I had zero ideas for how the actual pages should look. I'd open Figma, stare at it, and close it again. This went on for about 1-2 months. No commits, no progress — the project just sat untouched while I was out of ideas.&lt;/p&gt;

&lt;p&gt;What got me moving again was lowering the bar. I stopped trying to make every page "impressive" and just started shipping pages that were functional and clean. Momentum came back once I stopped perfectionism-blocking myself.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What I ended up with&lt;/strong&gt;&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%2Fvs0ykwg1itxd4e12a6sx.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%2Fvs0ykwg1itxd4e12a6sx.png" alt=" " width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;React Router 7 (SPA mode) + React 19&lt;/li&gt;
&lt;li&gt;Tailwind CSS v4 — theming via CSS variables, no config file needed&lt;/li&gt;
&lt;li&gt;shadcn/ui + Radix UI primitives&lt;/li&gt;
&lt;li&gt;TypeScript throughout&lt;/li&gt;
&lt;li&gt;Redux Toolkit for theme/sidebar state&lt;/li&gt;
&lt;li&gt;Recharts + TanStack Table&lt;/li&gt;
&lt;li&gt;Framer Motion&lt;/li&gt;
&lt;/ul&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%2F2c63skt35zp5n2jj1777.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%2F2c63skt35zp5n2jj1777.png" alt=" " width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Dark mode isn't just a CSS filter slapped on top — every chart, table, and page was checked for contrast in both themes. It's also responsive down to 375px, not just the landing dashboard.&lt;/p&gt;

&lt;p&gt;20 pages total: 4 dashboard layouts (Overview, AI, Analytic, Logistics), plus the pages most templates skip entirely — a working email client UI, calendar, invoice page, file manager, chat, and the usual auth/profile/form pages.&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%2F1d08l0nkae42aqgdiq99.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%2F1d08l0nkae42aqgdiq99.png" alt=" " width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Live demo: &lt;a href="https://ferforge-ui.netlify.app/" rel="noopener noreferrer"&gt;https://ferforge-ui.netlify.app/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Honest notes (because I'd want to know this before clicking around): it's frontend-only. Mock data, no backend, no auth wired up — you bring your own API. It's also built on React Router 7, not Next.js, so if your stack is Next.js the components/styling port over fine but routing won't.&lt;/p&gt;

&lt;p&gt;It's up on Gumroad if you want the source: &lt;a href="https://yansenferd.gumroad.com/l/ferforge-ui" rel="noopener noreferrer"&gt;https://yansenferd.gumroad.com/l/ferforge-ui&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Would genuinely love feedback from other devs here — what do you always end up rebuilding for every dashboard project that templates never seem to include?&lt;/p&gt;

&lt;p&gt;Also open to freelance/contract work if you need something custom built — feel free to reach out at &lt;a href="mailto:yansenferdinand6@gmail.com"&gt;yansenferdinand6@gmail.com&lt;/a&gt;.&lt;/p&gt;

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