Discord SUI Analyzer Frontend

A modern, interactive frontend for the Discord SUI Analyzer - a tool for analyzing and visualizing Discord conversations with hierarchical message structures.

Features

• 🌳 Hierarchical Tree Visualization: Interactive tree view of Discord threads and messages
• 🎯 Drag & Drop Interface: Reorganize conversations and messages with intuitive drag-and-drop
• 🔍 Advanced Search & Filtering: Find specific threads and messages quickly
• 📱 Responsive Design: Works seamlessly on desktop and mobile devices
• 🎨 Modern UI: Built with Tailwind CSS and Lucide React icons
• ⚡ Real-time Updates: Live synchronization with the backend API

Tech Stack

• Framework: Next.js 14 with App Router
• Language: TypeScript
• Styling: Tailwind CSS
• State Management: Redux Toolkit
• Drag & Drop: @dnd-kit
• Icons: Lucide React
• Development: ESLint, TypeScript compiler

Prerequisites

• Node.js 18+
• npm 8+
• Backend API server running on port 8000

Installation

1. Clone the repository:

git clone https://github.com/yourusername/discord-sui-analyzer-frontend.git
cd discord-sui-analyzer-frontend

2. Install dependencies:

npm install

3. Create environment file:

cp .env.example .env.local

4. Start the development server:

npm run dev

The application will be available at http://localhost:3000.

Environment Variables

Create a .env.local file with the following variables:

API_BASE_URL=http://localhost:8000
NEXT_PUBLIC_API_URL=http://localhost:8000

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run start - Start production server
• npm run lint - Run ESLint
• npm run type-check - Run TypeScript type checking
• npm run clean - Clean build artifacts and dependencies
• npm run reinstall - Clean and reinstall dependencies

Project Structure

src/
├── app/                    # Next.js App Router pages
│   ├── api/               # API routes (proxies to backend)
│   ├── globals.css        # Global styles
│   ├── layout.tsx         # Root layout
│   └── page.tsx           # Home page
├── components/            # React components
│   ├── HierarchyNode.tsx  # Individual tree node component
│   ├── HierarchyTree.tsx  # Tree container component
│   └── ThreadPanel.tsx    # Thread panel component
├── hooks/                 # Custom React hooks
├── store/                 # Redux store configuration
│   ├── index.ts          # Store setup
│   └── slices/           # Redux slices
├── types/                 # TypeScript type definitions
└── utils/                 # Utility functions

API Integration

The frontend communicates with the backend API through Next.js API routes that proxy requests to the main Discord SUI Analyzer server. The main endpoints are:

• GET /api/threads - Fetch all threads
• GET /api/threads/[id] - Fetch specific thread
• GET /api/messages/[id] - Fetch specific message
• POST /api/threads/hierarchy - Perform hierarchy operations

Development

Debugging

The project includes VS Code debug configurations for:

• Client-side debugging (React components)
• Server-side debugging (API routes)
• Full-stack debugging

Use F5 to start debugging or go to Run and Debug panel.

Code Style

• ESLint configuration for code quality
• TypeScript strict mode enabled
• Prettier formatting (recommended)

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

License

MIT License - see LICENSE file for details.

Related Projects

• Discord SUI Analyzer Backend - The main backend API server