**LLM Web Interface**

A sleek and powerful web application I developed to provide a seamless interface for interacting with Large Language Models, specifically integrated with **Groq's** high-speed APIs.

This project was a great opportunity to explore real-time data streaming and robust full-stack development. It features a modern tech stack centered around **React**, **Node.js**, and **MongoDB**, with a strong focus on security and a dynamic user experience.

---

**🚀 Key Features & Highlights**

- **Blazing-Fast Response Streaming:** Utilizes server-sent events (SSE) to deliver a fluid, token-by-token response from the LLM, making the conversation feel instantaneous and natural.
- **Robust Security:** Implements a custom, encrypted system for managing Groq API keys, ensuring user data is secure. This is complemented by a **JWT authentication** system with Google OAuth for hassle-free sign-in.
- **Intuitive & Rich Interface:** The chat interface supports full **markdown rendering** with syntax highlighting for code blocks, providing a clean and professional display of LLM responses.
- **Modern Design:** Built with **Material UI (Joy)**, the application is fully responsive and adapts flawlessly across all devices.

---

**💻 Technical Stack**

The project is built on a robust MERN-like stack, with a clear separation between the frontend and backend.

**Frontend**

- **React.js:** Used with the Context API for efficient state management.
- **Material UI Joy:** Provides a beautiful and responsive component library.
- **Real-time Streaming:** Manages the incoming token stream from the backend.

**Backend**

- **Node.js & Express.js:** A RESTful API serves as the core of the application.
- **MongoDB:** The NoSQL database handles user and API key data.
- **JWT & Google OAuth:** Manages secure user authentication and sessions.
- **Groq API:** Handles all LLM interactions with streaming support.

---

**🛠️ Project Architecture**

This diagram illustrates how the different components of the application communicate to provide a seamless experience.

```mermaid
graph TD
    A[React Frontend] -->|JWT Auth| B[Express Backend]
    B --> C[MongoDB]
    B -->|Streaming| D[Groq API]
    A -->|SSE| B
```

---

**🔬 Technical Deep Dive**

**Real-time Message Streaming**

Here's a glimpse into how the backend streams responses from the Groq API to the frontend.

```javascript
const stream = await groq.chat.completions.create({
  messages: apiMessages,
  model: "llama3-70b-8192",
  stream: true,
})

for await (const chunk of stream) {
  const content = chunk.choices[0]?.delta?.content || ""
  // Logic to send content to the client via SSE
}
```

**Secure Key Encryption**

The API key management system uses encryption to protect sensitive user data before it is stored in the database.

```javascript
// A simplified example of the encryption process
const encrypted = crypto.encrypt(apiKey)
await ApiKey.create({
  user: userId,
  key: encrypted,
  name: keyName,
})
```

---

**🚀 How to Run the Project**

You can get this project up and running with a few simple commands.

1.  **Clone the repository:**

    ```bash
    git clone https://github.com/Alaa-Taieb/LLM-Web-Interface.git
    ```

2.  **Install dependencies:**

    ```bash
    # Frontend
    cd client && npm install

    # Backend
    cd server && npm install
    ```

3.  **Set up environment variables:**
    - Create a `.env` file in both the `client` and `server` directories with the variables listed in the original project description.

4.  **Start the servers:**

    ```bash
    # Frontend
    cd client && npm start

    # Backend
    cd server && npm run dev
    ```

Chat interface for Groq LLMs with streaming & secure key management.

LLM Web Interface

## Overview

A production-ready admin interface to manage a personal blog: posts, tags, and content relationships. Built with Next.js App Router, TypeScript, Supabase, React Query, Tailwind, and shadcn/ui. It features a Monaco-powered Markdown editor with live preview, robust form validation (Zod + React Hook Form), and a clean, responsive UI.

- Monorepo path: `blog-admin/`
- App Router with API routes under `src/app/api/*`
- Data storage with Supabase (PostgreSQL)
- Realtime-friendly patterns and React Query caches
- Strict TypeScript for reliability

## Architecture

- Next.js 15 (App Router) with Turbopack for fast builds and dev.
- UI: Tailwind CSS + shadcn/ui (Radix primitives) for accessible components.
- State/Data: React Query for fetching, caching, and optimistic flows.
- Forms: React Hook Form with Zod schemas in `src/lib/validations.ts`.
- Database: Supabase client (`src/lib/supabase.ts`) and queries (`src/lib/queries.ts`).
- Editor: Monaco Editor wrapped in `MarkdownEditorWithPreview` for edit/preview/split modes.
- Types and hooks organized under `src/types` and `src/hooks`.

Directory highlights:

- `src/app/` – pages and API routes (posts, tags, stats)
- `src/components/ui/` – reusable UI components (button, card, dialogs, editor)
- `src/lib/` – supabase client, queries, utilities, validations
- `src/hooks/` – typed React Query hooks

## Data model

Tables managed:

- `posts` – title, slug, summary, content_md, draft, publish status, cover image, timestamps
- `tags` – label, slug, usage counts
- `post_tags` – many-to-many between posts and tags

## Features

- Posts and tags CRUD with React Query for smooth UX
- Monaco Markdown editor with:
  - GFM support (tables, task lists) via `remark-gfm`
  - Syntax highlighting via `rehype-highlight`
  - Live preview and split view
  - Sensible defaults (word wrap, line numbers, automatic layout)
- Form validation with Zod schemas and error messaging
- Responsive layouts with proper overflow management
- Optimized tables (column sizing, no horizontal scrolls)

## Editor experience

We consolidated editor usage into a single `MarkdownEditorWithPreview` component to ensure consistent behavior and layout across the Create and Edit flows. Issues like height shrinkage in dialogs were addressed using:

- Parent flex containers with `min-h-0` and explicit heights where needed
- Avoiding percentage heights within complex dialog flex trees
- Fallback to textarea if Monaco fails to mount within a set timeout

## Performance & build

- Dev startup: ~1–2s (Turbopack)
- Lint: ~3s
- Build: ~25–30s
- Shared bundle: ~135KB

These values are from local runs and can vary by machine.

## How to run

Prereqs: Node.js LTS and a Supabase project.

1. Install deps

```powershell
cd "blog-admin"
npm install
```

2. Configure environment

Create `blog-admin/.env.local` from example and set Supabase keys:

```powershell
Copy-Item .env.example .env.local
# Then edit .env.local and fill:
# NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
# NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
# SUPABASE_SERVICE_ROLE_KEY=your_supabase_service_role_key
```

3. Dev server

```powershell
npm run dev
# App at http://localhost:3000
```

4. Lint & build

```powershell
npm run lint
npm run build
```

Notes:

- Without Supabase credentials, UI loads but data ops return 500s (expected).

## Challenges & solutions

- Markdown rendering inconsistencies → standardized ReactMarkdown config with GFM + highlight plugins and custom component styling.
- Dialog/editor height issues → unified container strategy with `min-h-0`, explicit pixel heights where appropriate, and a single editor component.
- Table overflow in posts list → column sizing and layout tweaks to remove the bottom scrollbar.

## Future work

- Role-based auth and access control
- Media manager for cover images
- Draft autosave and version history
- MDX support for richer content blocks
- End-to-end tests (Playwright) and unit tests for API routes

## Attribution

- UI primitives by Radix via shadcn/ui
- Markdown highlighting via highlight.js themes
- Icons by Lucide React

A modern Next.js + Supabase admin app to manage personal blog posts, tags, and content with a Monaco-powered Markdown editor and live preview.

Projects

Featured

LLM Web Interface

Personal Website Management – Blog Admin

All Projects