Unparty Logo

FOUNDATION

the code that started it all

theunpartyfoundation

Location: unparty-app/theunpartyfoundation
Status: Active Development
Primary Purpose: Foundation web application for the UNPARTY ecosystem - content management and idea submission platform

Tech Stack

  • Framework: React 18.2 (Create React App)
  • Language: JavaScript
  • Database: Firebase Firestore
  • Storage: Firebase Storage
  • Analytics: Firebase Analytics
  • Deployment: Web Platform
  • Styling: Custom CSS
  • UI Icons: FontAwesome Pro
  • Router: React Router DOM v6

Key Features

  • Content Management System: Dynamic article and content sections with category filtering
  • Idea Submission Workflow: Multi-step idea capture system with quick and detailed submission modes
  • Profile Management: User profile interface with custom branding
  • Category Navigation: Sidebar navigation with dynamic filtering (About, Blog, Connect)
  • Article Display System: Firebase-backed content rendering with timestamps and metadata
  • Media Upload System: Image and file upload integration with Firebase Storage
  • Real-time Data Sync: Firestore integration for live content updates
  • Mobile-Responsive Design: Viewport height optimization for mobile devices
  • Custom Typography: UNPARTY branding with custom font integration

Architecture

Code

React Web App
├── Public Interface
│   ├── Header (UNPARTY branding)
│   ├── Sidebar (Category navigation)
│   ├── ArticleSection (Content display)
│   └── Profile (User interface)
├── Content Management
│   ├── JmmSections (Section creation/editing)
│   └── IdeaSection (Idea submission forms)
├── Data Layer
│   ├── Firebase Firestore (sections, ideas collections)
│   └── Firebase Storage (media assets)
└── Routing
    └── React Router (SPA navigation)

Integration Points

  • Firebase Firestore: Real-time database for content and ideas
  • Firebase Storage: Media file hosting and retrieval
  • Firebase Analytics: User behavior tracking
  • FontAwesome Pro: Icon library for UI elements
  • AWS S3: Profile picture hosting (founders-circle-font bucket)

Business Value

ABOUT

Provides a foundation platform for users to understand the UNPARTY ecosystem through organized content sections. The category-based navigation (About, Blog, Connect) helps users discover information about the UNPARTY mission and values.

BUILD

Empowers users to contribute ideas through structured submission workflows. The idea section captures initial thoughts, importance, success vision, first steps, collaborator needs, and excitement levels - enabling creators to articulate and develop their concepts.

CONNECT

Facilitates connection through article content and blog sections. The platform serves as a central hub for sharing information and updates with the UNPARTY community, bridging creator insights with user engagement.

Relationship to Ecosystem

theunpartyfoundation serves as the foundational web presence in the UNPARTY ecosystem:

  • Content Hub: Provides marketing and informational content consumed by web users
  • Idea Gateway: Captures user ideas and submissions that feed into product development
  • Brand Anchor: Establishes UNPARTY visual identity and messaging across the ecosystem
  • Data Source: Generates content and user data that can inform analytics in theunpartycrawler
  • Cost Tracking: Development and hosting costs tracked by theunpartyrunway

Data Flow

Code

Users → theunpartyfoundation → Firebase (Content/Ideas)
                              ↓
                    theunpartycrawler (Analytics)
                              ↓
                    theunpartyrunway (Cost Tracking)

Getting Started

Prerequisites

  • Node.js and npm installed
  • Firebase project configured
  • FontAwesome Pro license (for icons)

Installation

bash

npm install

Development

bash

npm start

Runs the app in development mode at http://localhost:3000.

Note: Uses NODE_OPTIONS=--openssl-legacy-provider for compatibility with older OpenSSL versions.

Build

bash

npm run build

Builds the app for production to the build folder.

Testing

bash

npm test

Launches the test runner in interactive watch mode.

Project Structure

Code

theunpartyfoundation/
├── public/
│   ├── fonts/          # Custom UNPARTY fonts
│   ├── index.html      # App entry point
│   └── manifest.json   # PWA configuration
├── src/
│   ├── App.js          # Main application component
│   ├── Header.js       # UNPARTY header/branding
│   ├── Sidebar.js      # Category navigation
│   ├── ArticleSection.js    # Content display
│   ├── IdeaSection.js       # Idea submission forms
│   ├── JmmSections.js       # Section management
│   ├── Profile.js           # User profile component
│   ├── firebaseConfig.js    # Firebase initialization
│   └── *.css           # Component-specific styles
└── package.json        # Dependencies and scripts

Configuration

Firebase configuration is stored in src/firebaseConfig.js and includes:

  • Firestore database for content storage
  • Firebase Storage for media files
  • Firebase Analytics for usage tracking

Contributing to UNPARTY Ecosystem

This repository is part of the larger UNPARTY ecosystem. When contributing:

  1. Maintain consistency with UNPARTY branding guidelines
  2. Ensure Firebase collections follow established schema patterns
  3. Test responsive design across mobile and desktop viewports
  4. Document any new Firebase collections or storage patterns
  5. Consider cost implications of Firebase usage (tracked by theunpartyrunway)

Key Differentiators

  • Idea-First Design: Built around capturing and nurturing user ideas with structured workflows
  • Category-Based Navigation: Simple three-category system (About, Blog, Connect) for content organization
  • Firebase-Native: Fully integrated with Firebase ecosystem for real-time capabilities
  • Accessibility Focus: Mobile-responsive design with viewport optimization
  • Creator-Centric: Designed to understand that ideas involve starts, stops, and skips

Maintenance

Last Updated: 2025-10-29
Maintained By: UNPARTY Development Team
Review Frequency: Continuous integration with ecosystem updates

Status: ✅ Active Development
Focus: Providing accessible web foundation that understands ideas are full of starts, stops, and skips while protecting creator ownership, privacy, and cost-sensitivity.