Unparty Logo

SPACE

the app for creating space

theunpartyspace

UNPARTY Ecosystem Repository

Repository Overview

theunpartyspace (Color-Driven Design Platform)

Location: unparty-app/theunpartyspace
Status: Active Development
Primary Purpose: Web platform for color extraction, palette generation, and visual design exploration

Tech Stack:

  • Framework: Next.js 14 (App Router)
  • Language: TypeScript
  • UI Library: React 18
  • Styling: Tailwind CSS
  • Component Library: shadcn/ui, Radix UI
  • Form Management: React Hook Form with Zod/Yup validation
  • Analytics: Vercel Analytics (user behavior tracking)
  • Deployment: Vercel

Key Features:

  • Intelligent Color Extraction: Advanced K-means clustering algorithm to extract dominant colors from uploaded images
  • Real-time Color Palette Generation: Generates 5-color palettes with automatic contrast calculation
  • Dynamic Theming: Applies extracted colors to UI components (backgrounds, borders, text) in real-time
  • Accessible Design: Built-in accessibility mode with contrast optimization
  • Image Upload System: Client-side image processing with canvas-based color analysis
  • Multi-step Navigation: Dashboard layout with contextual navigation
  • Responsive Design: Mobile-first approach with adaptive layouts
  • Form Components: Reusable form system with validation and step progression

Architecture:

Code

Web Application (Next.js)
├── Public Routes
│   ├── Landing Page (/)
│   └── Accessibility Mode Toggle
├── Dashboard Routes
│   ├── /next (Dashboard Entry)
│   ├── /then (Secondary View)
│   └── /test (Test Environment)
├── Components
│   ├── ImageUploadComponent (Color Extraction)
│   ├── NavBar (User Interface)
│   ├── ColorContext (State Management)
│   ├── UI Components (shadcn/ui)
│   └── Form Components (Multi-step)
├── Layouts
│   └── DashboardLayout
└── API Routes
    └── /api/basic (Form Submission)

Color Extraction Pipeline:

Integration Points:

  • Vercel Analytics for user behavior tracking
  • S3-compatible storage for background assets
  • Local canvas API for image processing
  • React Context for global color state management

Business Value:

  • ABOUT: Empowers users to understand color theory through visual exploration and real-time feedback
  • BUILD: Enables rapid prototyping of color schemes from existing imagery, accelerating design workflows
  • CONNECT: Facilitates sharing of visual design systems through extracted palettes and applied themes

Relationship to Ecosystem:

  • Demonstrates UNPARTY's commitment to creator-driven design tools
  • Provides visual design capabilities that complement journaling in theunpartyunppp
  • Could integrate with theunpartycrawler for analyzing color patterns in conversation data
  • Aligns with theunpartyrunway methodology through measurable design iterations

Getting Started

Prerequisites

  • Node.js 20.x or higher
  • npm, yarn, pnpm, or bun package manager

Installation

  1. Clone the repository:

    bash

    git clone https://github.com/unparty-app/theunpartyspace.git
cd theunpartyspace
# Note: package.json refers to this as 'uncolor-frontend'

  2. Install dependencies:

    bash

    npm install
# or
yarn install
# or
pnpm install
# or
bun install

  3. Set up environment variables (if needed):

    bash

    cp .env.example .env
# Edit .env with your configuration

Development

Run the development server:

bash

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the application.

Building

Build the application for production:

bash

npm run build
npm run start

Linting

Run ESLint to check code quality:

bash

npm run lint

Project Structure

Code

