## 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

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

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.

Building reliable, fast web apps

Quick Facts

From the blog

Recent projects

Personal Website Management – Blog Admin

LLM Web Interface

Boura Flower Shop