DEV Community: Ngbaronye Nmesirionye

Building a Verified AI Tutor: How I Built UniUI with 50+ Academic Engines and Socratic Reasoning

Ngbaronye Nmesirionye — Tue, 25 Aug 2026 02:27:03 +0000

TL;DR: I built an AI tutor that doesn't guess. It verifies. Here is how I built it with 50+ academic engines, Socratic reasoning, and offline-first PWA. 190+ students are using it.

🎯 The Problem with Generic AI Tutors

ChatGPT gives you an answer. You trust it. You fail your exam.

Why? Because ChatGPT guesses. It doesn't compute. It doesn't verify. It doesn't know Nigerian curricula, engineering thermodynamics, or organic chemistry pathways.

Nigerian university students have a broken academic support system. Here's what we're up against:

1.5 million university students across 200+ institutions
< 40% pass rate for professional exams and core courses
1000+ PDFs per course—unorganized, unsearchable
₦50,000–200,000 per year spent on overpriced tutors and materials
80% of exam questions are repeated from past papers—but nobody indexes them

Generic AI tools don't solve this. They make it worse—students trust hallucinated answers.

So I built UniUI.

UniUI: A strict, Socratic AI tutor for Nigerian university students. Every answer is verified by 50+ academic engines. Wrong answers get corrected. Vague questions get rejected.

Live at: app.uniui.com.ng

🏗️ Architecture Overview

UniUI is built on a modern AI stack designed for reliability, verification, and offline-first accessibility.

Tech Stack

Layer	Technology	Purpose
API	FastAPI (Python)	Backend logic, routing, LLM orchestration
LLM	Groq (primary), OpenRouter (fallback)	Answer generation
Verification	50+ academic engines (SymPy, ChemPy, PyNiteFEA, etc.)	Answer verification
Vector DB	Qdrant Cloud	Semantic search for RAG
Keyword Search	Meilisearch	Hybrid search (sparse + dense)
Database	Neon (PostgreSQL)	User data, conversations, notes
Cache	Redis	Rate limiting, session cache
Frontend	Next.js 14 (App Router) + Tailwind CSS	User interface
Offline	PWA + Service Worker + IndexedDB	Offline-first experience
Encryption	TweetNaCl + localForage	Client-side encrypted storage
Hosting	Hetzner VPS (4 vCPU, 8GB RAM)	Self-hosted backend

Data Flow

flowchart TD
    A[User Question] --> B[FastAPI Router]
    B --> C{Stage 1: School Notes}
    C -->|Found| D[Qdrant Vector Search]
    C -->|Not Found| E{Stage 2: Curriculum}
    E -->|Found| D
    E -->|Not Found| F{Stage 3: References}
    F -->|Found| D
    F -->|Not Found| G{Stage 4: Internet}
    G -->|Found| H[LLM + Context]
    G -->|Not Found| I{Stage 5: Direct LLM}
    D --> H
    H --> J[50+ Verification Engines]
    J --> K{Verified?}
    K -->|Yes| L[Return Verified Answer]
    K -->|No| M[Return Corrected Answer + Explanation]

⚙️ The Verification Engine – 50+ Academic Validators

This is UniUI's secret weapon. Every AI-generated answer is cross-checked by subject-specific engines before being returned to the student.

Verification Pipeline

LLM generates answer
Detect subject type (math, physics, chemistry, etc.)
Route to appropriate engines
Run computations
Compare LLM output vs engine output
If mismatch → correct the answer
Return verified result + explanation

Subject Engines by Faculty

Mathematics

sympy – Symbolic mathematics (calculus, algebra, equations)
scipy – Numerical computing, linear algebra
numpy – Array operations, matrix math
mpmath – High-precision arithmetic
sage (optional) – Advanced mathematical computing
pydantic – Type validation for mathematical inputs

Physics

pint – Unit-aware physics calculations
sympy.physics – Classical mechanics, quantum, relativity
scipy – Differential equation solvers
pandas – Data analysis (experimental physics)
openstax – Physics reference data
astropy – Astrophysics calculations
qiskit – Quantum computing (optional)

Chemistry

chempy – Stoichiometry, equilibrium, thermodynamics
rdkit – Molecular fingerprints, SMILES (requires Python 3.10-3.12)
scipy – Numerical methods for chemistry
openbabel (optional) – Molecular file format conversion
pymatgen – Materials science

Engineering