theunpartyspace/
├── src/
│   ├── app/                    # Next.js App Router pages
│   │   ├── page.tsx           # Landing page with accessibility toggle
│   │   ├── layout.tsx         # Root layout
│   │   ├── next/              # Dashboard entry point
│   │   ├── then/              # Secondary view
│   │   ├── test/              # Test environment
│   │   └── api/               # API routes
│   │       └── basic/         # Form submission endpoint
│   ├── components/            # React components
│   │   ├── ImageUploadComponent.tsx  # Color extraction system
│   │   ├── user/
│   │   │   └── NavBar.tsx     # Navigation bar with upload trigger
│   │   ├── utility/
│   │   │   └── ColorContext.tsx  # Global color state
│   │   ├── ui/                # shadcn/ui components
│   │   │   ├── avatar.tsx
│   │   │   ├── button.tsx
│   │   │   ├── input.tsx
│   │   │   ├── label.tsx
│   │   │   └── form.tsx
│   │   ├── BasicForm.tsx      # Form component
│   │   ├── BasicPageComponent.tsx
│   │   ├── StepLoginForm.tsx
│   │   └── FooterStartHere.tsx
│   ├── layouts/
│   │   └── DashboardLayout.tsx  # Main dashboard layout
│   ├── lib/
│   │   └── utils.ts           # Utility functions
│   └── globals.css            # Global styles
├── public/                    # Static assets
├── .eslintrc.json            # ESLint configuration
├── next.config.mjs           # Next.js configuration
├── tailwind.config.ts        # Tailwind CSS configuration
├── tsconfig.json             # TypeScript configuration
└── package.json              # Dependencies and scripts

Key Features Explained

1. Color Extraction System

The application uses a sophisticated K-means clustering algorithm to extract dominant colors from images:

  • Sampling: 10,000 random pixels are sampled from the uploaded image
  • Clustering: K-means algorithm (10 iterations) groups similar colors
  • Palette Generation: 5 dominant colors are extracted and converted to HEX
  • Real-time Application: Colors are immediately applied to UI components

Implementation: See src/components/ImageUploadComponent.tsx

2. Dynamic Theming

Once colors are extracted, they're applied throughout the interface:

  • Background Colors: Primary color sets the overall theme
  • Border Colors: Secondary colors define component boundaries
  • Text Colors: Automatic contrast calculation ensures readability
  • Component Styling: Avatar, buttons, and panels adopt palette colors

State Management: Uses React Context (ColorContext) for global color state

3. Accessibility Mode

Built-in accessibility features:

  • Toggle between image background and solid color background
  • High-contrast color calculations (WCAG compliant)
  • Keyboard navigation support
  • ARIA attributes for screen readers

4. Dashboard Layout

Multi-page dashboard system:

  • NavBar: Persistent navigation with user profile and upload trigger
  • Panel System: Top panel for stats, main panel for content
  • Modal Upload: Click avatar to trigger image upload overlay
  • Responsive Grid: Adapts to mobile, tablet, and desktop viewports

Development Workflow

Component Development

  1. Create new components in src/components/
  2. Use TypeScript for type safety
  3. Leverage shadcn/ui for consistent design
  4. Implement accessibility features (ARIA, keyboard navigation)

Styling Guidelines

  • Use Tailwind CSS utility classes for styling
  • Extract colors from ColorContext for dynamic theming
  • Ensure contrast ratios meet WCAG AA standards
  • Test responsive behavior across breakpoints

State Management

  • Use React Context for global state (colors)
  • Use local useState for component-specific state
  • Implement useCallback for memoized functions
  • Use refs (useRef) for canvas and DOM manipulation

Form Handling

  • Use React Hook Form for form state management
  • Validate with Zod or Yup schemas
  • Implement multi-step forms with progress tracking
  • Handle submission via API routes

API Routes

POST /api/basic

Form submission endpoint for basic user input.

Request Body:

json

{
  "field1": "value1",
  "field2": "value2"
}

Response:

json

{
  "success": true,
  "message": "Form submitted successfully"
}

Configuration

Next.js Configuration (next.config.mjs)

  • React Strict Mode: Enabled for development best practices
  • SWC Minification: Fast builds with Rust-based minifier
  • Webpack Logging: Build insights for debugging
  • Custom Headers: Security and debugging headers

