Unparty Logo

STARTER

the app for we shall find out

theunpartystarter

Location: https://github.com/unparty-app/theunpartystarter
Status: Active Development
Primary Purpose: Foundation blogging platform and brand identity system

Welcome to UNPARTY.APP!

UNPARTY is a dynamic blogging platform that evolves as content is created, serving as the foundational starter template for the UNPARTY ecosystem. This repository represents the initial implementation of ideas, stories, and research compiled through personal growth, creative exploration, and the acceptance that a plan is merely the beginning of a journey.

Tech Stack

  • Framework: RedwoodJS 7.7.3 (Full-stack React framework)
  • Language: TypeScript
  • Database: PostgreSQL via Prisma ORM
  • Authentication: Clerk
  • Deployment: Vercel
  • Styling: Tailwind CSS
  • Build Tool: Yarn 4.2.2
  • Node Version: 20.x

Key Features

Content Management

  • Blog/Post System: Create and manage blog posts with comments
  • Articles: Dedicated article management system
  • Stories: Curated story navigation and presentation
  • MDX Support: Rich content creation with MDX format
  • Rich Text Editor: React Quill integration for content editing

Brand Identity System

  • Brand Name Management: Customizable brand naming with font selection
  • Brand Descriptions: 360-character descriptions with secondary fonts
  • Brand Icons: Icon management system
  • Color Palette System: Dynamic color theming
    • Card backgrounds
    • Icon foregrounds/backgrounds
    • Primary and secondary colors
    • Custom background and text color pickers

User Experience

  • Landing Page Builder: Customizable landing pages with brand elements
  • About Section: Detailed about pages with priority lists
  • Contact Form: User contact and messaging system
  • Multiple Specialized Pages: Mission, Mood, Effects, 30x30, Founders, Civic engagement
  • Responsive Design: Mobile-first approach with Tailwind CSS

Admin Features

  • Admin Panel: Content management interface
  • Build Tab: Development and construction workflows
  • Priority Management: Task and priority list system
  • Navigation Cards: Modular navigation components
  • Universal Sidebar: Consistent navigation across platform

Developer Experience

  • GraphQL API: Type-safe API with SDL definitions
  • Testing Infrastructure: Jest configured for both API and web
  • Storybook Integration: Component development and documentation
  • Dev Playground: Experimental feature testing environment

Architecture

Code

RedwoodJS Application
├── Web Side (Frontend)
│   ├── Pages (HomePage, AboutPage, BlogPage, etc.)
│   ├── Layouts (UniversalLayout, BlogLayout, StoriesLayout)
│   ├── Components (70+ reusable components)
│   │   ├── Brand System (BrandName, BrandDescription, BrandIcon)
│   │   ├── Color System (BgColorPicker, TextColorPicker, ColorCell)
│   │   ├── Content (Article, Post, Comment, RichTextEditor)
│   │   ├── Navigation (Header, Footer, Sidebar, NavigationCards)
│   │   └── UI Elements (Card, Grid, Form, Button components)
│   ├── Store (Redux state management)
│   ├── MDX Content
│   └── GraphQL Queries
│
├── API Side (Backend)
│   ├── GraphQL Schema (SDL files)
│   │   ├── posts.sdl.ts
│   │   ├── abouts.sdl.ts
│   │   ├── brandNames.sdl.ts
│   │   ├── brandDescriptions.sdl.ts
│   │   ├── brandIcons.sdl.ts
│   │   ├── colors.sdl.ts
│   │   ├── comments.sdl.ts
│   │   ├── contacts.sdl.ts
│   │   ├── users.sdl.ts
│   │   └── landingPages.sdl.ts
│   ├── Services (Business logic)
│   │   ├── Brand Services (brandNames, brandDescriptions, brandIcons)
│   │   ├── Content Services (posts, abouts, mdxes, comments)
│   │   └── User Services (users, contacts)
│   └── Database (Prisma + PostgreSQL)
│       └── schema.prisma (10+ models)
│
└── Shared Configuration
    ├── TypeScript Config
    ├── Tailwind Config
    ├── ESLint Config
    └── Prettier Config

Database Schema

The application uses PostgreSQL with the following core models:

  • Post: Blog posts with comments relationship
  • Comment: User comments on posts
  • User: Authentication and user management with roles
  • About: About section content with rich customization
  • Contact: Contact form submissions
  • LandingPage: Customizable landing pages with brand elements
  • Color: Color palette management (card, icon, backgrounds)
  • BrandName: Brand identity with custom fonts
  • BrandDescription: Brand descriptions with secondary fonts
  • BrandIcon: Brand icon management

Integration Points

Authentication

  • Clerk: User authentication and session management
  • Environment variable: CLERK_PUBLISHABLE_KEY

Deployment

  • Vercel: Hosting and deployment platform
  • Vercel Analytics integration via @vercel/analytics
  • Experimental Corepack enabled