pynitefea – Finite element analysis
pandapower – Power systems analysis
python-control – Control systems engineering
coolprop – Fluid properties (thermodynamics)
py_engineers – Structural analysis
openmc – Nuclear engineering (optional)

Medicine / Healthcare

pynt – Medical image reconstruction
pypbpk – Physiologically based pharmacokinetic modeling
glucostats – Glucose monitoring and analytics
biomechanics – Motion analysis
opencv – Medical image processing
dicom – DICOM file handling

Agriculture

dssattools – Crop simulation
apsim – Agricultural production systems
farmingpy – Precision agriculture
geopandas – Geospatial simulation
hydropy – Hydrology models

Law

pythen – Legal reasoning engine
lexnlp – Legal text analysis, entity extraction
nltk – NLP for legal documents
spacy – Legal text processing

Verification Flow Example

Here's an example of how verification works for a math question:

# acadermic_pipeline/backend/verifiers/math_verifier.py

import sympy as sp
import numpy as np
from typing import Dict, Any, Optional

def verify_math_answer(question: str, llm_answer: str) -> Dict[str, Any]:
    """
    Verify a mathematics answer using SymPy.
    Returns: {
        "verified": bool,
        "correct_answer": str,
        "derivation": str,
        "confidence": float
    }
    """
    try:
        # Step 1: Parse question using LLM to extract math expression
        # Step 2: Convert to SymPy expression
        # Step 3: Compute the actual answer
        # Step 4: Compare with LLM answer
        # Step 5: Return verification result

        # Example: Calculate integral of x^2
        x = sp.Symbol('x')
        expression = sp.integrate(x**2, x)  # Returns x**3/3

        return {
            "verified": True,
            "correct_answer": str(expression),
            "derivation": "∫x²dx = x³/3",
            "confidence": 1.0
        }
    except Exception as e:
        return {
            "verified": False,
            "correct_answer": None,
            "error": str(e),
            "confidence": 0.0
        }

🔍 RAG Pipeline – 5-Stage Retrieval

UniUI uses a 5-stage cascade retrieval system to find the most relevant content before generating an answer.

Stage 1: School Notes (Vector Search)

# academic_pipeline/backend/retrieval/vector_search.py

def vector_search(query: str, faculty: Optional[str] = None) -> List[Dict]:
    """
    Search Qdrant for semantically similar content.
    """
    # Generate embedding for the query
    embedding = get_embedding(query)

    # Build filter (faculty, course_code, etc.)
    filter_condition = None
    if faculty:
        filter_condition = {
            "must": [{"key": "faculty", "match": {"value": faculty}}]
        }

    # Search Qdrant
    results = qdrant_client.search(
        collection_name="uniui_documents",
        query_vector=embedding,
        query_filter=filter_condition,
        limit=10,
        score_threshold=0.7
    )

    return results

Stage 2: Curriculum (Keyword Search)

# academic_pipeline/backend/retrieval/keyword_search.py

def keyword_search(query: str) -> List[Dict]:
    """
    Search Meilisearch for keyword matches.
    """
    results = meilisearch_client.index("curriculum").search(
        query,
        {
            "attributesToRetrieve": ["title", "content", "course_code"],
            "limit": 10
        }
    )
    return results["hits"]

Stage 3: Academic References (Hybrid)

# academic_pipeline/backend/retrieval/hybrid_search.py

def hybrid_search(query: str) -> List[Dict]:
    """
    Combine vector + keyword search using Reciprocal Rank Fusion (RRF).
    """
    vector_results = vector_search(query)
    keyword_results = keyword_search(query)

    # RRF fusion (alpha = 60 for best results)
    fused = reciprocal_rank_fusion(vector_results, keyword_results, alpha=60)

    return fused[:10]

Stage 4: Internet (Fallback)

# academic_pipeline/backend/retrieval/internet_search.py

def internet_search(query: str) -> List[Dict]:
    """
    Search the internet using Exa or SerpAPI.
    """
    try:
        # Use Exa (AI-powered semantic search)
        results = exa_client.search(
            query,
            type="neural",
            num_results=5
        )
        return results["results"]
    except Exception:
        # Fallback: use Jina Reader
        return jina_search(query)

Stage 5: Direct LLM (Last Resort)

# academic_pipeline/backend/retrieval/direct_llm.py

