Knowledge Network React Application

A powerful collaborative knowledge management platform built with Next.js 15, TypeScript, and AI-powered features

Documentation • API Reference • Report Bug • Request Feature

---

🚀 Overview

Knowledge Network is a comprehensive collaborative knowledge management platform designed for modern teams. It combines powerful document editing, real-time collaboration, AI-powered features, and advanced search capabilities in one unified platform.

✨ Key Features

• 📝 Rich Text Editor - Advanced editor with Markdown support, code highlighting, and real-time collaboration
• 👥 Real-time Collaboration - Live cursors, presence indicators, and conflict-free simultaneous editing
• 🤖 AI-Powered Intelligence - Smart suggestions, auto-summarization, and semantic search
• 🔍 Advanced Search - Full-text search with filters, operators, and AI-powered semantic understanding
• 📱 Mobile & PWA - Responsive design with offline support and installable Progressive Web App
• 🔒 Enterprise Security - JWT authentication, RBAC, encryption, and compliance features
• 📊 Analytics Dashboard - Usage insights, content metrics, and team activity tracking
• 🔌 Extensible API - RESTful API with WebSocket support for real-time features

🏗️ Architecture

┌─────────────────────────────────────────────────────┐
│                   Next.js 15 App                    │
│                                                     │
│  ┌──────────┐  ┌──────────┐  ┌──────────────────┐   │
│  │   UI     │  │   Auth   │  │  State Manager   │   │
│  │  Layer   │  │  System  │  │    (Zustand)     │   │
│  └─────┬────┘  └─────┬────┘  └─────────┬────────┘   │
│        │             │                 │            │
│  ┌─────▼─────────────▼─────────────────▼──────────┐ │
│  │            API Routes & Middleware             │ │
│  └───────────────────┬────────────────────────────┘ │
└──────────────────────┼──────────────────────────────┘
                       │
         ┌─────────────┼─────────────┐
         │             │             │
    ┌────▼────┐  ┌─────▼─────┐  ┌────▼────┐
    │Postgres │  │   Redis   │  │   S3    │
    │   DB    │  │   Cache   │  │ Storage │
    └─────────┘  └───────────┘  └─────────┘

🚦 Getting Started

Prerequisites

• Node.js 20+ or Bun 1.0+
• PostgreSQL 15+
• Redis 7+
• Git

Quick Start

# Clone the repository
git clone https://github.com/knowledge-network/app.git
cd app

# Install dependencies (using Bun - recommended)
bun install

# Or using npm
npm install

# Set up environment variables
cp .env.example .env.local

# Run database migrations
bun run migrate

# Start development server
bun run dev

Open http://localhost:3000 to see the application.

▶️ Running the Stack

Main App (Next.js + API)

• bun run dev starts the Next.js app, GraphQL API, and REST routes on http://localhost:3000. The dev server hot-reloads changes and proxies database calls through Prisma.
• Ensure Postgres, Redis, and (optionally) Elasticsearch are running locally; credentials come from .env.local.
• When you need a production-like build, use bun run build followed by bun run start (served from .next/standalone).
• Apply Prisma migrations before first run with bun run migrate.

Storybook (Design System)

• bun run storybook launches the component workbench on http://localhost:6006.
• Build a static Storybook bundle with bun run build-storybook (outputs to storybook-static/).
• Storybook consumes the same Tailwind, Radix, and theme tokens as the app, so design changes stay in sync.

Backend Services

• Next.js API routes and the GraphQL endpoint (/api/graphql) run alongside the main app when you execute bun run dev or bun run start.
• Realtime collaboration is optional but recommended for editor sessions. Start it with bun run realtime (Bun WebSocket server on port 3005) or bun run realtime:elysia if you prefer the Elysia wrapper. Health check: curl http://localhost:3005/health.
• The realtime server reads COLLAB_PORT, COLLAB_WS_PATH, and JWT_SECRET; align these with the app’s NEXT_PUBLIC_COLLAB_WS_URL so clients connect correctly.

How the Pieces Fit Together

• The Next.js app renders UI, handles authentication, and talks to Prisma-powered services (Postgres, Redis, Elasticsearch) through /api and /api/graphql.
• The realtime server stores CRDT snapshots in data/collab/ and broadcasts updates that the editor consumes via NEXT_PUBLIC_COLLAB_WS_URL.
• Storybook reuses the same component library (src/components/ui) and Tailwind theme, letting you iterate on UI states before shipping them to pages.
• Shared environment files (.env.local, .env.docker) keep ports, secrets, and service URLs aligned across runtimes.

Docker & Compose

# Build and start core services (app, Postgres, Redis, Elasticsearch)
docker compose up --build

# Include realtime collaboration server
docker compose --profile realtime up --build

# Add Kibana for search inspection
docker compose --profile observability up

# Shut everything down
docker compose down

Notes:

• Environment defaults live in .env.docker; adjust secrets or service URLs there before running.
• Prisma migrations execute automatically on container start (bunx prisma migrate deploy).
• Data persists through named volumes (postgres-data, redis-data, es-data, uploads-data, collab-data).
• The realtime service is optional; enable the realtime profile when collaborative editing is required.
• Kibana is gated behind the observability profile to keep the default stack lightweight.

Environment Variables

Create a .env.local file with the following variables: See the env.example for extensive feature configuration and dev mode settings

# Application
NODE_ENV=development
NEXT_PUBLIC_APP_URL=http://localhost:3000

# Database
DATABASE_URL=postgresql://user:password@localhost:5432/knowledge_network

# Redis
REDIS_URL=redis://localhost:6379

# Authentication
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=your-secret-here

# JWT
JWT_SECRET=your-jwt-secret
JWT_REFRESH_SECRET=your-refresh-secret

