LANDING

this is a template for story sharing

theunpartylanding

Location: https://github.com/unparty-app/theunpartylanding
Status: Active Development
Primary Purpose: Static landing page for UNPARTY ecosystem with dynamic content filtering and Firebase integration

Overview

theunpartylanding is the public-facing landing page for the UNPARTY ecosystem. It serves as the first point of contact for visitors, providing an accessible, content-rich introduction to UNPARTY's philosophy and offerings through an interactive, filterable interface.

Tech Stack

Framework: Vanilla JavaScript (ES6 Modules)
Language: JavaScript, HTML5, CSS3
Database: Firebase Firestore
Authentication: Firebase Auth
Analytics: Firebase Analytics
Deployment: Static hosting (Firebase-compatible)
Styling: Custom CSS with modular architecture
Icons: Font Awesome 6

Key Features

Content Management

Dynamic Content Loading: Firestore integration for content sections
Category Filtering: Filter content by about, blog, connect, or view all
Read More/Less Toggle: Expandable content sections for better UX
Infinite Scroll: Load more content as users scroll

Interactive Elements

Mood Feature: Special interactive "MOOD. X UNPARTY" animation page
Profile System: Profile content toggle with sidebar management
Responsive Design: Mobile-first approach with flexible layouts

Design System

Modular CSS: Separate stylesheets for components (cards, buttons, sidebar, articles)
Custom Typography: Brandon Grotesque W05 font family with multiple weights (Black, BlackIt, LightIt, Medium, Regular, Thin)
Themed Components: Consistent styling across all UI elements

Architecture

Code

Landing Page (Static Web App)
├── Entry Points
│   ├── index.html (Main landing page)
│   ├── mood.html (Interactive mood feature)
│   └── loading.html (Loading state)
├── JavaScript Modules
│   ├── firebaseConfig.js (Firebase initialization)
│   ├── firestoreService.js (Database service placeholder)
│   ├── loadContent.js (Dynamic content loading)
│   ├── script.js (UI interactions)
│   └── mood.js (Mood feature logic)
├── Styling
│   ├── styles.css (Global styles)
│   ├── font.css (Typography)
│   ├── card.css (Card components)
│   ├── article.css (Article styling)
│   ├── buttons.css (Button components)
│   ├── sidebar.css (Navigation sidebar)
│   ├── mood.css (Mood feature styles)
│   └── unpartyxmood.css (Mood theme)
└── Assets
    └── BrandonGrotesqueW05* fonts (Black, BlackIt, LightIt, Medium, Regular, Thin)

Integration Points

Firebase Services

Firestore: Dynamic content storage and retrieval
Firebase Auth: User authentication framework
Firebase Analytics: User behavior tracking and insights
Firebase Hosting: Deployment platform (potential)

External Services

Font Awesome: Icon library for UI elements
Google Firebase: Complete backend infrastructure

Data Structure

javascript

// Firestore Collection: "sections"
{
  id: "introduction",
  title: String,
  preview: String,
  content: String,
  category: String // "about" | "blog" | "connect"
}

Business Value

ABOUT

Understanding the UNPARTY philosophy

Introduces visitors to UNPARTY's core mission: "Accessible web and app development that understands ideas are full of starts, stops, and skips"
Provides narrative-driven content that explains the creator's journey and motivations
Filters content by category to help visitors focus on what matters to them

BUILD

Entry point for creators

Demonstrates the simplicity of web-first design
Shows potential creators what UNPARTY can help them build
Serves as a reference implementation of clean, accessible web design
Interactive "build it yourself" message in the mood feature reinforces empowerment

CONNECT

First touchpoint for engagement

Provides connection options through dedicated "connect" content category
Creates emotional connection through personal storytelling
Enables Firebase-powered interactions for future features
Serves as gateway to other UNPARTY ecosystem products

Relationship to Ecosystem

Primary Role

Marketing Gateway: First impression for potential users
Philosophy Communication: Explains UNPARTY's creator-first approach
Ecosystem Hub: Links to other UNPARTY products and services

Integration with Other Repositories

→ theunpartyapp (Web Platform)

Potential redirect destination for deeper engagement
Shares design philosophy and visual identity
Could integrate with CMS for content management

→ theunpartyunppp (Native App)

Introduces the journaling product
Creates interest for mobile app download
Aligns storytelling themes

→ theunpartycrawler (Analytics)