def direct_llm(query: str) -> str:
    """
    Fallback: generate answer directly from LLM (no context).
    """
    response = groq_client.chat.completions.create(
        model="llama-3.3-70b-versatile",
        messages=[
            {"role": "system", "content": "You are a strict academic tutor. Answer accurately."},
            {"role": "user", "content": query}
        ]
    )
    return response.choices[0].message.content

💻 Full Implementation: End-to-End API

FastAPI Router

# academic_pipeline/backend/routers/ask_router.py

from fastapi import APIRouter, Depends, HTTPException
from pydantic import BaseModel
from typing import List, Optional
from academic_pipeline.backend.verifiers import verify_answer
from academic_pipeline.backend.retrieval import hybrid_search
from academic_pipeline.backend.llm import call_llm

router = APIRouter()

class AskRequest(BaseModel):
    question: str
    faculty: Optional[str] = None
    course_code: Optional[str] = None

class AskResponse(BaseModel):
    answer: str
    verified: bool
    verified_answer: Optional[str] = None
    sources: List[Dict[str, str]]
    engine_used: str
    confidence: float

@router.post("/ask", response_model=AskResponse)
async def ask_question(request: AskRequest):
    """
    Main endpoint for asking questions.
    1. Retrieve context (5-stage cascade)
    2. Generate LLM answer with context
    3. Verify answer using academic engines
    4. Return verified result
    """
    # Step 1: Retrieve context
    contexts = hybrid_search(request.question)

    if not contexts:
        # Stage 5: Direct LLM (no context)
        llm_answer = await direct_llm(request.question)
        sources = []
    else:
        # Stage 1-4: LLM with context
        llm_answer, sources = await generate_with_context(
            request.question, contexts
        )

    # Step 2: Verify answer
    verification_result = await verify_answer(
        question=request.question,
        answer=llm_answer,
        faculty=request.faculty
    )

    # Step 3: Build response
    return AskResponse(
        answer=verification_result.get("answer", llm_answer),
        verified=verification_result.get("verified", False),
        verified_answer=verification_result.get("correct_answer"),
        sources=sources,
        engine_used=verification_result.get("engine_used", "groq"),
        confidence=verification_result.get("confidence", 0.0)
    )

Verification Integration

# academic_pipeline/backend/verifiers/__init__.py

from typing import Dict, Any, Optional
import importlib
import inspect

# Registry of all verifiers
VERIFIERS = {}

def register_verifier(subject: str):
    """Decorator to register verifiers."""
    def decorator(func):
        VERIFIERS[subject] = func
        return func
    return decorator

async def verify_answer(
    question: str,
    answer: str,
    faculty: Optional[str] = None
) -> Dict[str, Any]:
    """
    Verify an answer using the appropriate academic engine.
    """
    # Detect subject from question
    subject = detect_subject(question, faculty)

    # Get the verifier function
    verifier = VERIFIERS.get(subject)
    if not verifier:
        return {
            "verified": False,
            "answer": answer,
            "engine_used": "none",
            "confidence": 0.0
        }

    # Run verification
    try:
        result = await verifier(question, answer)
        result["engine_used"] = subject
        return result
    except Exception as e:
        return {
            "verified": False,
            "answer": answer,
            "engine_used": subject,
            "confidence": 0.0,
            "error": str(e)
        }

Subject Detection

# academic_pipeline/backend/verifiers/subject_detection.py

KEYWORDS = {
    "math": ["integrate", "derivative", "calculus", "matrix", "equation"],
    "physics": ["force", "velocity", "energy", "momentum", "gravity"],
    "chemistry": ["molecule", "bond", "reaction", "acid", "base"],
    "engineering": ["beam", "stress", "load", "circuit", "voltage"],
    "medicine": ["cell", "tissue", "disease", "symptom", "blood"],
    "agriculture": ["crop", "soil", "water", "yield", "fertilizer"],
    "law": ["act", "section", "legal", "court", "contract"]
}

def detect_subject(question: str, faculty: Optional[str] = None) -> str:
    """
    Detect the subject of a question using keyword matching.
    """
    if faculty and faculty in KEYWORDS:
        return faculty

    question_lower = question.lower()
    scores = {}

    for subject, keywords in KEYWORDS.items():
        count = sum(1 for kw in keywords if kw in question_lower)
        if count > 0:
            scores[subject] = count

    if not scores:
        return "general"

    # Return the subject with the highest keyword score
    return max(scores, key=scores.get)

🚀 Frontend: The User Experience

