AzizChatbot Frontend 🎨

A modern, responsive web interface for the AzizChatbot AI - an intelligent Arabic chatbot specialized for King Abdulaziz University (KAU) queries. Built with Next.js 15 and React 19.

✨ Features

• Modern UI/UX: Clean and intuitive chat interface with dark/light theme support
• RTL Support: Full right-to-left support for Arabic language
• Responsive Design: Works seamlessly on desktop and mobile devices
• Real-time Chat: Instant messaging with the AI backend
• Cloudflare Turnstile: Bot protection integration
• Particle Effects: Beautiful animated background using tsParticles
• Authentication: User authentication powered by Better Auth
• Markdown Support: Rich text rendering for AI responses

🛠️ Tech Stack

• Framework: Next.js 15. 2.4 (with Turbopack)
• Language: TypeScript
• UI Library: React 19
• Styling: Tailwind CSS 4
• UI Components: Radix UI (Accordion, Dialog, Dropdown, Avatar, etc.)
• State Management: TanStack React Query
• Forms: React Hook Form + Zod validation
• HTTP Client: Axios
• Icons: Lucide React, React Icons
• Animations: tw-animate-css, tsParticles
• Package Manager: pnpm

📋 Prerequisites

• Node.js 22 or higher
• pnpm 9. 12. 1+

🚀 Installation

Local Setup

1. Clone the repository:

   git clone https://github. com/AzizChatbot/azizchatbot-frontend.git
   cd azizchatbot-frontend

2. Install dependencies:

   pnpm install

3. Create a .env file based on .env.example:

   NEXT_PUBLIC_BACKEND_URL=http://localhost:4000
   NEXT_PUBLIC_CLOUDFLARE_TURNSTILE_SITE_KEY="your-turnstile-site-key"

4. Run the development server:

   pnpm dev

5. Open http://localhost:3000 in your browser.

Production Build

pnpm build
pnpm start

Docker Setup

1. Build and run using Docker Compose:

   docker-compose up --build

   Or using Docker directly:

   docker build -t azizchatbot-frontend . 
   docker run -p 3000:3000 azizchatbot-frontend

📁 Project Structure

azizchatbot-frontend/
├── src/
│   ├── app/              # Next.js App Router pages
│   ├── components/       # Reusable React components
│   ├── hooks/            # Custom React hooks
│   ├── lib/              # Utility functions and configurations
│   ├── types/            # TypeScript type definitions
│   └── middleware.ts     # Next.js middleware
├── public/               # Static assets
├── package.json          # Dependencies and scripts
├── Dockerfile            # Multi-stage Docker build
├── docker-compose.yaml   # Docker Compose configuration
├── tailwind.config.ts    # Tailwind CSS configuration
├── tsconfig.json         # TypeScript configuration
└── next.config.mjs       # Next. js configuration

🔧 Available Scripts

Command	Description
pnpm dev	Start development server with Turbopack
pnpm build	Build for production
pnpm start	Start production server
pnpm lint	Run ESLint

📄 License

This project is open source and available under the MIT License.

---

Made with ❤️ for King Abdulaziz University