# Optional: S3 Storage
S3_BUCKET=your-bucket
S3_REGION=us-east-1
S3_ACCESS_KEY=your-key
S3_SECRET_KEY=your-secret

📦 Project Structure

knowledge-network/
├── src/
│   ├── app/              # Next.js 15 app directory
│   │   ├── api/         # API routes
│   │   ├── auth/        # Authentication pages
│   │   ├── editor/      # Editor interface
│   │   └── ...
│   ├── components/       # React components
│   │   ├── ui/          # UI component library
│   │   ├── editor/      # Editor components
│   │   ├── auth/        # Auth components
│   │   └── help/        # Help system
│   ├── lib/             # Utility libraries
│   ├── server/          # Server-side code
│   ├── types/           # TypeScript definitions
│   └── utils/           # Helper functions
├── docs/                 # Documentation
│   ├── user-guide/      # User documentation
│   ├── admin-guide/     # Admin documentation
│   ├── api-reference/   # API documentation
│   └── support/         # Support resources
├── prisma/              # Database schema
├── public/              # Static assets
└── tests/               # Test suites

🛠️ Development

Available Scripts

# Development
bun run dev              # Start development server
bun run build           # Build for production
bun run start           # Start production server

# Database
bun run migrate         # Run database migrations
bun run migrate:create  # Create new migration
bun run seed           # Seed database with sample data

# Testing
bun run test           # Run unit tests
bun run test:e2e       # Run E2E tests
bun run test:coverage  # Generate coverage report

# Code Quality
bun run lint           # Run ESLint
bun run format         # Format with Prettier
bun run type-check     # TypeScript type checking

Technology Stack

Frontend

• Framework: Next.js 15+ (App Router)
• Language: TypeScript 5+
• Styling: Tailwind CSS 4+
• Components: Radix UI + Custom Components
• State: Zustand
• Forms: React Hook Form + Zod

Backend

• Runtime: Node.js 20+ / Bun 1.0+
• Database: PostgreSQL 15+ with Prisma ORM
• Cache: Redis 7+
• Storage: S3-compatible (AWS S3, MinIO)
• Search: Elasticsearch 8+ (optional)
• Queue: BullMQ

DevOps

• Container: Docker
• CI/CD: GitHub Actions
• Monitoring: Prometheus + Grafana
• Logging: Winston + ELK Stack

🧪 Testing

Running Tests

# Unit tests
bun run test

# Integration tests
bun run test:integration

# E2E tests (Playwright)
bun run test:e2e

# Watch mode
bun run test:watch

# Coverage report
bun run test:coverage

Test Structure

tests/
├── unit/           # Unit tests
├── integration/    # Integration tests
├── e2e/           # End-to-end tests
└── fixtures/      # Test data

📚 Documentation

Comprehensive documentation is available in the /docs directory:

• User Guide - Complete user documentation
• Admin Guide - System administration
• API Reference - REST API documentation
• FAQ - Frequently asked questions
• Troubleshooting - Common issues

🔌 API

Quick Example

// Authentication
const response = await fetch('/api/v1/auth/login', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    email: '[email protected]',
    password: 'password'
  })
});

const { accessToken } = await response.json();

// Create document
const doc = await fetch('/api/v1/documents', {
  method: 'POST',
  headers: {
    'Authorization': `Bearer ${accessToken}`,
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    title: 'My Document',
    content: '# Hello World'
  })
});

See API Documentation for complete reference.

🚀 Deployment

Production Deployment

1. Build the application:

bun run build

2. Set production environment variables

3. Run migrations:

NODE_ENV=production bun run migrate

4. Start the server:

bun run start

Docker Deployment

# Build image
docker build -t knowledge-network .

# Run container
docker run -p 3000:3000 \
  -e DATABASE_URL=your_db_url \
  -e REDIS_URL=your_redis_url \
  knowledge-network

Docker Compose

# Start all services
docker-compose up -d

# Stop services
docker-compose down

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

Development Workflow

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Code Style

• Follow the existing code style
• Use TypeScript strict mode
• Write tests for new features
• Update documentation as needed

📊 Performance

Benchmarks

Metric	Target	Actual
First Contentful Paint	< 1.5s	1.2s ✅
Time to Interactive	< 3.5s	2.8s ✅
Lighthouse Score	> 90	94 ✅
Bundle Size	< 200KB	175KB ✅

Optimization Tips

• Enable Redis caching
• Use CDN for static assets
• Configure proper database indexes
• Enable compression
• Implement lazy loading

🔒 Security

Security Features

• JWT-based authentication
• Role-based access control (RBAC)
• Encryption at rest and in transit
• Rate limiting
• CSRF protection
• XSS prevention
• SQL injection prevention

Reporting Security Issues

Please report security vulnerabilities to [email protected]

📜 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

Built With

• Next.js - React framework
• TypeScript - Type safety
• Tailwind CSS - Styling
• Prisma - Database ORM
• Radix UI - UI components
• Zustand - State management

Contributors

Thanks to all contributors who have helped build Knowledge Network!

📞 Support

• Documentation: docs.knowledgenetwork.com
• Community Forum: community.knowledgenetwork.com
• Email Support: [email protected]
• Status Page: status.knowledgenetwork.com

🗺️ Roadmap

Q1 2025

• Core platform release
• Real-time collaboration
• Mobile PWA
• Advanced AI features

Q2 2025

• Plugin system
• Advanced analytics
• Enterprise SSO
• Multi-language support

Q3 2025

• Native mobile apps
• Advanced workflows
• API v2
• Performance improvements

See the open issues for a full list of proposed features and known issues.

---

Made with ❤️ by the Knowledge Network Team

© 2025 Knowledge Network. All rights reserved.