COX Coop - Digital Creator Hub

A modern creator cooperative platform built with Next.js, Google Sheets, Firebase, and Vercel. This hub allows creators to sign up via Google Forms, share feedback, tips, and vision goals, all organized and tracked through a central dashboard.

---

🎯 What This Project Does

• Creator Roster - Members register via Google Forms, displayed in a searchable/filterable roster
• Feedback System - Submit problems paired with solutions (no complaints without paths forward)
• Tips & Tricks - Share knowledge and platform expertise with the community
• Vision Board - Declare goals publicly, find accountability partners
• Admin Dashboard - Password-protected analytics, CSV exports, activity tracking

---

🛠️ Tech Stack

Technology	Version	Purpose
Next.js	16.x	React framework with App Router
React	19.x	UI library
TypeScript	5.x	Type safety
Tailwind CSS	4.x	Styling (Neo-Brutalist design)
Google Sheets API	v4	Data storage & retrieval
Google Forms	-	User input collection
Firebase	12.x	Analytics (optional: Firestore)
Vercel	-	Deployment & hosting

---

📁 Project Structure

├── src/
│   ├── app/                      # Next.js App Router
│   │   ├── page.tsx              # Homepage (server component)
│   │   ├── layout.tsx            # Root layout with metadata
│   │   ├── globals.css           # Neo-Brutalist design system
│   │   ├── roster/
│   │   │   └── page.tsx          # Creator roster with filtering
│   │   ├── admin/
│   │   │   ├── page.tsx          # Admin page (server)
│   │   │   └── AdminDashboard.tsx # Dashboard UI (client)
│   │   └── api/
│   │       └── submit/           # API routes for form submissions
│   │           ├── feedback/route.ts
│   │           ├── tip/route.ts
│   │           └── vision/route.ts
│   ├── components/
│   │   ├── HomeClient.tsx        # Homepage client component
│   │   └── SubmitModal.tsx       # In-app submission modal
│   └── lib/
│       ├── firebase.ts           # Firebase configuration
│       ├── sheets.ts             # Google Sheets READ operations
│       ├── sheets-write.ts       # Google Sheets WRITE operations
│       └── analytics.ts          # Dashboard analytics functions
├── public/                       # Static assets
├── .env.example                  # Environment variables template
├── package.json
└── README.md

---

🚀 Quick Start

Prerequisites

• Node.js 18+
• npm, yarn, or pnpm
• Google Cloud account (for Sheets API)
• Firebase account (optional, for analytics)
• Vercel account (for deployment)

1. Clone the Repository

git clone https://github.com/JoeProAI/AI-Creator-Digital-Business.git
cd AI-Creator-Digital-Business

2. Install Dependencies

npm install

3. Set Up Environment Variables

cp .env.example .env.local

Edit .env.local with your credentials (see Environment Variables section).

4. Run Development Server

npm run dev

Open http://localhost:3000 to see the app.

---

🔐 Environment Variables

Create a .env.local file with the following variables:

Google Sheets (Required)

# Your Google Sheet ID (from the URL)
NEXT_PUBLIC_GOOGLE_SHEET_ID=your_sheet_id_here

# API Key for reading public sheets
NEXT_PUBLIC_GOOGLE_SHEETS_API_KEY=your_api_key_here

# Service Account JSON for writing to sheets
GOOGLE_SERVICE_ACCOUNT_KEY={"type":"service_account","project_id":"..."}

Firebase (Optional - for Analytics)

NEXT_PUBLIC_FIREBASE_API_KEY=your_firebase_api_key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your-project.firebaseapp.com
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your-project-id
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your-project.appspot.com
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=123456789
NEXT_PUBLIC_FIREBASE_APP_ID=1:123456789:web:abc123
NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=G-XXXXXXX

Admin Dashboard

NEXT_PUBLIC_ADMIN_PASSWORD=your_secure_password

---

📊 Google Sheets Setup

