🌌 Knowledge Bank Engine

A space-themed, AI-powered knowledge management platform — built with Next.js 16, React 19, Firebase Auth, and a deep-space glassmorphism aesthetic.

📑 Table of Contents

• Overview
• Live Demo & Repository
• Features
• Tech Stack
• Project Structure
• Getting Started
• Environment Variables
• API Reference
• Design System
• Deployment
• Feature Roadmap
• Contributing

🚀 Overview

Knowledge Bank Engine is a production-ready frontend platform that brings together a rich article library, an AI-powered chatbot assistant, and Firebase-backed authentication — all wrapped in a stunning deep-space visual theme.

The platform is backend-agnostic by design: all API endpoints are mock-ready stubs waiting for your own server. Swap in your backend URL, connect Firebase, and you're live.

At a glance:

🔗 Live Demo & Repository

✨ Features

🎨 Visual & UI

• Parallax Starfield — animated deep-space background with smooth parallax scrolling
• 3D Planet Model — interactive planet visualization on the hero section
• Glassmorphism Panels — frosted glass cards with glow effects throughout the UI
• Gradient Text & Neon Accents — purple (#7f5af0) and cyan highlights on interactive elements
• Smooth Transitions — fade-in, slide-in, and hover animations across all pages

📚 Article Explorer

• Responsive Grid Layout — adapts from 1-column (mobile) to multi-column (desktop)
• Real-time Search — instant filtering across article title and description
• Tag-based Filtering — multi-select category tags with a clear-filters option
• Infinite Scroll — seamless pagination as you browse
• Article Modal — full content view with metadata, including authenticated-only PDF download

💬 AI Chatbot

• Slide-in Drawer — smooth right-side animation, non-blocking UI
• Source Attribution — clickable references to specific articles behind each response
• Suggested Follow-ups — context-aware next questions
• Conversation History — persistent within session with auto-scroll

🔐 Authentication

• Email / Password Sign-up & Sign-in
• Google OAuth — one-click social login via Firebase
• Password Reset Flow — email-based security code verification
• Protected Routes — download and premium features gated behind auth
• User Profile Dropdown — email display + sign-out in the navbar

📱 Responsive Design

Minimum touch target size: 48×48px across all interactive elements.

⚡ Performance & Security

• Next.js automatic code splitting and lazy loading
• Firebase ID token verification for authenticated API calls
• XSS prevention and CORS handling baked in
• Core Web Vitals optimized — zero CLS, fast FCP/LCP
• Geist font optimization via Next.js font loader

🛠 Tech Stack

📁 Project Structure

knowledge-bank-engine/
│
├── 📄 Documentation
│   ├── START_HERE.txt          ← Entry point overview
│   ├── README.md               ← Full reference docs
│   ├── QUICKSTART.md           ← 5-minute setup guide
│   ├── INSTALLATION.md         ← Detailed installation steps
│   ├── FEATURES.md             ← Complete feature catalogue
│   ├── PROJECT_STRUCTURE.md    ← Architecture walkthrough
│   ├── DEPLOYMENT.md           ← Production deployment guide
│   ├── CONTRIBUTING.md         ← Contribution guidelines
│   └── SETUP_CHECKLIST.md      ← Verification checklist
│
├── 🚀 Application Code
│   └── app/
│       ├── layout.tsx           ← Root layout with providers
│       ├── page.tsx             ← Home / landing page
│       ├── globals.css          ← Design tokens & global styles
│       ├── providers.tsx        ← Firebase Auth context (Singleton)
│       ├── articles/page.tsx    ← Article explorer page
│       ├── signin/page.tsx      ← Sign-in page
│       ├── signup/page.tsx      ← Sign-up page
│       ├── forgot-password/     ← Password reset flow
│       ├── components/
│       │   ├── navbar.tsx       ← Navigation bar
│       │   ├── chatbot-panel.tsx← AI chatbot drawer
│       │   ├── article-card.tsx ← Article preview card
│       │   ├── starfield.tsx    ← Animated starfield background
│       │   ├── planet-model.tsx ← 3D planet component
│       │   ├── pages/           ← Full page components
│       │   └── modals/          ← Modal overlays
│       └── styles/
│           └── animations.css   ← Shared animation utilities
│
├── 🧩 Shared
│   ├── components/ui/           ← shadcn/ui primitives
│   ├── hooks/                   ← Custom React hooks
│   ├── lib/                     ← Utility functions
│   └── public/                  ← Static assets
│
└── ⚙️ Configuration
    ├── next.config.ts
    ├── tsconfig.json
    ├── postcss.config.mjs
    ├── eslint.config.mjs
    ├── components.json          ← shadcn/ui config
    └── package.json

🏁 Getting Started

Prerequisites

• Node.js 18+ (or Bun)
• A Firebase project — free tier at firebase.google.com

Quick Setup (3 steps)

# 1. Clone the repository
git clone https://github.com/DHAMI-HARSH/kb.git
cd kb

# 2. Install dependencies
npm install        # or: bun install / yarn install / pnpm install

# 3. Configure environment & run
cp .env.example .env.local
# → Add your Firebase credentials to .env.local
npm run dev

Visit http://localhost:3000 🚀

Automated Setup

chmod +x scripts/setup.sh
./scripts/setup.sh
# Follow the interactive prompts

Available Scripts

npm run dev      # Start development server (hot reload)
npm run build    # Build for production
npm start        # Start production server
npm run lint     # Run ESLint

🔑 Environment Variables

Create a .env.local file in the root:

# Firebase — Required
NEXT_PUBLIC_FIREBASE_API_KEY=your_api_key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_auth_domain
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_project_id
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your_storage_bucket
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your_messaging_sender_id
NEXT_PUBLIC_FIREBASE_APP_ID=your_app_id

# Backend API — Optional (defaults to localhost:5000)
NEXT_PUBLIC_API_URL=http://localhost:5000

Where to get Firebase values:

Firebase Console → Project Settings → General → Your Apps → Web → firebaseConfig

🔌 API Reference

All endpoints are mock stubs ready for your backend integration:

Replace the base URL via NEXT_PUBLIC_API_URL in your .env.local.

🎨 Design System

Color Palette

Typography

Visual Effects

• Glassmorphism — frosted translucent panels
• Glow effects — purple/cyan halos on hover and focus
• Parallax — multi-layer depth on the hero background
• CSS animations — fade-in on load, slide-in for drawers, shimmer on skeletons

🚢 Deployment

Vercel (Recommended)

npm install -g vercel
vercel
# Follow prompts — add env vars in the Vercel dashboard

Other Platforms

npm run build
# Deploy the generated .next/ folder to your host

Set all environment variables from the Environment Variables section in your platform's settings panel.

🗺 Feature Roadmap

🤝 Contributing

Contributions are welcome! Here's how to get started:

# Fork the repo, then:
git clone https://github.com/YOUR-USERNAME/kb.git
cd kb
npm install
git checkout -b feature/your-feature-name

Adding a new page:

1. Create app/your-page/page.tsx
2. Add a component in app/components/pages/ if needed
3. Use 'use client' for interactive components

Adding a new component:

1. Create your file in app/components/
2. Add scoped styles in app/styles/ if required
3. Export and import where needed

Submit a Pull Request against master when ready. All PRs welcome!

📄 License

MIT License — free to use as a template, starter, or foundation for your own projects.

Built with ❤️ by DHAMI-HARSH · View on GitHub