UniUI's frontend is built with Next.js 14 and uses a strict, Socratic UI design.

Core Component: Ask Page

// app/ask/page.tsx

'use client'

import { useState } from 'react'
import { useRouter } from 'next/navigation'
import { api } from '@/lib/api'
import { Mascot } from '@/components/Mascot'
import { StreamingText } from '@/components/StreamingText'

export default function AskPage() {
  const [question, setQuestion] = useState('')
  const [answer, setAnswer] = useState('')
  const [loading, setLoading] = useState(false)
  const router = useRouter()

  const handleAsk = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!question.trim()) return

    setLoading(true)
    setAnswer('')

    try {
      // Use streaming for real-time answers
      const response = await api.askStream({
        question: question,
        faculty: 'engineering'
      })

      // Stream the answer token by token
      const reader = response.body?.getReader()
      const decoder = new TextDecoder()

      while (true) {
        const { done, value } = await reader!.read()
        if (done) break

        const chunk = decoder.decode(value)
        const lines = chunk.split('\n')
        for (const line of lines) {
          if (line.startsWith('data: ')) {
            const data = line.slice(6)
            if (data === '[DONE]') break
            try {
              const parsed = JSON.parse(data)
              setAnswer((prev) => prev + parsed.token)
            } catch {
              // Ignore parse errors
            }
          }
        }
      }
    } catch (error) {
      console.error('Error:', error)
      setAnswer('Sorry, I encountered an error. Please try again.')
    } finally {
      setLoading(false)
    }
  }

  return (
    <div className="container mx-auto px-4 py-8 max-w-3xl">
      {/* Mascot with strict tone */}
      <Mascot state={loading ? 'thinking' : 'idle'} />

      <h1 className="text-2xl font-bold text-white mb-2">
        Ask a Question
      </h1>
      <p className="text-gray-400 mb-6">
        Be precise. Vague questions will be rejected.
      </p>

      <form onSubmit={handleAsk} className="space-y-4">
        <div className="flex gap-4">
          <textarea
            className="flex-1 bg-gray-900 text-white rounded-lg px-4 py-3 border border-gray-700 focus:border-[#7c3aed] focus:outline-none resize-none"
            placeholder="What do you want to learn?"
            rows={3}
            value={question}
            onChange={(e) => setQuestion(e.target.value)}
            disabled={loading}
          />
        </div>

        <button
          type="submit"
          className={`w-full bg-[#7c3aed] text-white font-medium py-3 rounded-lg transition-colors ${
            loading ? 'opacity-50 cursor-not-allowed' : 'hover:bg-[#6d28d9]'
          }`}
          disabled={loading}
        >
          {loading ? 'Thinking...' : 'Ask'}
        </button>
      </form>

      {answer && (
        <div className="mt-6 p-4 bg-gray-900 rounded-lg border border-gray-700">
          <h3 className="text-sm text-gray-400 mb-2">Answer:</h3>
          <div className="prose prose-invert max-w-none">
            <StreamingText text={answer} />
          </div>
        </div>
      )}
    </div>
  )
}

Streaming Text Component

// components/StreamingText.tsx

'use client'

import { useEffect, useRef, useState } from 'react'

export function StreamingText({ text }: { text: string }) {
  const [displayText, setDisplayText] = useState('')
  const indexRef = useRef(0)

  useEffect(() => {
    // Reset when text changes
    if (text !== displayText) {
      indexRef.current = 0
      setDisplayText('')
    }

    // Animate token by token
    const interval = setInterval(() => {
      if (indexRef.current < text.length) {
        setDisplayText((prev) => prev + text[indexRef.current])
        indexRef.current += 1
      } else {
        clearInterval(interval)
      }
    }, 15) // 15ms per token = ~66 tokens/second

    return () => clearInterval(interval)
  }, [text])

  return (
    <div className="whitespace-pre-wrap">
      {displayText}
      <span className="animate-pulse">▌</span>
    </div>
  )
}

🏆 Offline-First Architecture

Nigerian internet is unreliable. Students cannot depend on being online.

Service Worker (PWA)

// public/sw.js (generated by next-pwa)

// Cache all assets for offline use
const CACHE_NAME = 'uniui-v1'
const ASSETS_TO_CACHE = [
  '/',
  '/ask',
  '/conversations',
  '/_next/static/...',
  '/icon-192.png',
  '/icon-512.png'
]

