Unparty Logo

TERMINAL

the ui app for terminal

theunpartyterminal

Location: https://github.com/unparty-app/theunpartyterminal
Status: Active Development
Primary Purpose: Interactive terminal-style community platform for creator collaboration and project building

Overview

UNPARTY Terminal is an innovative web application that enables creators to collaborate, build, and share interactive projects through a unique terminal-style interface. The platform provides a guided journey system that walks users through platform features including collaboration tools, customization options, and project management capabilities.

Tech Stack

  • Framework: Next.js 14 (App Router)
  • Language: TypeScript, JavaScript (React)
  • Styling: Tailwind CSS with custom terminal aesthetics
  • Fonts: Inter, Major Mono Display, Space Grotesk, VT323
  • Database: Firebase (user data and status)
  • Analytics: Google Analytics, Vercel Analytics
  • Deployment: Vercel
  • Build Tool: npm
  • Linting: ESLint with Next.js config

Key Features

Interactive Terminal Interface

  • Terminal-style UI: Retro terminal aesthetic with green-on-black color scheme and monospace fonts
  • Command Processing: Interactive command-line interface for navigation and actions
  • Mobile Overlay: Responsive design with dedicated mobile input handling
  • Keyboard Navigation: Full keyboard support with arrow keys and Enter

Guided Journey System

  • Step Manager: Multi-step onboarding and feature exploration system
  • Journey Types:
    • Collaboration journey
    • Web3 integration exploration
    • Design innovation walkthrough
    • Personalization options
  • Progress Tracking: Step completion scoring and user progress persistence
  • Interactive Options: Keyboard and mouse-driven option selection

User Experience

  • Customization: Theme switching (default, high-contrast, retro, modern)
  • User Profiles: Username submission and avatar management
  • Gallery System: User image gallery and upload functionality
  • Status Management: Real-time user status updates via API

Developer Features

  • Component System: Modular component architecture with Box/Display pattern
  • Automation Scripts: 17+ bash scripts for component workflow automation
  • Claude API Integration: AI-powered component analysis and improvement
  • ASCII Art: Terminal-style ASCII art rendering and animations

Architecture

Code

Terminal Web App (Next.js)
├── Public Routes (Terminal Interface)
├── API Routes
│   ├── /api/user-status (Firebase integration)
│   ├── /api/slack-updates (Slack notifications)
│   ├── /api/slack-token (Authentication)
│   └── /api/slack-event (Event handling)
├── Components (Modular UI)
│   ├── Terminal (Main interface)
│   ├── About (Journey system)
│   ├── User Management (Avatar, Gallery, Image)
│   ├── Customization (Theme, Preferences)
│   └── UI Components (Buttons, Inputs, Utilities)
├── Automation Scripts (Bash)
│   ├── Component Creation
│   ├── Component Merging
│   ├── Claude AI Integration
│   └── Deployment Automation
└── Styling (CSS/Tailwind)

Component Architecture

The application follows a consistent Box/Display pattern:

  • Box Components: Container logic, state management, and data flow
  • Display Components: Presentation layer, user interaction, and visual rendering

Example structure:

Code

components/
├── terminal/
│   ├── terminal.tsx (Main component)
│   ├── terminalBox.tsx (Logic container)
│   ├── terminalDisplay.tsx (Visual presentation)
│   ├── terminalinput.tsx (Input handling)
│   └── terminal.css (Styling)
├── about/
│   ├── aboutBox.tsx (Journey logic)
│   ├── aboutDisplay.tsx (Step rendering)
│   ├── stepmanager.tsx (Progress management)
│   └── types.ts (TypeScript definitions)

Development Workflow

Automation Scripts

The repository includes 17 automation scripts for efficient development:

  1. Component Creation

    • create-component.sh - Scaffold new components
    • component-workflow.sh - Full component development workflow
    • component-waterfall.sh - Sequential component processing

  2. Component Analysis

    • call-claude.sh - General Claude API interaction
    • call-claude-component.sh - Component-specific analysis
    • analyze-component-with-claude.sh - Deep component analysis
    • improve-component.sh - AI-powered improvements

  3. Component Merging

    • merge-component.sh - Merge two components
    • merge-component-analyze.sh - Analyze merge candidates
    • merge-component-build.sh - Build merged components
    • compile-merged-component.sh - Compile final merged output
    • consolidate-component-files.sh - Consolidate component files

  4. Deployment & Management

    • push-to-master.sh - Git automation
    • create-branch.sh - Branch creation
    • update-status.sh - Status updates
    • vercel-token.sh - Vercel authentication
    • error-component-icon.sh - Error handling for icons

Getting Started

Prerequisites: Node.js 14+, npm

Installation:

bash

# Clone repository
git clone https://github.com/unparty-app/theunpartyterminal.git
cd theunpartyterminal

# Install dependencies
npm install

# Run development server
npm run dev

Available Commands:

bash

npm run dev      # Start development server (http://localhost:3000)
npm run build    # Build for production
npm run start    # Start production server
npm run lint     # Run ESLint

Development Guidelines

  1. Follow Box/Display Pattern: Separate logic from presentation
  2. Use Automation Scripts: Leverage Claude integration for component work
  3. Maintain Terminal Aesthetic: Keep retro terminal styling consistent
  4. TypeScript First: Use TypeScript for type safety
  5. Accessibility: Ensure keyboard navigation and ARIA labels
  6. Mobile Responsive: Test mobile overlay and responsive behavior

Integration Points

External Services

  • Firebase: User authentication and status persistence
  • Google Analytics: Usage tracking and user behavior analysis
  • Vercel Analytics: Performance monitoring and insights
  • Slack: Team notifications and event webhooks
  • Claude API: AI-powered code analysis and component improvements

