Unparty Logo

DASHBOARD

the dashboard for founders

theunpartydashboard

Location: unparty-app/theunpartydashboard
Status: Active Development
Primary Purpose: Business management dashboard for UNPARTY FOUNDERS CIRCLE community

Overview

The Unparty Dashboard is a full-stack web application that provides invoice management, customer tracking, and business analytics for the UNPARTY FOUNDERS CIRCLE community. It serves as a space to start somewhere, a playground for ideas, and accountability for commitments.

Tech Stack

  • Framework: Next.js 14.2.3 (App Router)
  • Language: TypeScript 5.2.2
  • Database: Vercel Postgres
  • Authentication: NextAuth.js 5.0.0-beta.17
  • Runtime: Node.js ≥18.17.0
  • Styling: Tailwind CSS 3.3.3
  • Forms: Zod 3.22.2 validation
  • Icons: Heroicons 2.0.18
  • Security: bcrypt 5.1.1 for password hashing
  • Deployment: Vercel
  • Build Tool: Next.js compiler

Key Features

Dashboard Analytics

  • Real-time Metrics: Visual charts showing daily entries and revenue trends
  • Summary Cards: Quick overview of invoices (collected, pending, total)
  • Customer Insights: Track total customers and growth
  • Recent Activity: Latest invoice and customer interactions

Invoice Management

  • Full CRUD Operations: Create, read, update, and delete invoices
  • Status Tracking: Monitor payment status (paid, pending)
  • Customer Linking: Associate invoices with customer records
  • Search & Filter: Advanced search with pagination
  • Bulk Operations: Manage multiple invoices efficiently

Customer Management

  • Customer Database: Comprehensive customer information storage
  • Profile Management: Customer details with profile images
  • Invoice History: View all transactions per customer
  • Aggregate Metrics: Total invoices, pending, and paid amounts per customer

Authentication & Security

  • Secure Login: Email/password authentication via NextAuth.js
  • Protected Routes: Middleware-based route protection
  • Session Management: Persistent user sessions
  • Password Security: bcrypt hashing for password storage
  • Credential Validation: Zod schema validation for inputs

User Interface

  • Responsive Design: Mobile-first Tailwind CSS implementation
  • Dark/Light Themes: Professional styling with custom fonts
  • Accessible Components: WCAG-compliant UI elements
  • Loading States: Skeleton loaders and suspense boundaries
  • Error Handling: User-friendly error messages

Architecture

Code

Web Dashboard (Next.js 14)
├── Public Routes
│   ├── Homepage (Marketing)
│   └── Login (Authentication)
├── Protected Routes (Dashboard)
│   ├── Overview (Analytics)
│   ├── Invoices (CRUD)
│   └── Customers (Management)
├── API Layer
│   ├── Server Actions (app/lib/actions.ts)
│   └── Data Fetching (app/lib/data.ts)
├── Database (Vercel Postgres)
│   ├── users (Authentication)
│   ├── customers (Customer data)
│   ├── invoices (Transaction data)
│   └── revenue (Analytics data)
└── Middleware (Auth protection)

Application Flow

Data Model

Users Table

  • id: UUID (primary key)
  • name: VARCHAR
  • email: VARCHAR (unique)
  • password: VARCHAR (bcrypt hashed)

Customers Table

  • id: UUID (primary key)
  • name: VARCHAR
  • email: VARCHAR
  • image_url: VARCHAR

Invoices Table

  • id: UUID (primary key)
  • customer_id: UUID (foreign key → customers)
  • amount: INTEGER (cents)
  • status: ENUM ('pending', 'paid')
  • date: DATE

Revenue Table

  • month: VARCHAR (primary key)
  • revenue: INTEGER

Integration Points

  • Vercel Postgres: Database hosting and management
  • NextAuth.js: Authentication provider and session management
  • Vercel: Platform deployment with automatic optimization
  • Google Fonts: Typography (Inter, Lusitana, Source Code Pro)
  • Heroicons: UI iconography
  • Tailwind CSS: Utility-first styling framework