External Services

  • PostgreSQL: Production database (DATABASE_URL)
  • Vercel Blob: File storage (likely for images/media)

Development Tools

  • RedwoodJS CLI: Project scaffolding and management
  • Prisma: Database ORM and migrations
  • GraphQL: API layer with type safety
  • Storybook: Component development and documentation

Business Value

ABOUT (Understanding)

theunpartystarter helps users understand the UNPARTY vision through:

  • Personal Storytelling: Share experiences, ideas, and research compiled through personal growth
  • Brand Identity Exploration: Discover and define brand identity through customizable elements
  • Content Organization: Structured content system for articles, posts, and stories
  • Mission Communication: Dedicated pages for mission, mood, and foundational concepts

BUILD (Creation)

theunpartystarter enables creation through:

  • Content Creation Tools: Rich text editor, MDX support, and flexible content management
  • Brand Building System: Comprehensive tools for creating and managing brand identity
  • Customization Framework: Color palettes, fonts, icons, and layout customization
  • Developer Playground: Experimental environment for testing new ideas
  • Template Foundation: Starter template for building additional UNPARTY applications

CONNECT (Sharing)

theunpartystarter facilitates connection through:

  • Public Blog Platform: Share posts and articles with readers
  • Comment System: Enable dialogue and community engagement
  • Contact Forms: Direct communication channels
  • Navigation System: Intuitive navigation cards and sidebar for content discovery
  • Landing Pages: Customizable entry points for different audiences
  • Stories Feature: Curated narrative experiences

Relationship to UNPARTY Ecosystem

Position in Ecosystem

theunpartystarter serves as the foundational web platform in the UNPARTY ecosystem:

  • Starter Template: Provides the baseline architecture for web applications
  • Brand System Origin: Establishes brand identity patterns used across ecosystem
  • Content Foundation: Defines content structure (posts, articles, stories) used elsewhere
  • Design System: Establishes UI/UX patterns (navigation cards, sidebars, color system)

Integration with Other Repositories

Supports theunpartyapp (Main Web Platform):

  • Provides architectural patterns and component library foundations
  • Establishes brand identity system architecture
  • Defines content management patterns

Complements theunpartyunppp (Native App):

  • Shares conceptual model of stories and content
  • Provides web counterpart to native journaling experience
  • Common brand identity system

Tracked by theunpartyrunway (Dev Tools):

  • Development velocity and cost tracking
  • GitHub workflow automation
  • Sprint and calendar management

Analyzed by theunpartycrawler (Analytics):

  • Content processing and analysis
  • Conversation analytics about development decisions
  • Usage pattern insights

Data Flow

Code

Users → theunpartystarter (Content Creation)
       ↓
   PostgreSQL (Content Storage)
       ↓
   Clerk (Authentication)
       ↓
   Vercel (Deployment)

Getting Started

Prerequisites

  • Node.js 20.x
  • Yarn 4.2.2
  • PostgreSQL database

Installation

bash

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

# Install dependencies
yarn install

# Set up environment variables
cp .env.example .env
# Edit .env with your DATABASE_URL and CLERK_PUBLISHABLE_KEY

# Set up database
yarn rw prisma migrate dev

# Start development server
yarn rw dev

Development

bash

# Run development server (opens browser automatically)
yarn rw dev

# Run tests
yarn rw test

# Run Storybook
yarn rw storybook

# Database operations
yarn rw prisma migrate dev    # Create and apply migrations
yarn rw prisma db push        # Push schema changes (prototyping)
yarn rw prisma studio         # Open Prisma Studio GUI

# Code generation
yarn rw g page MyPage         # Generate page
yarn rw g component MyComp    # Generate component
yarn rw g service MyService   # Generate service

Build & Deploy

bash

# Build for production
yarn rw build

# Deploy to Vercel (configured in vercel.json)
# Automatic deployment via Git push to main branch

Project Structure

Code

theunpartystarter/
├── api/                      # Backend API
│   ├── db/
│   │   ├── schema.prisma    # Database schema
│   │   └── migrations/      # Database migrations
│   └── src/
│       ├── graphql/         # GraphQL SDL definitions
│       └── services/        # Business logic services
│
├── web/                      # Frontend application
│   ├── public/              # Static assets
│   ├── src/
│   │   ├── components/      # 70+ React components
│   │   ├── layouts/         # Page layouts
│   │   ├── pages/           # Page components (30+ pages)
│   │   ├── lib/            # Utility functions
│   │   ├── store/          # Redux state management
│   │   ├── data/           # Static data
│   │   ├── mdx/            # MDX content
│   │   └── graphql/        # GraphQL queries
│   └── config/             # Web configuration
│
├── scripts/                 # Utility scripts
├── .vscode/                # VS Code settings
├── redwood.toml            # RedwoodJS configuration
├── tailwind.config.js      # Tailwind CSS configuration
├── vercel.json             # Vercel deployment config
└── package.json            # Dependencies and scripts

