Skip to content

replit.md

Latest commit

 

History

History
130 lines (105 loc) · 6.27 KB

replit.md

File metadata and controls

130 lines (105 loc) · 6.27 KB

Discord User Lookup - System Architecture

Overview

This is a Discord User Lookup application that allows users to search for Discord user information by User ID. The application features a modern React frontend with a clean Discord-inspired interface and an Express.js backend that interfaces with the Discord API. It's built with TypeScript throughout for type safety and uses modern tooling including Vite for development and build processes.

System Architecture

Frontend Architecture

  • Framework: React 18 with TypeScript
  • Build Tool: Vite with custom configuration for development and production
  • UI Framework: shadcn/ui components built on Radix UI primitives
  • Styling: Tailwind CSS with custom Discord-themed color palette
  • State Management: TanStack Query (React Query) for server state management
  • Routing: Wouter for lightweight client-side routing
  • Theme System: Custom theme provider supporting light/dark modes

Backend Architecture

  • Runtime: Node.js with Express.js framework
  • Language: TypeScript with ES modules
  • API Integration: Discord API v10 for user data retrieval
  • Validation: Zod schemas for request/response validation
  • Development: Hot reload with Vite middleware integration

Database Layer

  • ORM: Drizzle ORM configured for PostgreSQL
  • Database: PostgreSQL (via Neon Database serverless)
  • Schema Management: Drizzle migrations with push capabilities
  • Current Implementation: In-memory storage for development with database setup ready for production

Key Components

Frontend Components

  • SearchForm: Main user input component with validation for Discord User IDs
  • UserCard: Display component for Discord user information including avatar, badges, and account details
  • ThemeProvider: Global theme management with localStorage persistence
  • UI Components: Complete shadcn/ui component library for consistent design

Backend Services

  • Discord API Client: Handles authentication and user data retrieval from Discord
  • Validation Layer: Zod schemas ensuring type-safe API communication
  • Storage Abstraction: Interface-based storage system supporting both memory and database implementations
  • Error Handling: Comprehensive error handling with proper HTTP status codes

Shared Schema

  • Type Definitions: Shared TypeScript types between frontend and backend
  • Validation Schemas: Zod schemas for Discord user data and API requests
  • Database Models: Drizzle schema definitions for user data

Data Flow

  1. User Input: User enters Discord User ID in the search form
  2. Validation: Client-side validation ensures proper ID format (17-19 digits)
  3. API Request: Frontend sends validated request to backend /api/discord/lookup endpoint
  4. Discord API Call: Backend authenticates with Discord bot token and fetches user data
  5. Data Processing: Raw Discord data is validated against Zod schemas and enhanced with computed fields
  6. Response: Processed user data is returned to frontend with avatar URLs, account age, and badge information
  7. UI Update: UserCard component displays the retrieved information with smooth scrolling

External Dependencies

Core Framework Dependencies

  • React Ecosystem: React 18, React DOM, React Query for state management
  • Backend Framework: Express.js with TypeScript support
  • Database: Drizzle ORM with PostgreSQL support via Neon Database

UI and Styling

  • Radix UI: Comprehensive primitive components for accessibility
  • Tailwind CSS: Utility-first CSS framework with custom theme
  • Lucide React: Icon library for consistent iconography
  • React Icons: Additional icons including Discord branding

Development Tools

  • Vite: Fast build tool with HMR support
  • TypeScript: Type safety across the entire stack
  • ESLint/Prettier: Code quality and formatting (implied by modern setup)

External APIs

  • Discord API v10: Primary data source for user information
  • Discord CDN: Avatar and asset hosting

Deployment Strategy

Development Environment

  • Local Development: Vite dev server with Express API integration
  • Hot Reload: Full-stack hot reload with Vite middleware
  • Environment Variables: Discord bot token and database URL configuration

Production Build

  • Frontend: Vite production build with optimized bundles
  • Backend: ESBuild compilation to single JavaScript file
  • Static Assets: Served from Express with proper caching headers
  • Database: PostgreSQL with connection pooling via Neon Database

Environment Configuration

  • Required Variables:
    • DISCORD_BOT_TOKEN: Bot token from Discord Developer Portal
    • DISCORD_CLIENT_ID: OAuth application client ID
    • DISCORD_CLIENT_SECRET: OAuth application client secret
    • BASE_URL: Base URL for OAuth redirects (e.g., https://yourapp.replit.app)
  • Optional Variables:
    • DATABASE_URL: PostgreSQL connection string (defaults to in-memory storage)
  • Security: Bot token validation and rate limiting considerations

Discord Setup Instructions

  1. Go to Discord Developer Portal (https://discord.com/developers/applications)
  2. Create a new application or use existing one
  3. In "General Information":
    • Copy the "Client ID"
    • Copy/reset the "Client Secret"
  4. In "Bot" section:
    • Create a bot and copy the bot token
  5. In "OAuth2" > "Redirects":
    • Add redirect URL: {BASE_URL}/api/discord/callback
    • For Replit: https://yourapp.replit.app/api/discord/callback

Changelog

  • June 28, 2025: Initial setup with Discord user lookup functionality
  • June 28, 2025: Added Discord OAuth login with configurable BASE_URL
  • June 28, 2025: Enhanced mutual servers detection with improved bot integration
  • June 28, 2025: Fixed footer positioning to stick to bottom of page
  • June 28, 2025: Changed default theme to dark mode
  • June 28, 2025: Added GitHub link integration and use magnifying glass logo with "DisID" branding
  • June 28, 2025: Added animations and improved full-screen centering
  • June 28, 2025: Created bot status checker script (bot-status.js) to monitor Discord bot health
  • June 28, 2025: Integrated Discord bot to run alongside web server with auto-start functionality

User Preferences

Preferred communication style: Simple, everyday language.