Business Value

ABOUT: Understanding Business Performance

The dashboard provides real-time visibility into business metrics:

  • Track invoice collection rates and pending payments
  • Monitor customer growth and engagement
  • Analyze revenue trends over time
  • Identify bottlenecks in payment collection

Creator Privacy: All financial data is isolated per user account with secure authentication.

BUILD: Creating & Managing Operations

Enables efficient business operations:

  • Create and manage invoices with validation
  • Maintain customer relationships and history
  • Track payment status and follow up on pending invoices
  • Seed demo data for testing and development

Creator Ownership: Users own their invoice and customer data with full CRUD control.

CONNECT: Stakeholder Communication

Facilitates transparent reporting:

  • Visual dashboards for board meetings and reviews
  • Historical data for trend analysis
  • Export-ready invoice and customer reports
  • Demo credentials for stakeholder access

Cost Sensitivity: Free tier Vercel Postgres support, optimized queries, and efficient caching.

Relationship to Ecosystem

Part of UNPARTY FOUNDERS CIRCLE

The dashboard serves the founders' community by providing:

  • Accountability Tools: Track commitments and progress
  • Financial Transparency: Clear view of business metrics
  • Community Support: Shared tooling for founder success

Integration with Other UNPARTY Repositories

  • theunpartyapp: Shares FOUNDERS CIRCLE branding and design system
  • theunpartyrunway: Could be tracked for development velocity metrics
  • theunpartycrawler: Could analyze usage patterns and feature adoption

Ecosystem Position

  • User-Facing: ✅ Primary (Founders and business users)
  • Developer-Facing: ❌ No
  • Platform: Web
  • Primary Function: Business Management & Analytics

Getting Started

Prerequisites

  • Node.js ≥18.17.0
  • npm or yarn package manager
  • Vercel Postgres database (or compatible PostgreSQL)

Installation

bash

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

# Navigate to project directory
cd theunpartydashboard

# Install dependencies
npm install

# Set up environment variables
cp .env.example .env.local
# Add your database connection string and NextAuth secret

Environment Variables

Create a .env.local file with:

env

# Database
POSTGRES_URL=your_postgres_connection_string
POSTGRES_PRISMA_URL=your_prisma_connection_string
POSTGRES_URL_NON_POOLING=your_non_pooling_string

# NextAuth
AUTH_SECRET=your_nextauth_secret
AUTH_URL=http://localhost:3000

Database Setup

bash

# Seed the database with demo data
npm run seed

Development

bash

# Start development server
npm run dev

# Open browser to http://localhost:3000

Demo Credentials

For testing purposes:

Project Structure

Code

theunpartydashboard/
├── app/                    # Next.js App Router
│   ├── dashboard/         # Protected dashboard routes
│   │   ├── (overview)/    # Dashboard home with analytics
│   │   ├── invoices/      # Invoice management (list, create, edit)
│   │   └── customers/     # Customer management (list, view)
│   ├── login/             # Authentication pages
│   ├── lib/               # Core utilities
│   │   ├── actions.ts     # Server Actions (mutations)
│   │   ├── data.ts        # Data fetching functions
│   │   ├── definitions.ts # TypeScript type definitions
│   │   ├── utils.ts       # Helper functions
│   │   └── placeholder-data.js # Demo data for seeding
│   ├── ui/                # Reusable UI components
│   ├── layout.tsx         # Root layout with fonts
│   └── page.tsx           # Homepage
├── public/                # Static assets (images, favicon)
├── scripts/               # Database seeding scripts
├── auth.ts                # NextAuth configuration
├── auth.config.ts         # Auth configuration
├── middleware.ts          # Route protection middleware
└── [config files]         # Next.js, TypeScript, Tailwind, ESLint

Available Scripts

bash

# Development
npm run dev              # Start development server on http://localhost:3000