// Install: cache assets
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then((cache) => cache.addAll(ASSETS_TO_CACHE))
      .then(() => self.skipWaiting())
  )
})

// Activate: clean old caches
self.addEventListener('activate', (event) => {
  event.waitUntil(
    caches.keys().then((cacheNames) => {
      return Promise.all(
        cacheNames
          .filter((name) => name !== CACHE_NAME)
          .map((name) => caches.delete(name))
      )
    })
  )
})

// Fetch: serve from cache, fallback to network
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request)
      .then((response) => response || fetch(event.request))
      .catch(() => {
        // Offline fallback
        if (event.request.mode === 'navigate') {
          return caches.match('/offline')
        }
        return new Response('Offline', { status: 503 })
      })
  )
})

Encrypted Local Storage

// lib/encryption.ts

import nacl from 'tweetnacl'
import { encodeBase64, decodeBase64 } from 'tweetnacl-util'

// Derive encryption key from passphrase
export function deriveKey(passphrase: string): Uint8Array {
  const encoder = new TextEncoder()
  const data = encoder.encode(passphrase)
  return nacl.hash(data).slice(0, 32) // PBKDF2 would be better
}

// Encrypt data
export function encryptData(obj: any, key: Uint8Array): string {
  const json = JSON.stringify(obj)
  const data = new TextEncoder().encode(json)
  const nonce = nacl.randomBytes(24)
  const encrypted = nacl.secretbox(data, nonce, key)
  const combined = new Uint8Array(nonce.length + encrypted.length)
  combined.set(nonce)
  combined.set(encrypted, nonce.length)
  return encodeBase64(combined)
}

// Decrypt data
export function decryptData(encryptedB64: string, key: Uint8Array): any {
  const combined = decodeBase64(encryptedB64)
  const nonce = combined.slice(0, 24)
  const encrypted = combined.slice(24)
  const decrypted = nacl.secretbox.open(encrypted, nonce, key)
  if (!decrypted) throw new Error('Decryption failed')
  const json = new TextDecoder().decode(decrypted)
  return JSON.parse(json)
}

// Store encrypted data in IndexedDB
export async function storeEncrypted(key: string, data: any, passphrase: string) {
  const derivedKey = deriveKey(passphrase)
  const encrypted = encryptData(data, derivedKey)
  await localforage.setItem(`enc_${key}`, encrypted)
}

// Load encrypted data from IndexedDB
export async function loadEncrypted(key: string, passphrase: string) {
  const encrypted = await localforage.getItem<string>(`enc_${key}`)
  if (!encrypted) return null
  const derivedKey = deriveKey(passphrase)
  try {
    return decryptData(encrypted, derivedKey)
  } catch {
    return null // Wrong passphrase
  }
}

📊 Performance Results

Metric	Performance
Answer latency	1.5s average (LLM generation)
Verification latency	200ms additional
Total time	1.7s from question to verified answer
RAG retrieval	150ms (Qdrant + Meilisearch)
Concurrent users	1000 tested
Offline cache size	< 50MB per user
Encryption overhead	< 5ms per operation

🧠 Lessons Learned

What Worked

Hybrid search (vector + keyword) improved retrieval quality by 40%
Circuit breakers prevented API cascading failures
Client-side encryption built trust with privacy-conscious users
Socratic UI (strict tone) reduced vague questions by 70%
Offline-first kept users engaged during network outages

What I'd Do Differently

Start with monorepo from day 1 (backend + frontend)
Use Docker for consistent development environments
Write integration tests before feature development
Set up Sentry earlier for error tracking

🚀 Try It Yourself

UniUI is live at app.uniui.com.ng

For students in Federal University of Technology Owerri
It will expand to the whole Southern Nigeria Soon

🏁 Conclusion

UniUI is a platform that proves you can build a verified AI tutor without a massive team. With modern AI tools, open-source libraries, and a clear product vision, a single founder can build something that solves a real problem for 1.5 million students.

The stack works. The verifications work. The students are using it.

Next Steps

Scale to 10,000 users
Partner with 5 Nigerian universities
Build institutional licensing
Add more verification engines

🔗 Connect

UniUI Website: app.uniui.com.ng
Twitter/X: @UniUI
GitHub: github.com/yourusername/Panther0508

If you're building in EdTech, let's connect. Drop a comment below.

Built with ❤️ for Nigerian students. Because learning shouldn't be a struggle.

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.