- Overview
- Architecture
- Tech Stack
- Project Structure
- Features
- Database Schema
- Authentication System
- API Routes
- UI Components
- Internationalization
- Deployment
- Development Guide
beRichHub is a comprehensive web platform designed for developers, offering personalized learning roadmaps, AI-powered chat assistance, user profiles with blogging capabilities, and curated resources. Built with modern web technologies, it provides a seamless experience across multiple languages and devices.
Version: 5.3.1
License: LicenseRef-BRH-1.0
Website: https://www.berich-hub.vercel.app
- 🤖 AI-powered chat interface (beRich-LLM)
- 👤 User authentication and profile management
- 📝 Personal blogging system
- 🗺️ Interactive developer roadmaps
- 🔍 User search and discovery
- 🌍 Multi-language support (EN, DE, ES, SW)
- 🎨 Dark/Light theme support
- 📱 Fully responsive design
beRichHub follows a modern full-stack architecture:
- Framework: Next.js 15 with App Router
- UI Framework: React 19 with TypeScript
- Styling: Tailwind CSS with shadcn/ui components
- State Management: React hooks and context
- Animations: Framer Motion
- Forms: React Hook Form with Zod validation
- API: Next.js API Routes (RESTful)
- Database: PostgreSQL with Prisma ORM
- Authentication: Kinde Auth
- AI Integration: Vercel AI SDK with Google/OpenAI providers
- File Storage: Local file system for avatars
- Platform: Vercel (recommended)
- Database: PostgreSQL (production)
- CDN: Vercel Edge Network
- Analytics: Vercel Analytics
{
"runtime": "Node.js",
"framework": "Next.js 15.3.3",
"language": "TypeScript 5.x",
"ui": "React 19.0.0",
"styling": "Tailwind CSS 4.x",
"database": "PostgreSQL",
"orm": "Prisma 6.10.1"
}{
"authentication": "@kinde-oss/kinde-auth-nextjs",
"ui_components": "@radix-ui/*",
"ai": "@ai-sdk/google, @ai-sdk/openai",
"forms": "react-hook-form, @hookform/resolvers",
"validation": "zod",
"animations": "framer-motion",
"i18n": "next-intl",
"themes": "next-themes",
"icons": "lucide-react, react-icons",
"charts": "recharts",
"carousel": "embla-carousel-react",
"notifications": "sonner"
}berichhub@latest/
├── app/ # Next.js App Router
│ ├── (docs)/ # Documentation pages group
│ │ └── roadmaps/ # Developer roadmaps
│ ├── (legals)/ # Legal pages group
│ │ ├── cookies/ # Cookie policy
│ │ ├── impressum/ # Legal notice
│ │ ├── privacy-policy/ # Privacy policy
│ │ └── terms/ # Terms of service
│ ├── (protected)/ # Authentication-protected routes
│ │ ├── dashboard/ # User dashboard
│ │ ├── profile/[userId]/ # Dynamic user profiles
│ │ └── search-users/ # User search page
│ ├── api/ # API routes
│ │ ├── auth/[kindeAuth]/ # Kinde authentication
│ │ ├── bio/ # User bio management
│ │ ├── chat/ # AI chat endpoint
│ │ ├── posts/ # Blog posts API
│ │ └── search-user/ # User search API
│ ├── berich-llm/ # AI chat interface
│ ├── favicon.ico
│ ├── global-error.tsx # Global error boundary
│ ├── globals.css # Global styles
│ ├── layout.tsx # Root layout
│ ├── not-found.tsx # 404 page
│ └── page.tsx # Home page
├── components/ # React components
│ ├── chat-llm/ # AI chat components
│ ├── docs/ # Documentation components
│ ├── landing/ # Landing page components
│ ├── main/ # Main layout components
│ ├── motions/ # Animation components
│ ├── profile/ # User profile components
│ ├── search/ # Search components
│ ├── themes/ # Theme providers
│ ├── toggles/ # Toggle components
│ └── ui/ # shadcn/ui components
├── actions/ # Server actions
├── data/ # Static data
├── docs/ # Additional documentation
├── hooks/ # Custom React hooks
├── i18n/ # Internationalization config
├── lib/ # Utility libraries
├── messages/ # Translation files
├── prisma/ # Database schema and migrations
├── public/ # Static assets
├── utils/ # Utility functions
├── middleware.ts # Next.js middleware
├── next.config.ts # Next.js configuration
├── package.json # Dependencies
├── prisma/schema.prisma # Database schema
└── tsconfig.json # TypeScript configuration
- Hero Section: Dynamic introduction with animated background
- Timeline: Interactive development history
- Responsive Design: Mobile-first approach
- Internationalization: Multi-language support
- Real-time Chat: Powered by Vercel AI SDK
- Multiple Providers: Google and OpenAI integration
- Chat Management: Create, select, and delete conversations
- Sidebar Navigation: Organized chat history
- Loading States: Smooth user experience
- Authentication: Kinde OAuth integration
- User Profiles: Editable profiles with bio
- Avatar System: Custom avatar support
- Role Management: User role assignments
- Personal Blogs: Users can create and manage posts
- CRUD Operations: Full blog post management
- User-specific Content: Profile-based blog viewing
- Real-time Updates: Dynamic content loading
- Interactive Roadmaps: Step-by-step learning paths
- Multiple Paths: Web, Mobile, Backend development
- FAQ Section: Common questions answered
- Resource Links: Curated learning resources
- User Search: Find other platform users
- Profile Viewing: View other users' profiles and blogs
- Search API: Backend user search functionality
- Languages: English, German, Spanish, Swedish
- Dynamic Translation: Real-time language switching
- Localized Content: All UI elements translated
- Dark/Light Mode: Toggle between themes
- System Preference: Automatic theme detection
- Persistent Settings: Theme preference storage
model User {
id String @id @default(cuid())
kindeId String @unique // Kinde user ID
givenName String // First name
familyName String // Last name
email String @unique // Email address
bio String? @db.VarChar(150) // User biography
posts Post[] @relation("UserPosts")
}model Post {
id String @id @default(cuid())
user User @relation("UserPosts", fields: [userId], references: [id])
userId String // Foreign key to User
title String // Post title
content String @db.VarChar(500) // Post content
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
@@index([userId])
}- PostgreSQL: Production-ready relational database
- Prisma ORM: Type-safe database access
- Migrations: Version-controlled schema changes
- Indexing: Optimized query performance
beRichHub uses Kinde for authentication, providing:
// Environment Variables Required
KINDE_ISSUER_URL=<your-kinde-issuer>
KINDE_MANAGEMENT_CLIENT_ID=<client-id>
KINDE_MANAGEMENT_CLIENT_SECRET=<client-secret>- Login: Users authenticate via Kinde OAuth
- Session Management: Server-side session handling
- User Creation: Automatic user record creation
- Role Assignment: Dynamic role management
- Profile Sync: User data synchronization
// middleware.ts - Route Protection
export const config = {
matcher: [
"/((?!_next|favicon.ico|cookies|impressum|privacy-policy|terms|$|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)",
],
};// app/api/auth/[kindeAuth]/route.ts
export const GET = handleAuth();// app/api/bio/route.ts
GET /api/bio # Get current user's bio
POST /api/bio # Update current user's bio
DELETE /api/bio # Delete current user's bio
// app/api/bio/[userId]/route.ts
GET /api/bio/[userId] # Get specific user's bio// app/api/posts/route.ts
GET /api/posts # Get user's posts
POST /api/posts # Create new post
GET /api/posts?userId=[userId] # Get posts by user ID
// app/api/posts/[id]/route.ts
DELETE /api/posts/[id] # Delete specific post// app/api/search-user/route.ts
GET /api/search-user?q=[query] # Search users by query// app/api/chat/route.ts
POST /api/chat # Send message to AIbeRichHub uses shadcn/ui components built on Radix UI:
- NavigationMenu: Main navigation system
- Breadcrumb: Page navigation breadcrumbs
- Pagination: Content pagination
- Card: Content containers
- Badge: Status indicators
- Avatar: User profile images
- Tooltip: Contextual information
- Accordion: Collapsible content sections
- Input: Text input fields
- Textarea: Multi-line text input
- Button: Interactive buttons
- Select: Dropdown selections
- Checkbox: Boolean inputs
- Form: Form wrapper with validation
- Alert: Important messages
- Dialog: Modal dialogs
- Sheet: Slide-out panels
- Sonner: Toast notifications
- Progress: Loading indicators
- Separator: Visual dividers
- Sidebar: Collapsible navigation
- Tabs: Content organization
- Scroll Area: Custom scrollbars
// Chat-specific components for AI interaction
- AppSidebar: Chat history management
- ChatHeader: Chat session header
- ChatInterface: Main chat interface// User profile management
- ProfileCard: User profile display/edit
- BlogForm: Blog post creation
- BlogList: Blog post listing// Main application layout
- Navbar: Primary navigation
- NavbarHeader: Navigation menu
- Footer: Site footer// Homepage components
- Hero: Main hero section
- History: Development timeline- English (en): Default language
- German (de): Deutsch
- Spanish (es): Español
- Swedish (sw): Svenska
messages/
├── en.json # English translations
├── de.json # German translations
├── es.json # Spanish translations
└── sw.json # Swedish translations
import { useTranslations } from "next-intl";
function Component() {
const t = useTranslations("Namespace");
return <h1>{t("title")}</h1>;
}- Navbar: Navigation menu items
- RoadmapItems: Learning roadmap content
- Landing: Homepage content
- Profile: User profile interface
- Chat: AI chat interface
- Legal: Legal pages content
# Database
DATABASE_URL=postgresql://user:password@host:port/database
# Authentication
KINDE_ISSUER_URL=https://your-domain.kinde.com
KINDE_MANAGEMENT_CLIENT_ID=your_client_id
KINDE_MANAGEMENT_CLIENT_SECRET=your_client_secret
# AI (Optional)
OPENAI_API_KEY=your_openai_key
GOOGLE_AI_API_KEY=your_google_ai_key- Connect Repository: Link your GitHub repository
- Configure Environment: Set environment variables
- Database Setup: Configure PostgreSQL database
- Deploy: Automatic deployment on push
# Development
npm run dev
# Production Build
npm run build
# Start Production Server
npm run start
# Linting
npm run lint
# Database Operations
npx prisma generate
npx prisma migrate deploy-
Clone Repository
git clone <repository-url> cd berichhub@latest
-
Install Dependencies
npm install
-
Setup Environment
cp .env.example .env.local # Edit .env.local with your configuration -
Database Setup
npx prisma migrate dev npx prisma generate
-
Start Development Server
npm run dev
{
"dev": "next dev --turbopack",
"build": "next build",
"start": "next start",
"lint": "next lint",
"all": "npm run lint && npm run build && npm run start",
"postinstall": "prisma generate && prisma migrate deploy"
}// Component template
// SPDX-License-Identifier: LicenseRef-BRH-1.0
"use client"; // For client components
import { useState } from 'react';
import { ComponentProps } from '@/types';
interface Props {
// Define props
}
export function Component({ props }: Props) {
// Component logic
return (
// JSX
);
}// API route template
// SPDX-License-Identifier: LicenseRef-BRH-1.0
import { NextResponse } from "next/server";
import { getKindeServerSession } from "@kinde-oss/kinde-auth-nextjs/server";
export async function GET(request: Request) {
// Authentication check
const { getUser } = getKindeServerSession();
const user = await getUser();
if (!user) {
return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
}
// API logic
return NextResponse.json(data);
}- Tailwind CSS: Utility-first approach
- Component Variants: Use class-variance-authority
- Responsive Design: Mobile-first breakpoints
- Dark Mode: Support both themes
- Animations: Framer Motion for complex animations
- Image Optimization: Next.js Image component
- Code Splitting: Automatic with App Router
- Lazy Loading: React.lazy for heavy components
- Database Indexing: Prisma indexes for queries
- Caching: Server-side and client-side caching
- Type Safety: TypeScript for compile-time checks
- Linting: ESLint for code quality
- Format: Prettier for code formatting
- Manual Testing: Cross-browser testing
- Authentication: Kinde OAuth integration
- Authorization: Route-level protection
- Data Validation: Zod schemas
- SQL Injection: Prisma ORM protection
- XSS Prevention: React built-in protection
- CSRF Protection: Next.js built-in protection
This documentation covers the complete beRichHub application architecture, features, and development guidelines. For specific implementation details, refer to the source code and inline comments.