Configuration Files

  • redwood.toml: RedwoodJS app configuration (ports, API URLs, environment variables)
  • tailwind.config.js: Tailwind CSS customization
  • prettier.config.js: Code formatting rules
  • graphql.config.js: GraphQL tooling configuration
  • jest.config.js: Test configuration
  • vercel.json: Vercel deployment settings with Corepack support

Key Design Patterns

Component Organization

  • Atomic Design: Components organized from atoms to organisms
  • Feature-Based: Components grouped by feature (Brand, Color, Navigation)
  • Reusability: 70+ reusable components for consistent UI

State Management

  • Redux Toolkit: Global state management for complex UI state
  • GraphQL Cells: RedwoodJS pattern for data fetching with loading/error states
  • Local State: React hooks for component-level state

Content Strategy

  • Multiple Content Types: Posts, Articles, Stories, About pages
  • Rich Content: MDX support for interactive content
  • Flexible Structure: Customizable sections with priority lists

Brand Identity

  • Composable System: Brand elements (name, description, icon, colors) managed independently
  • Theme Support: Dynamic color theming with preview capability
  • Font Flexibility: Custom font selection per brand element

Testing Strategy

  • Unit Tests: Jest test files alongside components and services
  • Scenarios: Prisma seed scenarios for service testing
  • Storybook: Visual testing and component documentation
  • Type Safety: TypeScript for compile-time error detection

Quality & Standards

Code Quality

  • ESLint: Extends @redwoodjs/eslint-config
  • Prettier: Consistent code formatting with Tailwind plugin
  • TypeScript: Strong typing throughout the application
  • EditorConfig: Consistent editor settings

Best Practices

  • Separation of Concerns: Clear API/Web boundary
  • Type Safety: GraphQL SDL → TypeScript type generation
  • Testing: Scenarios and test files for all services
  • Documentation: Storybook for component documentation

Alignment with UNPARTY Values

Creator Ownership

  • Self-Hosted Content: PostgreSQL database under creator control
  • No Lock-In: Open-source RedwoodJS framework
  • Export Capability: Full database access via Prisma

Privacy Protection

  • Authentication Required: Clerk-based user authentication
  • Role-Based Access: User roles (moderator, etc.) in schema
  • Secure Sessions: Clerk session management

Cost Sensitivity

  • Vercel Deployment: Efficient serverless deployment
  • PostgreSQL: Cost-effective database solution
  • Optimized Build: Production build optimization
  • Tracked Development: Integration with theunpartyrunway cost tracking

Contributing

This repository represents the foundational starter template for UNPARTY. When contributing:

  1. Follow RedwoodJS conventions and best practices
  2. Maintain TypeScript type safety
  3. Add tests for new features
  4. Update Storybook for new components
  5. Keep the brand identity system flexible and extensible
  6. Document new features and patterns

RedwoodJS Resources

Building with RedwoodJS provides powerful full-stack capabilities:

Ecosystem Metrics

MetricValue
Components70+ reusable components
Pages30+ specialized pages
Database Models10 core models
GraphQL Schemas10 SDL definitions
Layouts5 layout templates
AuthenticationClerk-based with roles
Framework VersionRedwoodJS 7.7.3
Node Version20.x

Development Philosophy

theunpartystarter embodies the UNPARTY philosophy:

"I am going to be building out all the ideas, stories, and research I compiled through a year navigating grief, failing often, and accepting that a plan is nothing but an idea."

This repository is:

  • Exploratory: A playground for testing ideas
  • Iterative: Built through continuous learning and adaptation
  • Personal: Rooted in authentic experience and storytelling
  • Foundation: A starting point for broader ecosystem development

Roadmap & Vision

Current State

  • ✅ Core blogging platform operational
  • ✅ Brand identity system implemented
  • ✅ Multiple content types supported
  • ✅ Authentication and user management active
  • ✅ Responsive design with Tailwind CSS
  • ✅ Admin panel and build tools

Future Directions

  • Integration with theunpartyapp (main web platform)
  • Enhanced MDX content capabilities
  • Advanced color theme system
  • Extended brand customization options
  • Improved admin workflows
  • Performance optimization
  • UNPARTY Ecosystem: See ecosystem overview documentation
  • theunpartyapp: Main web platform (Next.js)
  • theunpartyunppp: Native iOS/macOS app (Swift)
  • theunpartyrunway: Development automation and tracking
  • theunpartycrawler: Analytics and intelligence platform

License

Part of the UNPARTY ecosystem.

Contact

For questions, contributions, or collaboration:

Status: 🚀 Active Development
Focus: Building the foundational template for UNPARTY ecosystem while protecting creator ownership, privacy, and cost-sensitivity through transparent development and personal storytelling.

Let's Get to Building