ServiceNow Slack Clone

A real-time messaging application built for ServiceNow, featuring channels, direct messages, threads, reactions, file uploads, and user presence.

Getting Started

1. Download and install the Update Set from here
2. Each ServiceNow user must open the application at least once to register with the backend before they can start chatting

Note: By default, the ServiceNow app points to a shared test backend instance. Feel free to use it for testing, but keep in mind that other users may also be connected to this instance.

Warning: This is a proof of concept. If you want to use it in production, you will need to harden the security controls.

Features

• 📢 Channels - Public and private channels for team communication
• 💬 Direct Messages - Private 1:1 conversations with unread indicators
• 🧵 Threads - Reply to messages in threads to keep conversations organized
• 😄 Reactions - Add emoji reactions to messages
• 📎 File Uploads - Share images and files with drag & drop support
• 🟢 User Presence - See who's online, away, or offline
• 🖼️ User Avatars - Upload custom profile pictures
• 🔍 Search - Full-text search across all messages
• ⚡ Real-time Updates - Instant message delivery via WebSockets

Architecture

┌──────────────────────┐      ┌──────────────────────┐
│     ServiceNow       │      │   Cloudflare Edge    │
│                      │      │                      │
│  ┌────────────────┐  │      │  ┌────────────────┐  │
│  │   REST API     │◄─┼──────┼─►│     Worker     │  │
│  │  (React App)   │  │      │  │   (Hono API)   │  │
│  └────────────────┘  │      │  └───────┬────────┘  │
│                      │      │          │           │
│  ┌────────────────┐  │      │  ┌───────▼────────┐  │
│  │  REST API      │  │      │  │ D1 │ DO │ R2   │  │
│  │  /snack/user   │  │      │  │    Database    │  │
│  └────────────────┘  │      │  └────────────────┘  │
└──────────────────────┘      └──────────────────────┘

Project Structure

servicenow-slack-clone/
├── backend/           # Cloudflare Worker API
│   ├── src/
│   │   ├── handlers/  # REST API routes
│   │   ├── durable-objects/  # Real-time state
│   │   └── db/        # Database schema
│   └── README.md      # Backend documentation
│
├── frontend/          # React application
│   ├── src/
│   │   ├── components/
│   │   ├── stores/    # Zustand state
│   │   └── hooks/
│   └── README.md      # Frontend documentation
│
└── README.md          # This file

Quick Start

Local Development

# Backend (Terminal 1)
cd backend
npm install
npm run db:init
npm run dev

# Frontend (Terminal 2)
cd frontend
npm install
npm run dev

• Frontend: http://localhost:5173
• Backend: http://localhost:8787

Production Deployment

See Backend README for Cloudflare deployment instructions.

See Frontend README for build instructions.

License

MIT