Landing page analytics could feed into conversation analysis
User journey tracking from first visit
Content effectiveness measurement

→ theunpartyrunway (Dev Tools)

Cost tracking for Firebase usage
Development velocity measurement
Budget monitoring for hosting and services

Getting Started

Prerequisites

bash

# Node.js and npm (for package management)
node --version  # v14+
npm --version   # v6+

Installation

Clone the repository

bash

git clone https://github.com/unparty-app/theunpartylanding.git
cd theunpartylanding

Install dependencies

bash

npm install

Firebase Configuration
- Firebase credentials are already configured in firebaseConfig.js
- The configuration file contains the Firebase project settings
- Note: Firebase web API keys are designed to be public and safe for client-side use. Security is enforced through Firestore security rules, not API key secrecy.
Serve locally

bash

# Using Python
python3 -m http.server 8000

# Or using Node.js http-server
npx http-server -p 8000

Access the site

http://localhost:8000

File Structure

Code

theunpartylanding/
├── index.html              # Main landing page
├── mood.html               # Interactive mood feature
├── loading.html            # Loading state page
├── script.js               # Main UI interactions
├── loadContent.js          # Firestore content loader
├── firebaseConfig.js       # Firebase initialization
├── firestoreService.js     # Database service placeholder
├── mood.js                 # Mood animation logic
├── styles.css              # Global styles
├── font.css                # Typography definitions
├── card.css                # Card component styles
├── article.css             # Article component styles
├── buttons.css             # Button component styles
├── sidebar.css             # Sidebar navigation styles
├── mood.css                # Mood feature styles
├── unpartyxmood.css        # Mood theme styles
├── BrandonGrotesqueW05*/   # Font files (Black, BlackIt, LightIt, Medium, Regular, Thin)
├── package.json            # Dependencies
├── package-lock.json       # Dependency lock file
└── .gitignore              # Git ignore rules

Development Guidelines

Code Style

JavaScript: ES6+ syntax with modules
HTML: Semantic HTML5 elements
CSS: BEM-like naming conventions, modular architecture
Comments: Minimal, focused on "why" not "what"

Content Categories

Content is organized into three main categories:

about: Introduction and philosophy
blog: Stories and narratives
connect: Engagement and contact
all: Display everything

Adding New Sections

Create Firestore document in sections collection:

javascript

{
  title: "Section Title",
  preview: "Brief preview text...",
  content: "Full content here...",
  category: "about" // or "blog", "connect"
}

Add HTML section in index.html:

html

<section id="new-section" class="card-content" data-category="about">
  <h2 class="article-heading"></h2>
  <p class="article-preview"></p>
  <div class="full-content" id="fullContentNewSection" style="display: none;">
    <p class="article-paragraph"></p>
  </div>
  <a href="javascript:void(0);" class="read-more-link" 
     onclick="toggleContent('fullContentNewSection', this)">
    <span class="action-text">Read More</span>
  </a>
</section>

Update loadContent.js to fetch the new section

Features in Detail

Content Filtering System

Users can filter content by clicking sidebar links:

about: Personal journey and philosophy
blog: Stories and reflections
connect: Ways to engage
all: Show everything

Mood Feature

Special interactive page (mood.html) with:

Click animation that reveals "build it yourself" message
Reinforces UNPARTY's empowerment philosophy
Separate styling system for unique experience

Firebase Integration

Firestore: Dynamic content management
Auth: User authentication framework (ready for future use)
Analytics: Track user engagement and behavior

Design Philosophy

Accessibility First

Semantic HTML for screen readers
Keyboard navigation support
Clear visual hierarchy
Readable typography (Brandon Grotesque W05)

Creator-Focused

Reflects the idea that "ideas are full of starts, stops, and skips"
Content structure supports non-linear exploration
Emphasizes building and creating

Privacy-Conscious

Minimal tracking
Firebase Analytics for insights only
No unnecessary third-party scripts
Clear data usage

Deployment

Firebase Hosting (Recommended)

bash

# Install Firebase CLI
npm install -g firebase-tools

# Login
firebase login

# Initialize
firebase init hosting

# Deploy
firebase deploy --only hosting

Static Hosting Alternatives

Vercel
Netlify
GitHub Pages
Any static file server

Maintenance

Content Updates

Content is managed through Firebase Firestore:

Access Firebase Console
Navigate to Firestore Database
Update documents in sections collection
Changes reflect immediately on the site

Style Updates

Modular CSS allows targeted updates
Edit specific component files (card.css, buttons.css, etc.)
Global changes go in styles.css

Adding Features

Follow existing patterns in script.js
Keep functions focused and single-purpose
Test across browsers and devices

Cost Considerations

Firebase Usage

Firestore: Free tier sufficient for landing page traffic
Hosting: Generous free tier (10 GB transfer/month)
Analytics: Free and unlimited

Monitoring

Track Firebase usage in console
Set up billing alerts
Consider CDN for static assets at scale

Future Enhancements

Potential Features

Technical Improvements

Security Considerations

Current Setup

Firebase API key is public (expected for web apps)
Firestore security rules should restrict write access
No sensitive data in client-side code

Recommendations

Implement Firestore security rules
Add CAPTCHA for forms (future)
Regular dependency updates
Monitor Firebase security advisories

Contributing

Development Workflow

Create feature branch
Make changes
Test locally
Submit pull request
Deploy after review

Code Review Checklist

Support

Documentation

This README
Firebase Documentation: https://firebase.google.com/docs
Font Awesome Icons: https://fontawesome.com/icons

Ecosystem Documentation

theunpartyapp/CLAUDE.md - Web app development guide
theunpartyrunway/CLAUDE.md - Automation framework guide
UNPARTY Ecosystem Overview - See parent issue for full context

License

License information to be added

Ecosystem Metrics

Repository Type: 🌐 Web Application (Static Landing Page)
Platform: Web (Desktop + Mobile)
Primary Language: JavaScript
Target Audience: Public visitors, potential UNPARTY users
Development Status: Active

Questions Answered

What problem does this repo solve?
Provides an accessible, engaging first touchpoint for UNPARTY that communicates the brand philosophy and serves as a gateway to the ecosystem.
Who is the primary user?
Public visitors discovering UNPARTY, potential creators interested in the platform, and anyone exploring the ABOUT → BUILD → CONNECT journey.
What tech stack does it use?
Vanilla JavaScript, HTML5, CSS3, Firebase (Firestore, Auth, Analytics), Font Awesome.
How does it integrate with other repos?
Serves as marketing gateway to theunpartyapp and theunpartyunppp, provides user journey data for theunpartycrawler, and cost tracking data for theunpartyrunway.
Is it actively developed or archived?
Active development.
What are the key features/capabilities?
Dynamic content filtering, Firebase integration, expandable content sections, interactive mood feature, responsive design.
What external services does it depend on?
Firebase (Firestore, Auth, Analytics), Font Awesome CDN.
How does it align with ABOUT → BUILD → CONNECT?
ABOUT: Introduces UNPARTY philosophy. BUILD: Shows what can be created, empowers with "build it yourself". CONNECT: Provides gateway to engagement and ecosystem.
What business value does it provide?
First impression, brand communication, user acquisition funnel, philosophy education, ecosystem gateway.
How does it protect creator ownership, privacy, and cost-sensitivity?
Minimal tracking, Firebase free tier usage, no vendor lock-in for static content, open architecture allows self-hosting.

Last Updated: 2025-10-29
Maintained By: UNPARTY Development Team
Status: ✅ Complete Documentation

Focus: First touchpoint for the measurable user progress through ABOUT → BUILD → CONNECT while protecting creator ownership, privacy, and cost-sensitivity.

LANDING

theunpartylanding

Content Management

Interactive Elements

Design System

Code

Firebase Services

External Services

Data Structure

javascript

ABOUT

BUILD

CONNECT

Primary Role

Integration with Other Repositories

→ theunpartyapp (Web Platform)

→ theunpartyunppp (Native App)

→ theunpartycrawler (Analytics)

→ theunpartyrunway (Dev Tools)

Prerequisites

bash

Installation

bash

bash

bash

Code

Code Style

Content Categories

Adding New Sections

javascript

html

Content Filtering System

Read More/Less Toggle

Mood Feature

Firebase Integration

Accessibility First

Creator-Focused

Privacy-Conscious

Firebase Hosting (Recommended)

bash

Static Hosting Alternatives

Content Updates

Style Updates

Adding Features

Firebase Usage

Monitoring

Potential Features

Technical Improvements

Current Setup

Recommendations

Development Workflow

Code Review Checklist

Documentation

Ecosystem Documentation