Modern Dashboard
ProjectsModern Dashboard
From natural language to interactive React components
Bahati AI is an enterprise-grade dashboard that fundamentally changes how users interact with data. Instead of static views, it utilizes Generative UI to dynamically render interactive React components based on natural language queries.
The Architecture The system is built as a high-performance monorepo:
- Frontend: Next.js 16 (React 19) with the React Compiler enabled for optimal rendering.
- Backend: A separate Hono server running on the Bun runtime to handle high-throughput API requests via oRPC.
- Data Layer: A unique Dual Database Strategy using Neon PostgreSQL—isolating Authentication data from Application data for strict security compliance.
AI Capabilities As seen in the demo, the "AI Assistant" isn't just a chatbot. It supports multi-model routing (switching between Gemini 2.0 Flash and Grok depending on complexity) and uses tool calling to perform actions like creating projects, managing users, or generating visual task breakdowns on the fly.
Customer:
Personal ProjectPeriod:
3 monthsPerformance:
AI EngineeringSystem ArchitectureFrontend PerformanceDevOps
Features:
Generative UI StreamingType-Safe oRPC LayerDual Neon Database ArchMulti-Model Routing
Warm Black (Bg)
#ea580c
#0d9488
#ef4444
The Dual-Server Dilemma
Running Next.js (Node) and Hono (Bun) as separate services created a challenge for sharing authentication sessions. The Solution: We architected a shared Auth Database and synchronized the BETTER_AUTH_SECRET across both environments, allowing the Next.js frontend to verify sessions server-side while the Hono API independently validates tokens.
Type-Safety Across Boundaries
With a monorepo structure separating API definitions from client consumption, maintaining types was critical. The Solution: We implemented oRPC, which exports the API router type definition from the server package directly to the client. This guarantees 100% type safety from the database query to the React component prop.