Step 1: Create Your Google Sheet

1. Go to Google Sheets and create a new spreadsheet
2. Create the following tabs (sheets):
   • Creator Roster - For member registrations
   • Feedback Responses - For feedback submissions
   • Tips Responses - For tips and tricks
   • Vision Responses - For vision/accountability entries

Step 2: Set Up Column Headers

Creator Roster: | User Name | Handle | Type of Content | Focus Area | Open for Collaboration | Collaboration Expectations | Collaboration Topics | Specialties | Willing to Lead | Issue | Proposed Solution |

Feedback/Tips/Vision Responses: | Timestamp | User Name | Handle | Category | Content | Details |

Step 3: Create Google Forms (Optional)

1. Create Google Forms for each submission type
2. Link forms to your spreadsheet tabs
3. Update form URLs in src/components/HomeClient.tsx

Step 4: Enable Google Sheets API

1. Go to Google Cloud Console
2. Create a new project or select existing
3. Enable Google Sheets API
4. Create credentials:
   • API Key (for reading public sheets)
   • Service Account (for writing to sheets)
5. Share your Google Sheet with the service account email

Step 5: Make Sheet Public (for reading)

1. Click Share in your Google Sheet
2. Change to Anyone with the link can view

---

🔥 Firebase Setup (Optional)

Firebase is pre-configured for analytics. To enable:

1. Go to Firebase Console
2. Create a new project
3. Add a web app
4. Copy the config values to your .env.local
5. Enable Analytics in Firebase Console

---

▲ Deploy to Vercel

Option 1: One-Click Deploy

Option 2: Manual Deploy

1. Push your code to GitHub
2. Go to Vercel
3. Import your repository
4. Add environment variables in Vercel dashboard
5. Deploy

Environment Variables in Vercel

Add all variables from .env.local to your Vercel project:

• Go to Project Settings → Environment Variables
• Add each variable for Production, Preview, and Development

---

🎨 Design System

This project uses a Neo-Brutalist design language:

• No border radius - All elements have sharp corners
• Hard shadows - Offset shadows with no blur
• High contrast - Black/white with accent colors
• Utilitarian typography - IBM Plex Mono + Instrument Serif
• Kinetic interactions - Mechanical hover states

Key CSS variables are defined in src/app/globals.css.

---

📱 Pages & Routes

Route	Description
/	Homepage with stats, forms, and info
/roster	Searchable creator roster
/roster?category=X	Filtered roster by category
/admin	Password-protected admin dashboard
/api/submit/feedback	POST endpoint for feedback
/api/submit/tip	POST endpoint for tips
/api/submit/vision	POST endpoint for vision

---

🔧 Customization

Change Branding

1. Update logo in src/components/HomeClient.tsx
2. Modify colors in src/app/globals.css (:root variables)
3. Update metadata in src/app/layout.tsx

Add New Categories

Edit the CATEGORIES array in src/app/roster/page.tsx

Change Google Forms

Update the FORMS object in src/components/HomeClient.tsx

---

📝 API Reference

POST /api/submit/feedback

{
  "userName": "John Doe",
  "handle": "@johndoe",
  "category": "Platform",
  "issue": "Description of the problem",
  "solution": "Proposed solution"
}

POST /api/submit/tip

{
  "userName": "John Doe",
  "handle": "@johndoe",
  "category": "AI Tools",
  "tip": "Your tip here",
  "details": "Additional context"
}

POST /api/submit/vision

{
  "userName": "John Doe",
  "handle": "@johndoe",
  "goal": "What you want to achieve",
  "timeline": "30 days",
  "accountability": "Looking for partner in X area"
}

---

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

---

📄 License

This project is open source and available under the MIT License.

---

🙏 Acknowledgments

• Built by creators, for creators
• Powered by the COX Coop community
• Design inspired by brutalist web design principles

---

Nothing moves forward without solutions. 🚀