# Production
npm run build            # Build optimized production bundle
npm run start            # Start production server

# Code Quality
npm run lint             # Run ESLint for code quality
npm run prettier         # Format code with Prettier
npm run prettier:check   # Check code formatting

# Database
npm run seed             # Populate database with demo data

Deployment

Vercel Deployment (Recommended)

  1. Connect Repository: Link GitHub repo to Vercel
  2. Configure Environment: Add environment variables in Vercel dashboard
  3. Deploy: Automatic deployment on git push

bash

# Or deploy via Vercel CLI
npm i -g vercel
vercel

Manual Deployment

bash

# Build production bundle
npm run build

# Start production server
npm run start

Production Requirements:

  • Node.js ≥18.17.0
  • PostgreSQL database (Vercel Postgres or compatible)
  • Environment variables configured
  • HTTPS for secure authentication

Project Health

⚠️ Known Issues

Security Vulnerabilities: 14 total (as of last audit)

  • Critical: 1 (Next.js cache poisoning)
  • High: 4 (braces, cross-spawn, ws)
  • Moderate: 5 (Babel, micromatch, nanoid, tar)
  • Low: 4 (cookie, brace-expansion)

Action Items:

  1. Run npm audit fix for non-breaking fixes
  2. Update Next.js to latest stable version
  3. Review and update vulnerable dependencies

Limitations:

  • Requires internet access for Google Fonts during build
  • Vercel Postgres required for full functionality
  • Demo credentials are publicly known (change in production)

Development Guidelines

Code Style

  • TypeScript: Strict mode enabled
  • ESLint: Next.js recommended config
  • Prettier: Tailwind CSS plugin for class sorting
  • Formatting: Run npm run prettier before commits

Testing Strategy

  • Manual Testing: Use demo credentials to test all features
  • Database: Use npm run seed to reset test data
  • Browser Testing: Chrome, Firefox, Safari, mobile viewports

Common Tasks

Add a new page:

  1. Create route in app/dashboard/[name]/page.tsx
  2. Add navigation link in app/ui/dashboard/nav-links.tsx
  3. Update middleware if authentication required

Modify database schema:

  1. Update type definitions in app/lib/definitions.ts
  2. Modify SQL queries in app/lib/data.ts and app/lib/actions.ts
  3. Update seed data in app/lib/placeholder-data.js
  4. Run npm run seed to recreate database

Add a new UI component:

  1. Create component in app/ui/[name].tsx
  2. Follow existing patterns (use clsx for conditional classes)
  3. Export from component file
  4. Import and use in pages

Screenshots

Homepage

<img width="1280" height="720" alt="UNPARTY Dashboard Homepage" src="https://github.com/user-attachments/assets/668cfd07-4171-4ba3-a3ce-e0e251685b42" />

The landing page showcases the FOUNDERS CIRCLE x UNPARTY.APP branding with a clean, professional design and clear call-to-action.

Login Page

<img width="1280" height="720" alt="UNPARTY Dashboard Login" src="https://github.com/user-attachments/assets/ebc18c3f-a05f-443d-8d19-97f8be1ae798" />

Secure authentication interface with email/password login functionality.

Contributing

This project is part of the UNPARTY FOUNDERS CIRCLE initiative. For contribution guidelines and community standards, visit unparty.app/founders.

Development Workflow

  1. Create feature branch from main
  2. Make changes and test locally
  3. Run npm run lint and npm run prettier
  4. Submit pull request with clear description
  5. Wait for review and CI checks

Maintenance

Last Updated: 2025-10-29
Maintained By: UNPARTY FOUNDERS CIRCLE Team
Review Frequency: Continuous with active development

Status: 🚀 Active Development
Focus: Providing founders with accountability tools and business management capabilities while protecting creator ownership, privacy, and cost-sensitivity.

Created for FOUNDERS CIRCLE x UNPARTY.APP - A space to start somewhere, a playground for ideas, a commitment to accountability.