**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.

Personal Website Management – Blog Admin

## Overview

Boura Flower Shop is a responsive e-commerce website designed to showcase and sell a curated selection of floral arrangements and related products. The platform aims to provide a seamless and visually appealing online shopping experience for customers looking to purchase flowers for various occasions. It offers detailed product information, a streamlined browsing process, and an intuitive shopping cart functionality.

## Key Features

- Dynamic product catalogue with filtering and searching capabilities.
- Detailed product pages displaying images, descriptions, and pricing.
- Interactive shopping cart for managing selected items.
- Responsive design ensuring optimal viewing across all devices.
- Visually engaging hero section and product cards for an attractive presentation.
- Multi-language support for a broader customer reach.
- Optimized for performance with fast loading times.

## Technical Stack

The project is built using React and Vite, leveraging Tailwind CSS for utility-first styling to ensure a consistent and modern UI. The architecture follows a component-based approach, promoting reusability and maintainability. State management for the shopping cart is handled using React's Context API, enabling efficient data sharing across different components without prop drilling. Product data is managed locally via JSON files, facilitating easy updates and offline access during development. Performance optimizations are inherent in the Vite build process, which includes features like hot module replacement for faster development cycles and optimized production builds. Security considerations are addressed by not exposing any sensitive credentials or proprietary logic, focusing solely on the client-side user interface and interaction.

## Architecture

```mermaid
flowchart TD
    A[User Browser] --> B(React Application)
    B --> C{UI Components}
    C --> D[Header]
    C --> E[Footer]
    C --> F[Hero]
    C --> G[ProductCard]
    C --> H[CartSidebar]
    C --> I[SEO]
    B --> J{Context APIs}
    J --> K[CartContext]
    J --> L[LanguageContext]
    B --> M[Data Layer]
    M --> N(products.json)
    B --> O[Styling]
    O --> P(Tailwind CSS)
    B --> Q[Build Tool]
    Q --> R(Vite)
```

## Getting Started

This project is designed to be viewed via its live URL (https://bouratn.netlify.app/). As it is a static client-side application, direct local setup instructions are not applicable in the context of a private repository. The focus is on the deployed version's functionality and user experience.

## Links

- [Live Demo](https://bouratn.netlify.app/)
- [Source Code](https://github.com/Alaa-Taieb/boura.tn)

Boura Flower Shop is a responsive e-commerce website designed to showcase and sell a curated selection of floral arrangements and related products. The platform aims to provide a seamless and visually appealing online shopping experience for customers looking to purchase flowers for various occasions. It offers detailed product information, a streamlined browsing process, and an intuitive shopping cart functionality.

Boura Flower Shop

## Overview

The Djerba Confort Management System is a comprehensive web application designed to streamline and optimize the operations of a bus transportation service. It addresses the complexities of managing routes, schedules, seat inventory, ticket sales, and financial transactions within a single, integrated platform. The system aims to eliminate manual processes, reduce errors, and enhance efficiency for both administrators and customers.

The core problem this system solves is the fragmentation and inefficiency often found in traditional transportation management. By centralizing all aspects of operations, from route planning and schedule creation to real-time ticket booking and refund processing, Djerba Confort provides a unified solution. This allows the company to better manage its fleet, optimize resource allocation, and improve customer service through a seamless booking experience. The target audience includes bus company administrators, station managers, agents, and end-users looking to purchase bus tickets.

The key value proposition of the Djerba Confort Management System lies in its ability to deliver operational control, financial transparency, and a superior user experience. It empowers administrators with powerful tools for managing all facets of the business, while providing customers with a modern, user-friendly interface for booking and managing their travel. The system's robust features, including dynamic scheduling, real-time inventory, and comprehensive reporting, contribute to increased revenue, reduced operational costs, and enhanced customer satisfaction.

## Key Features

- Real-time bus ticket booking and management with dynamic seat selection.
- Comprehensive route and schedule management, including multi-stop routes and schedule overrides.
- User and role-based access control for administrators, agents, and customers.
- Integrated financial management, including payment processing, refunds, and balance tracking.
- Robust reporting and analytics for sales, performance, and revenue trends.
- Audit logging for tracking system changes and user activities.
- Internationalization (i18n) support for multi-language interfaces.

## Technical Stack

The Djerba Confort Management System employs a robust, layered architectural approach, separating concerns into distinct backend and frontend applications. The backend, built with Node.js, leverages a Model-View-Controller (MVC) pattern for organizing application logic. It utilizes a PostgreSQL database, managed through migration scripts, to ensure data integrity and schema evolution. Key design patterns observed include dependency injection for managing configurations and services, and middleware for handling cross-cutting concerns like authentication, validation, and error handling. Security is a paramount consideration, with features like JWT for authentication, password hashing, and input sanitization implemented to protect sensitive data and prevent common web vulnerabilities.

Notable technical challenges addressed include the complexity of multi-stop route management, dynamic schedule generation with recurring events, and the intricate logic for ticket reschedules and refunds, particularly handling post-departure scenarios and vendor configurations. Performance optimizations are likely achieved through efficient database queries, optimized API responses, and potentially caching mechanisms. The use of Docker for containerization ensures consistent deployment across different environments, simplifying setup and scaling.

## Architecture

```mermaid
graph TD

    %% =======================
    %% Frontend
    %% =======================
    subgraph Frontend
        A[Client Browser]
        B[React App]
        C[UI Components]
        D[API Services]
        E[Context API]
        F[i18n]

        A --> B
        B --> C
        B --> D
        B --> E
        B --> F
    end

    %% =======================
    %% Backend
    %% =======================
    subgraph Backend
        G[API Gateway]
        H[Node.js Server]
        M[Middleware]
        I[Controllers]
        J[Services]
        K[Models]
        L[PostgreSQL Database]
        N[Configuration]
        O[Docker Host]

        G --> H
        H --> M
        M --> I
        I --> J
        J --> K
        K --> L

        H --> N
        H --> O
    end

    %% =======================
    %% External Services
    %% =======================
    subgraph External Services
        P[Payment Gateway]
        Q[Email Service]
    end

    %% Connections
    D -- API Calls --> G
    J -- Uses --> P
    J -- Uses --> Q

```

The Djerba Confort Management System is a comprehensive web application designed to streamline and optimize the operations of a bus transportation service. It addresses the complexities of managing routes, schedules, seat inventory, ticket sales, and financial transactions within a single, integrated platform. The system aims to eliminate manual processes, reduce errors, and enhance efficiency for both administrators and customers.

Projects

Featured

LLM Web Interface

Personal Website Management – Blog Admin

All Projects

Boura Flower Shop

Djerba Confort Management System