DEV Community: Ngbaronye Nmesirionye

Reworking My User Dashboard in Next.js: What I Broke and What I Fixed

Ngbaronye Nmesirionye — Thu, 16 Apr 2026 16:47:13 +0000

I spent this week doing something developers are often told not to do: I rewrote a perfectly functional feature.

The user dashboard for Pantero—the offline AI companion I'm building from my FUTO hostel room—worked. It showed the waitlist position. It displayed the referral link. It did its job.

But it felt wrong.

Slow. Clunky. Like it was fighting me every time I opened it. So I tore it down and rebuilt it in Next.js. Here's what I learned.

The Problem with the Old Dashboard

The original dashboard was built early in the project, back when I was still thinking in plain HTML and scattered JavaScript. It was a single, massive component with:

Mixed concerns (data fetching, UI rendering, state management all jammed together)
Poor mobile responsiveness
No loading states—just blank screens while data loaded
Hardcoded values that made updates painful

It "worked" for 10 users. At 187+ waitlisters, it was starting to show its cracks.

The Rebuild: Goals

I set three clear goals for the new dashboard:

Speed: Load fast, even on 3G.
Clarity: Users should instantly understand their waitlist position, referral stats, and next steps.
Maintainability: I should be able to add new features without breaking everything.

The Tech Approach

Since Pantero is already a Next.js app, I leaned into the framework's strengths:

Feature	Implementation
Data Fetching	Server Components for initial load, client-side fetch for real-time updates
State Management	React Context for global user state, `useState` for local UI
Loading States	`Suspense` boundaries with skeleton loaders
Styling	Tailwind CSS (already in the project)

The Hardest Part: Balancing Server and Client

The dashboard needs to show:

Static data (user's email, join date) → perfect for Server Components
Dynamic data (current waitlist position, referral count) → needs client-side updates

I kept running into hydration mismatches because I was mixing server-rendered content with client-updated numbers. The fix was simple once I understood it: keep the dynamic parts isolated in client components and pass static data as props from the server.


`jsx
// Server Component (app/dashboard/page.tsx)
export default async function DashboardPage() {
  const user = await getUser(); // server-side fetch

  return (
    <div>
      <h1>Welcome, {user.email}</h1>
      <WaitlistPosition initialPosition={user.position} />
      <ReferralStats initialCount={user.referralCount} />
    </div>
  );
}

// Client Component (components/WaitlistPosition.tsx)
'use client';

export function WaitlistPosition({ initialPosition }) {
  const [position, setPosition] = useState(initialPosition);

  // Refresh every 30 seconds
  useEffect(() => {
    const interval = setInterval(async () => {
      const newPosition = await fetchPosition();
      setPosition(newPosition);
    }, 30000);
    return () => clearInterval(interval);
  }, []);

  return <p>Your position: #{position}</p>;
}
`

This pattern saved me so much headache.

Before and After
Here's what the dashboard looked like before the rework:


![ ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ca8nv0kkh25ztl5kbxfb.png)

And here's the new version (still a work in progress):


![ ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0di2q0wrfowqnjbrg5zh.png)
The new dashboard:

Shows waitlist position prominently

Displays referral link with a one-click copy button

Includes a simple referral count tracker

Has a clear call-to-action to join the WhatsApp Channel

Loads with skeleton states instead of blank screens

What's Still Missing
Animated transitions between states

Dark mode toggle (coming soon)

Real-time referral notifications

Mobile bottom sheet for quick actions

The Bigger Picture
This dashboard rework isn't just about making things pretty. It's the foundation for everything coming next:

Verified credential generation

AI mentorship history

Community leaderboards

If the dashboard felt clunky at 187 users, it would have collapsed at 1,000. Now I have a solid base to build on.

Current Pantero Metrics
Metric  Count
Waitlist    187+
Countries   Nigeria, Ghana, Kenya
Dashboard rebuild time  4 days
Bugs fixed during rebuild   7
New bugs created    3 (working on it)
Join the Waitlist
If you're curious about the offline AI companion I'm building through all this Next.js chaos:

🔗 pantero.vercel.app

The waitlist is open. The dashboard is better. The build continues.

Have you ever rewritten a feature that "worked" because you knew it could be better? How did it go? Let's swap war stories in the comments.

From HTML to Next.js: The Painful (and Honest) Transition of a FUTO Undergrad

Ngbaronye Nmesirionye — Tue, 14 Apr 2026 07:37:33 +0000

I started my frontend journey like many developers: writing index.html, linking style.css, and maybe throwing in a script.js if I was feeling fancy.

It was simple. It was predictable. It was home.

Then I decided to learn Next.js.

The Wake-Up Call

I'm an undergraduate at FUTO, and I'm building an offline AI companion called Pantero. The waitlist is growing (187+ now), the offline AI core is stable, and the frontend is complete. But let me tell you—getting there involved a lot of pain.

Coming from plain HTML and CSS, Next.js felt like being handed the controls to a spaceship after only ever riding a bicycle. Suddenly there was file-based routing, Server Components, Client Components, and this mysterious 'use client' directive that I kept forgetting to add until my useState hooks exploded in my face[reference:0].

The Mistakes I Made (So You Don't Have To)

Mistake #1: Treating Next.js Like Plain HTML + React

I thought I could just drop my components anywhere and import react-router-dom like I used to. Wrong. Next.js has its own routing system. If you try to fight it, you'll spend more time debugging than building. I learned that the hard way[reference:1].

Mistake #2: Forgetting That Everything Is a Server Component by Default

In the App Router, every component is a Server Component unless you explicitly say otherwise. I kept trying to use useState and useEffect in components that were running on the server. The error messages were cryptic. The frustration was real[reference:2].

Mistake #3: Ignoring File-Based Routing

I thought, "How hard can routing be? I'll just make components and link them manually." Chaos. Some links worked, some didn't. Dynamic routes became unpredictable. SEO was broken. Once I embraced the /app folder structure, everything clicked[reference:3].

Why I'm Sticking With It

Despite the pain, Next.js is teaching me a better way to build. It's forcing me to think about performance, SEO, and user experience from the start. And for Pantero—where every kilobyte matters on a 3G connection—that's essential.

The Build Goes On

While I'm wrestling with Server Actions and trying to understand caching, Pantero keeps moving forward:

🚀 187+ waitlist members
🌍 3+ countries (Nigeria, Ghana, Kenya)
✅ Offline AI core stable and running entirely in-browser

Join the Waitlist

If you're a developer who's been through this transition (or you're in the middle of it right now), I'd love to hear your story. And if you're curious about what I'm building through all this struggle:

🔗 pantero.vercel.app

The waitlist is open. The build continues. The pain is real—but so is the progress.

What was your biggest struggle when you first moved from plain HTML/CSS to a real framework? Let's commiserate in the comments.

No Internet? No Problem. I Built an AI That Works Offline from My Hostel Room

Ngbaronye Nmesirionye — Mon, 13 Apr 2026 11:57:49 +0000

I'm a student at the Federal University of Technology, Owerri (FUTO). Between lectures, assignments, and the occasional power outage, I've spent the last three months building something I believe can change how young Africans learn tech skills.

It's called Pantero.

The Problem: Ambition vs. Infrastructure

Here's a scene that plays out daily across Nigeria:

A student finds a great online course. They're excited. They start learning. Then the data finishes. Or the network drops. The momentum dies. The tab gets closed. And the dream of becoming a developer gets pushed to "someday."

I've lived this. And I knew there had to be a better way.

The Solution: An AI Mentor That Works Offline

What if you had a personal mentor that:

Runs entirely in your browser
Works without an internet connection after the first load
Guides you from zero to job-ready skills
Never judges you for asking the same question twice

That's Pantero. The core idea is simple but technically ambitious: offline-first AI mentorship for African youth.

The Tech Stack (For the Curious)

Layer	Technology
Frontend	React + TypeScript + Tailwind
AI Engine	Local-first models running in the browser
Hosting	Vercel
State Management	React Context + LocalStorage
Build Tool	Vite (bootstrapped with Lovable)

The Hardest Part: Offline AI

The offline AI integration was the biggest technical challenge. I needed models that were:

Small enough to load quickly on 3G
Powerful enough to provide real mentorship value
Capable of running entirely client-side

After testing several approaches, I landed on a combination of quantized models and intelligent caching. The AI runs in your browser, not on a server. Your data never leaves your device. And it works even when you're offline.

Where We Are Now

Pantero is pre-launch. The frontend is complete. The offline AI core is live for testing.

Current metrics:

🚀 187+ waitlist members
🌍 3+ countries (Nigeria, Ghana, Kenya)
🛠️ 12+ early testers

What I've Learned So Far

Build for the reality, not the ideal. Assuming everyone has fiber internet is a mistake. Offline-first isn't a feature—it's a necessity.
Share early, share often. Posting updates on Indie Hackers and WhatsApp has brought more valuable feedback than any closed-door development.
Your constraints are your differentiator. Being a student with limited resources forced me to keep Pantero lean and focused. That's now a strength.

What's Next (The Roadmap)

[ ] Polish the AI mentorship flows
[ ] Add verified credential generation
[ ] Open beta access for waitlist members
[ ] Public launch on Product Hunt

Let's Connect

I'm building Pantero in public. If you're a developer, a student, or just curious about offline AI, I'd love to hear from you.

🔗 Join the waitlist
💬 Follow the build: I'm posting weekly updates in this series

Have you tried building offline-first experiences? What challenges did you face? Let's discuss in the comments.