UNPARTY Ecosystem

  • theunpartyapp: Shares design language and branding
  • theunpartyunppp: Common user identity and journaling concepts
  • theunpartyrunway: Development automation patterns and cost tracking
  • theunpartycrawler: Analytics integration for conversation insights

Business Value

ABOUT (Understanding)

  • Interactive Learning: Users learn platform capabilities through guided journeys
  • Terminal Experience: Unique interface that engages technical and creative users
  • Journey System: Progressive feature discovery with step-by-step guidance

BUILD (Creation)

  • Component System: Modular architecture enables rapid feature development
  • Automation Tools: Scripts reduce development time and improve consistency
  • Claude Integration: AI assistance accelerates component improvement and analysis
  • Customization: Theme system allows user personalization and experimentation

CONNECT (Sharing)

  • Community Platform: Terminal interface fosters collaboration between creators
  • Status System: Real-time user presence and activity sharing
  • Gallery Features: Visual content sharing and user expression
  • Slack Integration: Team communication and project updates

Relationship to Ecosystem

theunpartyterminal serves as the community engagement layer of the UNPARTY ecosystem:

  • 🌐 Public-Facing: Terminal interface for creator onboarding and exploration
  • 🛠️ Development Hub: Automation scripts demonstrate UNPARTY's AI-powered workflows
  • 🎨 Design Innovation: Terminal aesthetic showcases UNPARTY's unique design philosophy
  • 🤝 Community Building: Collaboration features connect creators in an interactive space

The terminal application bridges the gap between UNPARTY's content platforms (theunpartyapp, theunpartyunppp) and development tools (theunpartyrunway, theunpartycrawler) by providing an engaging entry point for new users while demonstrating advanced technical capabilities.

Data Flow

Configuration Files

  • next.config.js - Next.js configuration
  • tailwind.config.js - Tailwind CSS customization
  • postcss.config.js - PostCSS setup
  • tsconfig.json - TypeScript configuration
  • jsconfig.json - JavaScript configuration
  • .eslintrc.json - ESLint rules
  • components.json - shadcn/ui component configuration
  • .env - Environment variables (not committed)

Project Structure

Code

theunpartyterminal/
├── src/app/
│   ├── api/                    # API routes
│   │   ├── user-status/       # User status management
│   │   ├── slack-updates/     # Slack integration
│   │   ├── slack-token/       # Authentication
│   │   └── slack-event/       # Event handling
│   ├── components/            # React components
│   │   ├── terminal/          # Main terminal interface
│   │   ├── about/             # Journey system
│   │   ├── avatar/            # User avatars
│   │   ├── ascii/             # ASCII art
│   │   ├── customizationstep/ # Theme customization
│   │   ├── usergallery/       # Image gallery
│   │   ├── userimage/         # Image upload
│   │   └── ui/                # Reusable UI components
│   ├── config/                # Configuration
│   ├── layout/                # Layout components
│   ├── lib/                   # Utility functions
│   ├── globals.css            # Global styles
│   ├── layout.tsx             # Root layout
│   └── page.js                # Home page
├── public/                    # Static assets
├── Automation Scripts/        # 17 bash scripts
│   ├── create-component.sh
│   ├── component-workflow.sh
│   ├── call-claude.sh
│   ├── merge-component.sh
│   └── ... (13 more scripts)
├── package.json               # Dependencies
├── PARTY.md                   # Value proposition
└── README.md                  # This file

Contributing

Adding New Components

  1. Use create-component.sh to scaffold component structure
  2. Follow Box/Display pattern for logic/presentation separation
  3. Use TypeScript for type safety
  4. Add CSS modules or Tailwind classes for styling
  5. Test keyboard navigation and accessibility
  6. Run improve-component.sh for AI-powered analysis

Code Quality

  • Run npm run lint before committing
  • Follow existing naming conventions
  • Maintain terminal aesthetic in UI components
  • Document complex logic and state management
  • Ensure mobile responsiveness

Deployment

Platform: Vercel (automatic deployment from main branch)

Environment Variables Required:

  • Firebase configuration
  • Slack webhook URLs
  • Google Analytics ID
  • Claude API key (for automation scripts)
  • Vercel token (for deployment scripts)

Maintenance

Last Updated: 2025-10-30
Maintained By: UNPARTY Development Team
Review Frequency: Continuous (Active Development)

  • PARTY.md - One-sentence value proposition and current state
  • UNPARTY Ecosystem Documentation (parent issue)
  • Component-specific README files (in component directories)
  • Automation script documentation (inline in .sh files)

Key Differentiators

  • 🖥️ Terminal Aesthetic: Unique retro interface sets UNPARTY apart from traditional web apps
  • 🤖 AI-Powered Development: Claude integration automates component analysis and improvement
  • 📚 Guided Journeys: Interactive step-by-step platform exploration
  • 🎨 Customization First: Multiple themes and personalization options
  • ⌨️ Keyboard-Driven: Full keyboard navigation for power users
  • 🔧 Developer-Friendly: Extensive automation scripts for efficient development
  • 📱 Mobile-Aware: Dedicated mobile overlay and responsive design

Next Steps

  1. ✅ Document repository structure and tech stack
  2. ✅ Explain component architecture and patterns
  3. ✅ Detail automation workflow and scripts
  4. ✅ Map integration points with UNPARTY ecosystem
  5. ✅ Provide business value alignment (ABOUT → BUILD → CONNECT)
  6. 📋 Expand API documentation for external integrations
  7. 📋 Create component library documentation
  8. 📋 Add testing strategy and coverage information
  9. 📋 Document theming system and customization API
  10. 📋 Create video demos of journey system and features

Status: 🚧 Active Development
Focus: Enabling creators to collaborate, build, and share through an innovative terminal-style interface while protecting creator ownership, privacy, and cost-sensitivity.