Tailwind Configuration

  • Custom color system integrated with ColorContext
  • Extended theme with UNPARTY brand colors
  • Responsive breakpoints for mobile-first design
  • Custom animations and transitions

TypeScript Configuration

  • Strict type checking enabled
  • Path aliases configured (@/ for src/)
  • Incremental compilation for faster builds
  • ES2022 target for modern JavaScript features

Testing Strategy

Current State

  • Manual testing via development server
  • Visual regression testing through accessibility mode
  • Cross-browser compatibility testing

Future Enhancements

  • Unit tests for color extraction algorithm
  • Integration tests for form submission
  • E2E tests with Playwright or Cypress
  • Visual snapshot testing for UI components

Deployment

Vercel Deployment (Recommended)

  1. Connect repository to Vercel
  2. Configure environment variables (if needed)
  3. Deploy automatically on push to main branch
  4. Monitor with Vercel Analytics

Manual Deployment

bash

npm run build
npm run start

Ensure environment variables are configured in production environment.

Performance Optimization

  • Image Processing: Canvas operations optimized with scaling
  • Color Sampling: Limited to 10,000 pixels for speed
  • Code Splitting: Next.js automatic code splitting
  • Font Optimization: next/font for optimal web font loading
  • Analytics: Lightweight Vercel Analytics integration

Accessibility

  • WCAG AA Compliance: Contrast ratios calculated automatically
  • Keyboard Navigation: Full keyboard support for all interactions
  • Screen Reader Support: ARIA labels and semantic HTML
  • Focus Management: Visible focus indicators
  • Accessibility Mode: High-contrast alternative presentation

Browser Support

  • Chrome/Edge (latest 2 versions)
  • Firefox (latest 2 versions)
  • Safari (latest 2 versions)
  • Mobile browsers (iOS Safari, Chrome Mobile)

Contributing

  1. Fork the repository
  2. Create a feature branch (git checkout -b feature/amazing-feature)
  3. Commit your changes (git commit -m 'Add amazing feature')
  4. Push to the branch (git push origin feature/amazing-feature)
  5. Open a Pull Request

Code Standards

  • Follow TypeScript best practices
  • Use ESLint rules defined in .eslintrc.json
  • Maintain Tailwind CSS conventions
  • Write descriptive commit messages
  • Add comments for complex algorithms

Troubleshooting

Common Issues

Issue: Canvas errors on image upload
Solution: Ensure CORS is configured for external images

Issue: Colors not updating after upload
Solution: Check ColorContext provider wraps components

Issue: Build failures
Solution: Run npm install to ensure dependencies are current

Issue: TypeScript errors
Solution: Check tsconfig.json and ensure types are installed

Roadmap

Near-term Goals

  • Add color palette export (JSON, CSS, SCSS)
  • Implement color harmony suggestions
  • Add color naming using ML models
  • Save and manage multiple palettes
  • User authentication and profile system

Long-term Vision

  • Integration with design tools (Figma, Sketch)
  • AI-powered color scheme recommendations
  • Collaborative palette sharing
  • Color accessibility analyzer
  • Integration with theunpartyunppp for journal theming

Learn More

Next.js Resources

Color Theory Resources

  • UNPARTY Organization - GitHub organization with all repositories
  • theunpartyapp/ - Web platform with CMS and e-commerce
  • theunpartyunppp/ - Native iOS/macOS journaling application
  • theunpartyrunway/ - Development automation and velocity tracking
  • theunpartycrawler/ - Analytics intelligence and conversation processing

License

License information to be determined. Please contact the UNPARTY development team for licensing inquiries.

Maintenance

Last Updated: 2025-10-29
Maintained By: UNPARTY Development Team
Status: 🚀 Active Development

Contact

For questions, issues, or contributions, please open an issue on GitHub or contact the UNPARTY development team.

Status: Active Development
Focus: Empowering creators with intelligent color design tools while protecting privacy and cost-sensitivity