SpreadTheSheets

SpreadTheSheets is a real-time collaborative spreadsheet application built with Next.js, Firebase, and Tailwind CSS. It focuses on fast editing, clean UI, and practical collaboration tools like sharing, presence, chat, version history, and AI-assisted workflows.

Features

• Real-time collaborative grid editing with Firestore-backed sync
• Formula support and computed cell display
• Search and replace tools for fast sheet updates
• Formatting controls (bold, italic, text color, background color)
• Cell comments and dropdown options
• Presence indicators for active collaborators
• Built-in team chat sidebar
• Version history with restore actions
• Share modal with private/view/edit modes and collaborator access
• AI assistant panel for formula help, analysis, rewriting, and table templates
• CSV export and chart support
• Responsive dashboard, editor, and auth flows
• Light and dark theme support

Tech Stack

• Next.js 14 (App Router)
• React 18
• TypeScript
• Tailwind CSS
• Firebase Authentication + Cloud Firestore
• GitHub Models API for AI features

Project Structure

• app/: routes, layouts, global styles, and API endpoints
• app/api/ai/route.ts: server route that proxies AI requests to GitHub Models
• components/: UI building blocks (editor, dashboard, modals, toolbar, grid)
• hooks/: custom React hooks for auth, presence, theme, and spreadsheet state
• lib/: Firebase setup, Firestore data access, and spreadsheet utilities
• types/: shared TypeScript types
• firestore.rules: Firestore security rules

Getting Started

1. Install Dependencies

npm install

2. Configure Environment Variables

Create a .env.local file in the project root and add:

NEXT_PUBLIC_FIREBASE_API_KEY=...
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=...
NEXT_PUBLIC_FIREBASE_PROJECT_ID=...
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=...
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=...
NEXT_PUBLIC_FIREBASE_APP_ID=...

GITHUB_TOKEN=...
GITHUB_MODEL=openai/gpt-4.1

Notes:

• GITHUB_TOKEN is required for AI features.
• GITHUB_MODEL is optional and defaults to openai/gpt-4.1.

3. Run the App

npm run dev

Open http://localhost:3000.

Available Scripts

• npm run dev: clean .next and start Next.js dev server
• npm run dev:clean: same as dev
• npm run build: clean .next and create production build
• npm run start: run production server
• npm run lint: run Next.js lint checks
• npm run clean: remove .next build cache

Deployment

This app is configured for Vercel deployment as a Next.js project.

• vercel.json uses:

{
	"framework": "nextjs"
}

• Ensure all Firebase and GitHub environment variables are set in Vercel Project Settings.

Authentication and Data

• Authentication: Google sign-in and guest access
• Database: Cloud Firestore
• Security: controlled by firestore.rules

Troubleshooting

• AI panel returns server error: Ensure GITHUB_TOKEN is set in your environment.
• Firebase init/auth issues: Verify all NEXT_PUBLIC_FIREBASE_* keys are present and correct.
• Deployment returns 404 on Vercel: Confirm the project root is correct and vercel.json uses the Next.js framework config.

License

Private project. Add a license section if you plan to open source it.