quickonboarddoc

desktop
pwa home page works on mobile
Dashboard in pwa
ai chat in pwa

Inspiration

Bringing Dead Docs to Life We’ve all lived through the nightmare of being the "new hire." You join a company, and you're immediately buried under a graveyard of PDF handbooks, obsolete wikis, and scattered Markdown files. You feel like a zombie wandering the halls, afraid to pester the senior devs with "stupid questions." For Kiroween, I wanted to build a Frankenstein's Monster of a solution: stitching together the best modern web tech (Next.js) with powerful AI (Gemini) to resurrect those dead documents into a living, breathing, interactive guide. Thus, quickOnboardDoc was summoned.

What it does

quickOnboardDoc is a secure, multi-tenant RAG (Retrieval-Augmented Generation) chatbot.

Ingest: Admins upload company docs (PDF, TXT).

Process: The system chunks and embeds this data into a vector store.

Resurrect: New hires chat with the bot. The system performs vector similarity searches to find the exact context and uses Google's Gemini API to generate a grounded answer.

PWA (Mobile Companion): Crucially, this is built as a Progressive Web App (PWA). New hires can install it directly to their phone's home screen, giving them a pocket-sized mentor that works just like a native mobile app.

How I built it

I stitched together a chimera of technologies to make this work:

The Body (Frontend): Next.js (App Router) for the framework, styled with Tailwind CSS and shadcn/ui. I used Framer Motion to give it that "Crypt Keeper" violet glow and haunting entrance animations for the Costume Contest bonus.

The Brain (AI & Logic): I used LangChain for document orchestration and Google Gemini 2.5 Flash for the intelligence.

The Spine (Data & State): Prisma + PostgreSQL handles the multi-tenant relational data, while TanStack Query manages the complex async state, persisting it to session storage so the app feels instant.

The Soul (Kiro): This project was built solo using Kiro. I utilized a strict global_steering_rules.md file to force Kiro to adhere to my specific stack (NextAuth, Prisma, TanStack Query) without needing constant correction.

Challenges I ran into

The PWA Configuration: Making the app installable and responsive across devices while maintaining the heavy animations of the "Crypt Keeper" theme was tricky. I had to carefully tune the manifest and service workers to ensure it felt like a native mobile app.

Hallucinations: Early versions of the bot would invent company holidays. I fixed this by implementing strict "System Instructions" via the Gemini API, forcing it to stick strictly to the retrieved context.

Accomplishments that I'm proud of

PWA Certification: Successfully making the app installable. You can add it to your iOS or Android home screen right now!

Kiro Steering: I effectively "cloned" myself by writing a Kiro Steering Doc. Kiro started writing code exactly the way I do, down to the specific import order.

The Aesthetic: It's rare to see enterprise software that looks cool. I love the high-contrast violet "dark mode" theme.

What I learned

building an idea and an mvp can be super hard but with agentic development and thanks to kiro streed.md I was able to spring up a demo(mvp) in less than a day and make changes faster for improvements and solving complex bugs was far easier because I had access to very smart agents and tools to debug and fix and be able to ship out solutions faster.