Populemetry

A Turborepo monorepo for Populemetry, the market for entertainment popularity. This repository contains both the static marketing site and the dynamic waitlist application, sharing common components and utilities across both.

What's Inside

This monorepo uses Turborepo to manage two applications and a shared package:

• apps/populemetry-web - A Gatsby static site for marketing pages (landing, contact, terms, privacy)
• apps/populemetry-app - A React SPA built with Vite for the waitlist and user dashboard
• packages/shared - Shared React components, hooks, and utilities used across both apps

The separation makes sense: Gatsby handles the static, SEO-friendly marketing pages, while the React app powers the interactive waitlist and user flows. Both share UI components to keep design consistent.

Tech Stack

• Monorepo: Turborepo with npm workspaces
• Frontend: React 18, TypeScript 5
• Styling: Tailwind CSS 3
• Static Site: Gatsby 5
• React App: Vite 5, React Router 6
• Package Manager: npm

Getting Started

You'll need Node.js 18.0.0 or higher. Verify your setup:

node --version  # Should be >= 18.0.0
npm --version   # Should be >= 8.0.0

First-Time Setup

1. Install dependencies from the root:

npm install

This installs dependencies for all workspaces (root, both apps, and the shared package).

2. Build the shared package before running the apps:

cd packages/shared
npm run build
cd ../..

The shared package needs to be built first since both apps depend on it.

Development

Run both applications simultaneously:

npm run dev

This starts:

• Gatsby site at http://localhost:8000 (GraphiQL at http://localhost:8000/___graphql)
• React app at http://localhost:5173

Both apps support hot module replacement, so changes will reflect immediately in the browser.

Running apps individually:

# Gatsby only
cd apps/populemetry-web && npm run dev

# React app only
cd apps/populemetry-app && npm run dev

Building for Production

Build everything:

npm run build

Or build individual apps:

# Gatsby
cd apps/populemetry-web && npm run build
# Output: apps/populemetry-web/public

# React app
cd apps/populemetry-app && npm run build
# Output: apps/populemetry-app/dist

Testing production builds:

# Gatsby
cd apps/populemetry-web && npm run serve
# Visit http://localhost:9000

# React app
cd apps/populemetry-app && npm run preview
# Visit http://localhost:4173

Project Structure

populemetry/
├── apps/
│   ├── populemetry-web/         # Gatsby static site
│   │   ├── src/
│   │   │   ├── pages/           # Page components (index, contact, terms, privacy)
│   │   │   ├── components/      # App-specific components
│   │   │   ├── hooks/           # App-specific hooks
│   │   │   └── styles/          # Global styles
│   │   ├── gatsby-config.js     # Gatsby configuration
│   │   └── tailwind.config.js   # Tailwind config
│   │
│   └── populemetry-app/         # React SPA
│       ├── src/
│       │   ├── pages/           # Page components (Waitlist, Dashboard, etc.)
│       │   ├── App.tsx          # Main app component with routing
│       │   ├── main.tsx         # Entry point
│       │   └── index.css        # Global styles
│       ├── vite.config.ts       # Vite configuration
│       ├── tailwind.config.js   # Tailwind config
│       └── index.html           # HTML template
│
├── packages/
│   └── shared/                  # Shared components and utilities
│       ├── src/
│       │   ├── components/      # Reusable components (Button, Input, Logo, Footer)
│       │   └── index.ts         # Package exports
│       └── tsconfig.json        # TypeScript config
│
├── turbo.json                   # Turborepo configuration
└── package.json                 # Root package.json with workspace scripts

Available Pages

Gatsby Site (Static)

• / - Landing page
• /404 - 404 error page
• /contact - Contact form
• /contact-confirmation - Contact confirmation
• /terms - Terms of Service
• /privacy - Privacy Policy

React App (Dynamic)

• / - Waitlist registration
• /waitlist-confirmed - Waitlist confirmation
• /funding - Funding tier selection
• /confirm-funding - Funding confirmation
• /dashboard - User dashboard
• /referral-access - Referral link access

Shared Package

The packages/shared directory contains reusable components and utilities used across both applications:

• Logo - Brand logo component (supports light/dark variants)
• Button - Reusable button component with variants
• Input - Form input component
• Footer - Site footer component

When working on shared components, you can watch for changes:

cd packages/shared
npm run dev  # Watches for changes and rebuilds

Common Tasks

# Install all dependencies
npm install

# Run both apps in development
npm run dev

# Build everything
npm run build

# Clean build artifacts
npm run clean

# Build shared package
cd packages/shared && npm run build

# Watch shared package for changes
cd packages/shared && npm run dev

Troubleshooting

Port Already in Use

If you see port conflicts, find and kill the process:

Gatsby (port 8000):

# Windows
netstat -ano | findstr :8000
taskkill /PID <PID> /F

# macOS/Linux
lsof -ti:8000 | xargs kill

React app (port 5173):

# Windows
netstat -ano | findstr :5173
taskkill /PID <PID> /F

# macOS/Linux
lsof -ti:5173 | xargs kill

Shared Package Import Errors

If you see Cannot find module '@populemetry/shared', rebuild the shared package:

cd packages/shared
npm run build

Gatsby Cache Issues

If Gatsby is showing stale content or behaving unexpectedly:

cd apps/populemetry-web
npm run clean
npm run dev

Dependency Issues

If you're experiencing weird dependency problems, sometimes a clean slate helps:

# Remove all node_modules
rm -rf node_modules apps/*/node_modules packages/*/node_modules

# Remove lock file
rm package-lock.json

# Reinstall
npm install

Development Notes

• Hot Module Replacement: Both apps support HMR. Changes should reflect immediately without full page reloads.

• Shared Components: When modifying shared components, run npm run dev in the shared package directory to watch for changes. The apps will pick up the rebuilt package.

• TypeScript: Both apps use strict TypeScript. Type errors will surface in your editor and during builds.

• Tailwind CSS: Each app has its own tailwind.config.js. The shared package doesn't include Tailwind since it's a component library, not a full app.

Deployment

This monorepo is configured for deployment on Vercel with two separate projects:

Gatsby Site (populemetry-web)

The Gatsby static site should be deployed as the main landing page:

1. Create a new Vercel project for populemetry-web

2. Configure the project settings:

   • Root Directory: apps/populemetry-web
   • Framework Preset: Gatsby (auto-detected from vercel.json)
   • Build Command: npm run build (from vercel.json)
   • Output Directory: public (from vercel.json)
   • Install Command: cd ../.. && npm install && cd packages/shared && npm run build (from vercel.json)

3. Assign your main domain to this project (e.g., populemetry.com)

The vercel.json file in apps/populemetry-web/ is already configured with these settings.

React App (populemetry-app)

The React SPA should be deployed as a separate project:

1. Create a new Vercel project for populemetry-app

2. Configure the project settings:

   • Root Directory: apps/populemetry-app
   • Framework Preset: Vite (auto-detected from vercel.json)
   • Build Command: npm run build (from vercel.json)
   • Output Directory: dist (from vercel.json)
   • Install Command: cd ../.. && npm install && cd packages/shared && npm run build (from vercel.json)

3. Assign a subdomain to this project (e.g., app.populemetry.com or waitlist.populemetry.com)

The vercel.json file in apps/populemetry-app/ is already configured with these settings, including SPA routing rewrites.

Important Notes

• Both projects need to be connected to the same Git repository
• The shared package will be built automatically as part of the build process
• Make sure both apps have access to the packages/shared directory
• The Gatsby site should be your primary domain for SEO and marketing purposes
• The React app should be on a subdomain or subpath for user-facing functionality

License

Private - All Rights Reserved