HorizonSync

HorizonSync is a unified collaboration platform that combines:

• real-time team communication inspired by Discord
• a public social feed inspired by Twitter/X
• a private knowledge and execution workspace inspired by Notion

The product is designed as a single, cohesive operating surface for modern teams that want communication, planning, publishing, and AI assistance in one place.

Product Overview

HorizonSync is built around three core pillars:

• Hubs Real-time team collaboration with channels, direct messages, reactions, forwarding, and side-panel threads.

• Global Organization-wide publishing with rich posts, comments, likes, bookmarks, quote-posting, polls, and author post management.

• My Space A personal execution layer with nested documents, reminders, slash-command editing, drag-and-drop blocks, and structured workspace views such as list, kanban, and calendar.

Highlights

• production-grade Next.js App Router architecture
• strongly typed end-to-end TypeScript codebase
• Prisma + PostgreSQL data model
• NextAuth-based authentication
• responsive theme-aware UI
• real-time messaging with Pusher
• branded login security notifications by email
• AI drafting assistant integration
• modular shared UI primitives for drawers, toasts, skeletons, and transitions

Feature Parity Status

Hubs

• channel chat and direct messages
• message editing and soft deletion
• forwarding references
• emoji reactions
• side-panel threads
• typing indicators and presence
• file and image attachments

Global

• create post with media
• quote-posting
• optimistic likes, bookmarks, comments
• author archive and delete actions
• poll creation and voting
• bookmarks tab
• infinite scroll feed loading

My Space

• nested document hierarchy
• reminders and follow-ups
• slash commands in the editor
• drag-and-drop block reordering
• sub-page creation
• list, kanban, and calendar workspace views

Architecture

Frontend

• Next.js 14
• React 18
• Tailwind CSS
• framer-motion
• next-themes

Backend

• Next.js Route Handlers
• Server Actions
• Prisma ORM
• PostgreSQL
• NextAuth
• Pusher
• UploadThing
• Nodemailer

Repository Structure

src/
  app/
    (auth)/
    (main)/
    api/
  modules/
    ai/
    auth/
    global/
    hubs/
    myspace/
    profile/
  shared/
    components/
    hooks/
    lib/
prisma/
public/

Tech Decisions

• App Router keeps route-level layouts and loading states modular.
• Server Actions are used where mutation ergonomics and type sharing matter.
• Route Handlers are used for client-side fetch flows, realtime-related endpoints, and external service boundaries.
• Prisma provides the relational base for social, communication, and workspace features.
• Pusher handles realtime message fanout, presence, and incremental UI updates.

Environment Variables

Create a .env file with the values required for your environment.

Core

DATABASE_URL=
NEXTAUTH_SECRET=
NEXTAUTH_URL=
NEXT_PUBLIC_APP_URL=

OAuth Providers

GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=
TWITTER_CLIENT_ID=
TWITTER_CLIENT_SECRET=
MICROSOFT_CLIENT_ID=
MICROSOFT_CLIENT_SECRET=
MICROSOFT_TENANT_ID=

Realtime

PUSHER_APP_ID=
PUSHER_KEY=
PUSHER_SECRET=
PUSHER_CLUSTER=
NEXT_PUBLIC_PUSHER_KEY=
NEXT_PUBLIC_PUSHER_CLUSTER=

Uploads

UPLOADTHING_SECRET=
UPLOADTHING_APP_ID=

AI

OPENAI_API_KEY=
OPENAI_MODEL=gpt-4o-mini

Email Notifications

EMAIL_SERVER_HOST=
EMAIL_SERVER_PORT=
EMAIL_SERVER_USER=
EMAIL_SERVER_PASSWORD=
EMAIL_FROM=

Local Development

1. Install dependencies

npm install

2. Generate Prisma client

npx prisma generate

3. Run database migrations

npx prisma migrate dev

4. Start the app

npm run dev

Build and Verification

npx tsc --noEmit
npm run build

Security Posture

HorizonSync includes:

• server-side input sanitization helpers
• same-origin protection for mutation routes
• session-protected route groups
• soft-delete patterns for sensitive content
• branded login notification emails
• screenshot monitoring alerts on the client

UI / UX Notes

• dual theme system with explicit dark and light visual identities
• mobile-first responsive layouts
• drawer-based navigation on smaller screens
• loading skeletons and smooth route transitions
• polished, high-contrast collaboration surfaces

Deployment Notes

HorizonSync is designed to run well on a standard Next.js deployment stack such as:

• Vercel for app hosting
• Neon, Supabase, or Railway PostgreSQL for data
• Pusher for realtime delivery
• UploadThing for file handling
• Resend or SMTP-compatible mail infrastructure

Recommended Production Checklist

• configure a managed PostgreSQL database
• run Prisma migrations in the target environment
• set all auth provider secrets
• set all Pusher keys for realtime
• configure SMTP credentials for security emails
• set the OpenAI key for AI assistant features
• verify UploadThing credentials
• confirm NEXTAUTH_URL and NEXT_PUBLIC_APP_URL

Roadmap Direction

Potential future expansion areas:

• moderation and admin controls for Hubs
• richer analytics on Global engagement
• collaborative editing in My Space
• activity audit logs
• organization-level settings and billing

Author

Rudranarayan Jena

• GitHub: -liambrooks-lab