Roadmap - nself-org/nchat GitHub Wiki
- Phase 0: Foundation
- Phase 1: First-Run Setup
- Phase 2: Authentication
- Phase 3: Core Chat UI
- Phase 4: Real-time Features
- Phase 5: Advanced Features
- Phase 6: White-Label System
- Phase 7: Admin Dashboard
- Phase 8: Backend Services
- Phase 9: Mobile & Desktop
- Phase 10: Testing & Deployment
- Phase 11: Documentation
- Phase 12: Polish & Launch
- Theme: Protocol by Tailwind UI color scheme
- Primary: Indigo/Purple gradients
- Dark Mode: Deep slate backgrounds
- Accent: Cyan/Teal highlights
□ Backend Configuration (.backend/.env.dev updates)
□ FRONTEND_APP_1_TABLE_PREFIX=nchat_
□ FRONTEND_APP_1_DISPLAY_NAME="nself Chat"
□ FRONTEND_APP_1_SYSTEM_NAME=nchat
□ FRONTEND_APP_1_REMOTE_SCHEMA_NAME=nchat_schema
□ Frontend Configuration (web/.env.local)
□ NEXT_PUBLIC_NHOST_SUBDOMAIN=localhost
□ NEXT_PUBLIC_NHOST_REGION=local
□ NEXT_PUBLIC_GRAPHQL_URL=http://api.localhost/v1/graphql
□ NEXT_PUBLIC_WS_URL=ws://api.localhost/v1/graphql
□ NEXT_PUBLIC_AUTH_URL=http://auth.localhost/v1/auth
□ NEXT_PUBLIC_STORAGE_URL=http://storage.localhost/v1/storage
□ NEXT_PUBLIC_FUNCTIONS_URL=http://functions.localhost/v1/functions
□ White-label Configuration (web/.env.local)
□ NEXT_PUBLIC_APP_NAME=nchat
□ NEXT_PUBLIC_APP_TAGLINE="Team Communication Platform"
□ NEXT_PUBLIC_APP_LOGO=/logo.svg
□ NEXT_PUBLIC_APP_FAVICON=/favicon.ico
□ NEXT_PUBLIC_THEME_PRIMARY=#6366f1
□ NEXT_PUBLIC_THEME_SECONDARY=#8b5cf6
□ NEXT_PUBLIC_THEME_ACCENT=#06b6d4
□ Feature Flags (web/.env.local)
□ NEXT_PUBLIC_ENABLE_FILE_UPLOAD=true
□ NEXT_PUBLIC_ENABLE_REACTIONS=true
□ NEXT_PUBLIC_ENABLE_THREADS=true
□ NEXT_PUBLIC_ENABLE_VOICE_CHAT=false
□ NEXT_PUBLIC_ENABLE_VIDEO_CHAT=false
□ NEXT_PUBLIC_ENABLE_AI_FEATURES=true
□ NEXT_PUBLIC_ENABLE_SEARCH=true
□ NEXT_PUBLIC_ENABLE_ANALYTICS=true
□ Limits Configuration (web/.env.local)
□ NEXT_PUBLIC_MAX_FILE_SIZE=104857600 # 100MB
□ NEXT_PUBLIC_MAX_MESSAGE_LENGTH=4000
□ NEXT_PUBLIC_MAX_CHANNELS=100
□ NEXT_PUBLIC_MESSAGE_EDIT_WINDOW=300000 # 5 minutes-- I will create these migrations in order
□ 001_core_tables.sql
□ users table (extends auth.users)
□ nchat_organizations (single tenant but prepared for multi)
□ id, name, slug, logo_url, created_at
□ settings (JSONB for all org settings)
□ owner_id (FK to users, immutable after creation)
□ nchat_roles (owner, admin, moderator, member, guest)
□ id, name, slug, description, level (hierarchy number)
□ is_system (true for built-in roles)
□ created_at, updated_at
□ nchat_role_permissions (granular permissions)
□ role_id, permission_name, granted
□ Permissions list:
- manage_organization
- manage_roles
- manage_users
- manage_channels
- manage_messages
- delete_any_message
- pin_messages
- create_public_channel
- create_private_channel
- invite_users
- ban_users
- view_analytics
- manage_integrations
- manage_billing
□ 002_user_tables.sql
□ nchat_users (app-specific profiles)
□ id, user_id (FK to auth.users)
□ display_name, avatar_url, bio
□ status_message, status_emoji
□ timezone, language
□ is_bot, bot_token (for integrations)
□ last_seen_at, created_at, updated_at
□ nchat_user_roles (user-role assignments)
□ user_id, role_id, assigned_by, assigned_at
□ Unique constraint on user_id + role_id
□ nchat_user_preferences (theme, notifications, etc)
□ user_id (unique), preferences (JSONB)
□ theme_mode (light/dark/auto)
□ notification_sound, notification_desktop, notification_mobile
□ show_message_preview, enter_to_send
□ compact_mode, show_avatars
□ nchat_user_presence (online/away/offline)
□ user_id, status (online/away/offline/dnd)
□ last_activity, device_type
□ is_mobile, custom_status
□ 003_channel_tables.sql
□ nchat_channels (name, slug, type, visibility)
□ id, name, slug (unique), description
□ type (public/private/direct/group)
□ category_id, position (for ordering)
□ topic, icon_emoji, header_color
□ is_archived, is_read_only
□ created_by, created_at, updated_at
□ settings (JSONB - who can post, etc)
□ nchat_channel_roles (channel-specific permissions)
□ channel_id, role_id
□ can_read, can_write, can_manage
□ added_by, added_at
□ nchat_channel_members (membership tracking)
□ channel_id, user_id
□ joined_at, last_read_at
□ notification_preference (all/mentions/none)
□ is_muted, muted_until
□ is_starred, is_admin
□ nchat_channel_categories (organize channels)
□ id, name, position
□ is_collapsed (per user via preferences)
□ created_at, updated_at
□ 004_message_tables.sql
□ nchat_messages (content, type, metadata)
□ nchat_message_reactions (emoji reactions)
□ nchat_message_threads (threaded replies)
□ nchat_message_mentions (@user, @role, @channel)
□ nchat_message_attachments (files, images)
□ nchat_message_edits (edit history)
□ 005_feature_tables.sql
□ nchat_drafts (unsent messages)
□ nchat_bookmarks (saved messages)
□ nchat_pins (pinned messages)
□ nchat_read_receipts (last read tracking)
□ nchat_typing_indicators (who's typing)
□ nchat_notifications (notification queue)
□ 006_customization_tables.sql
□ nchat_themes (custom themes)
□ nchat_branding (logo, name, tagline)
□ nchat_custom_emojis (organization emojis)
□ nchat_settings (key-value settings)□ Track all tables with relationships
□ Set up Row Level Security (RLS) policies
□ Owner can do everything
□ Admin can manage users/channels
□ Moderator can manage messages
□ Member can read/write in allowed channels
□ Guest can only read in public channels
□ Create Hasura Actions
□ initializeOrganization
□ createFirstOwner
□ searchMessages
□ exportChannel
□ processSlashCommand
□ Set up Event Triggers
□ on_new_message → index_search
□ on_new_message → send_notifications
□ on_mention → notify_user
□ on_file_upload → scan_virus
□ Configure Scheduled Events
□ cleanup_old_typing_indicators (every 30s)
□ update_user_presence (every 1m)
□ send_digest_emails (daily)□ Create monorepo structure with pnpm workspaces
□ Create pnpm-workspace.yaml
□ Root package.json with workspace config
□ .npmrc with shamefully-hoist=true
□ Root tsconfig.json with path aliases
□ /web (Next.js 14 with App Router)
□ npx create-next-app@latest web --typescript --tailwind --app
□ Configure next.config.js
□ Add transpilePackages for monorepo
□ Configure images domains
□ Add PWA plugin
□ Install core dependencies:
□ @nhost/nextjs @nhost/react
□ @apollo/client graphql
□ socket.io-client
□ Install UI dependencies:
□ @radix-ui/react-dialog
□ @radix-ui/react-dropdown-menu
□ @radix-ui/react-tooltip
□ @radix-ui/react-avatar
□ @radix-ui/react-scroll-area
□ @radix-ui/react-separator
□ @radix-ui/react-switch
□ @radix-ui/react-tabs
□ Install editor dependencies:
□ @tiptap/react @tiptap/starter-kit
□ @tiptap/extension-mention
□ @tiptap/extension-placeholder
□ @tiptap/extension-code-block-lowlight
□ lowlight
□ Install utility dependencies:
□ framer-motion
□ react-hook-form
□ zod @hookform/resolvers
□ tailwind-merge clsx
□ class-variance-authority
□ date-fns
□ react-intersection-observer
□ react-dropzone
□ emoji-picker-react
□ react-hot-toast
□ zustand (state management)
□ swr (data fetching)
□ /packages/ui (Shared component library)
□ Setup package.json with exports
□ Configure TypeScript
□ Create component structure
□ Setup Storybook
□ Base components to create:
□ Button (variants: primary, secondary, ghost, danger)
□ Input (text, password, email, number)
□ Textarea (auto-resize option)
□ Select (native and custom)
□ Checkbox & Radio
□ Switch/Toggle
□ Avatar (with status indicator)
□ Badge (count, status, tag)
□ Card (clickable, static)
□ Modal/Dialog
□ Dropdown Menu
□ Tooltip
□ Toast/Notification
□ Tabs
□ Accordion
□ Progress (bar, circle)
□ Spinner/Loader
□ Skeleton
□ Empty State
□ Error Boundary
□ /packages/graphql (Generated types & operations)
□ Setup codegen.yml
□ Create operations folder structure
□ Configure type generation
□ /packages/hooks (Shared React hooks)
□ Setup exports structure
□ Create hooks folder
□ /packages/utils (Helper functions)
□ Setup date formatters
□ Create validation schemas
□ Add helper functions
□ /packages/config (Shared configuration)
□ Theme configuration
□ Constants
□ Feature flags□ /web/app/(setup)/layout.tsx - Setup wrapper
□ /web/app/(setup)/welcome/page.tsx
□ Check if organization exists
□ If not, show welcome screen
□ Animated logo placeholder
□ "Let's set up your chat platform" CTA
□ /web/app/(setup)/owner/page.tsx
□ First user registration form
□ Email, password, full name
□ Auto-assign as Owner role
□ Create auth.users entry
□ Create nchat_users profile
□ /web/app/(setup)/organization/page.tsx
□ Organization name input
□ Tagline/description
□ Logo upload (or skip)
□ Primary domain/slug
□ /web/app/(setup)/theme/page.tsx
□ Color palette picker
□ Pre-built themes (Protocol, Slack, Discord, Teams)
□ Custom color picker for primary/secondary
□ Dark mode toggle
□ Live preview panel
□ Font selection (System, Inter, Custom)
□ Save to nchat_themes table
□ /web/app/(setup)/auth/page.tsx
□ Authentication methods configuration
□ Email/Password (always on)
□ Magic Link toggle
□ Google OAuth toggle & setup
□ GitHub OAuth toggle & setup
□ SSO/SAML preparation
□ Save to nchat_settings
□ /web/app/(setup)/complete/page.tsx
□ "Your chat is ready!" celebration
□ Quick tour option
□ Redirect to main app□ /web/lib/config/organization.ts
□ loadOrganizationConfig()
□ saveOrganizationConfig()
□ getDefaultConfig()
□ validateConfig()
□ migrateConfig() // For version updates
□ /web/lib/config/theme.ts
□ Theme interface definition
□ loadTheme()
□ saveTheme()
□ generateCSSVariables()
□ validateColorContrast() // WCAG compliance
□ exportThemeJSON()
□ importThemeJSON()
□ /web/components/providers/SetupProvider.tsx
□ Check if setup is complete
□ Redirect to setup if needed
□ Load organization config
□ Track setup progress
□ Handle setup errors
□ /web/lib/config/defaults.ts
□ Default role definitions
□ Default permissions matrix
□ Default channel structure
□ Default theme presets
□ Default notification settings□ /web/app/(auth)/layout.tsx - Auth pages wrapper
□ /web/app/(auth)/login/page.tsx
□ Email/password form
□ Magic link option
□ Social login buttons
□ Remember me checkbox
□ Forgot password link
□ /web/app/(auth)/register/page.tsx
□ Registration form
□ Email verification flow
□ Terms acceptance
□ Auto-join default channels
□ /web/app/(auth)/forgot-password/page.tsx
□ /web/app/(auth)/reset-password/page.tsx
□ /web/app/(auth)/verify-email/page.tsx
□ /web/app/(auth)/magic-link/page.tsx
□ /web/components/auth/AuthProvider.tsx
□ Wrap app with NhostProvider
□ Handle auth state
□ Refresh tokens
□ /web/lib/auth/permissions.ts
□ Role-based access control
□ Channel-specific permissions
□ Permission checking helpers□ /web/app/(app)/settings/roles/page.tsx
□ List all roles
□ Create custom roles
□ Edit role permissions
□ Assign roles to users
□ Role hierarchy display
□ /web/lib/roles/roleDefinitions.ts
□ Default roles configuration
□ Permission matrix
□ Role inheritance logic
□ /web/hooks/usePermissions.ts
□ Check user permissions
□ Channel-specific checks
□ UI element visibility□ /web/app/(app)/layout.tsx
□ Main app shell
□ Auth guard wrapper
□ Theme provider
□ Socket.io provider
□ /web/components/layout/AppHeader.tsx
□ Organization logo & name
□ Global search bar
□ User menu dropdown
□ Settings gear icon
□ Notification bell
□ /web/components/layout/Sidebar.tsx
□ Channel categories
□ Channel list with unread counts
□ Direct messages section
□ Online users list
□ Create channel button
□ /web/components/layout/MainContent.tsx
□ Dynamic content area
□ Mobile responsive
□ Keyboard navigation□ /web/components/channels/ChannelList.tsx
□ Grouped by category
□ Drag-drop reordering
□ Unread indicators
□ Private/public icons
□ /web/components/channels/ChannelItem.tsx
□ Channel name & icon
□ Unread count badge
□ Typing indicator
□ Context menu (right-click)
□ /web/components/channels/CreateChannelModal.tsx
□ Channel name input
□ Public/private toggle
□ Category selection
□ Role restrictions
□ Initial members
□ /web/components/channels/ChannelHeader.tsx
□ Channel name & description
□ Member count
□ Pin/star toggle
□ Channel settings button
□ Search in channel□ /web/components/messages/MessageList.tsx
□ Virtual scrolling for performance
□ Auto-scroll to bottom
□ Jump to unread button
□ Load more on scroll up
□ Date separators
□ /web/components/messages/MessageItem.tsx
□ User avatar
□ Username & timestamp
□ Message content rendering
□ File attachments
□ Reactions display
□ Thread indicator
□ Hover actions menu
□ /web/components/messages/MessageComposer.tsx
□ Rich text editor (TipTap)
□ Bold, italic, underline
□ Code blocks with syntax
□ Lists (ordered/unordered)
□ Links with preview
□ Emoji picker
□ File upload button
□ @mention autocomplete
□ Slash commands
□ Send button with Ctrl+Enter
□ /web/components/messages/MessageActions.tsx
□ Add reaction
□ Reply in thread
□ Edit message
□ Delete message
□ Pin message
□ Copy text
□ Share message□ /packages/graphql/subscriptions/messages.graphql
□ subscription OnNewMessage($channelId: uuid!)
□ subscription OnMessageUpdate($channelId: uuid!)
□ subscription OnMessageDelete($channelId: uuid!)
□ subscription OnReaction($messageId: uuid!)
□ subscription OnThreadReply($messageId: uuid!)
□ /packages/graphql/subscriptions/presence.graphql
□ subscription OnPresenceUpdate
□ subscription OnUserStatusChange($userId: uuid!)
□ subscription OnBulkPresenceUpdate
□ /packages/graphql/subscriptions/typing.graphql
□ subscription OnTypingIndicator($channelId: uuid!)
□ subscription OnTypingStop($channelId: uuid!)
□ /packages/graphql/subscriptions/channels.graphql
□ subscription OnChannelUpdate($channelId: uuid!)
□ subscription OnChannelMemberJoin($channelId: uuid!)
□ subscription OnChannelMemberLeave($channelId: uuid!)
□ subscription OnNewChannel
□ /packages/graphql/subscriptions/notifications.graphql
□ subscription OnNewNotification($userId: uuid!)
□ subscription OnNotificationRead($userId: uuid!)
□ subscription OnMention($userId: uuid!)□ /web/lib/socket/client.ts
□ Initialize Socket.io connection
□ JWT authentication
□ Reconnection logic
□ Event handlers
□ /web/hooks/usePresence.ts
□ Broadcast user presence
□ Track online users
□ Handle disconnects
□ /web/hooks/useTyping.ts
□ Send typing events
□ Display typing indicators
□ Auto-clear after timeout
□ /web/components/realtime/TypingIndicator.tsx
□ "User is typing..." display
□ Multiple users typing
□ Smooth animations
□ /web/components/realtime/PresenceDot.tsx
□ Online/away/offline indicator
□ Last seen time
□ Custom status message□ /web/components/files/FileUpload.tsx
□ Drag-drop zone
□ Multi-file selection
□ Progress bars
□ File type validation
□ Size limit checking
□ /web/components/files/FilePreview.tsx
□ Image thumbnails
□ Video player
□ PDF viewer
□ Code syntax highlighting
□ Download button
□ /web/lib/storage/upload.ts
□ Upload to Hasura Storage
□ Generate presigned URLs
□ Handle large files
□ Resume on failure□ /web/components/search/GlobalSearch.tsx
□ Command palette (Cmd+K)
□ Search messages
□ Search files
□ Search users
□ Filter by date/channel
□ /web/components/search/SearchResults.tsx
□ Grouped results
□ Highlighted matches
□ Jump to message
□ Load more pagination
□ /web/lib/search/meilisearch.ts
□ Index messages
□ Search queries
□ Filter builder
□ Result formatting□ /web/components/notifications/NotificationCenter.tsx
□ Notification dropdown
□ Unread count badge
□ Mark as read
□ Notification settings
□ /web/components/notifications/NotificationToast.tsx
□ Desktop notifications
□ In-app toasts
□ Sound alerts
□ Do not disturb mode
□ /web/lib/notifications/manager.ts
□ Permission request
□ Send notifications
□ Queue management
□ Preference storage□ /web/lib/theme/ThemeProvider.tsx
□ Load theme from database
□ Apply CSS variables
□ Dark mode toggle
□ Theme hot-reload
□ /web/lib/theme/themes/protocol.ts (default)
primary: {
50: '#f0f9ff',
500: '#6366f1',
900: '#312e81'
},
secondary: {
50: '#f0fdfa',
500: '#14b8a6',
900: '#134e4a'
}
□ /web/app/(app)/settings/appearance/page.tsx
□ Theme editor UI
□ Color pickers
□ Font selection
□ Spacing adjustments
□ Border radius
□ Live preview
□ Save/reset buttons
□ /web/lib/theme/generator.ts
□ Generate theme from colors
□ Ensure accessibility
□ Create color scales
□ Export theme JSON□ /web/app/(app)/settings/branding/page.tsx
□ Organization name
□ Logo upload
□ Favicon upload
□ Email templates
□ Custom CSS injection
□ PWA configuration
□ /web/components/brand/DynamicLogo.tsx
□ Load from settings
□ Fallback to text
□ Responsive sizing
□ /web/components/brand/DynamicFavicon.tsx
□ Update dynamically
□ Notification badge□ /web/app/(app)/admin/users/page.tsx
□ User list table
□ Search/filter users
□ Role assignment
□ Suspend/activate users
□ Reset passwords
□ Export user data
□ /web/app/(app)/admin/users/[id]/page.tsx
□ User profile view
□ Activity history
□ Message count
□ Channels joined
□ Files uploaded□ /web/app/(app)/admin/analytics/page.tsx
□ Active users chart
□ Message volume graph
□ Popular channels
□ Peak usage times
□ File storage usage
□ Search queries
□ /web/lib/analytics/collector.ts
□ Track user events
□ Aggregate data
□ Generate reports□ /web/app/(app)/admin/settings/page.tsx
□ Rate limiting
□ File size limits
□ Message retention
□ Backup configuration
□ Email settings
□ Security policies□ /services/realtime/index.ts
□ Socket.io server setup
□ JWT authentication
□ Room management
□ Redis adapter
□ /services/realtime/handlers/presence.ts
□ Track user connections
□ Broadcast status updates
□ Handle disconnections
□ /services/realtime/handlers/typing.ts
□ Receive typing events
□ Broadcast to channel
□ Auto-clear timeout□ /services/worker/index.ts
□ Queue initialization
□ Worker processes
□ Error handling
□ /services/worker/jobs/email.ts
□ Send email notifications
□ Digest emails
□ Password resets
□ /services/worker/jobs/search.ts
□ Index new messages
□ Update search index
□ Cleanup old entries
□ /services/worker/jobs/files.ts
□ Generate thumbnails
□ Scan for viruses
□ Compress images□ /web/public/manifest.json
□ App name & icons
□ Theme colors
□ Display mode
□ /web/lib/pwa/serviceWorker.ts
□ Offline caching
□ Background sync
□ Push notifications
□ /web/components/pwa/InstallPrompt.tsx
□ Add to home screen
□ iOS instructions
□ Desktop install□ Responsive design throughout
□ Touch gestures
□ Swipe to reply
□ Pull to refresh
□ Long press actions
□ Mobile keyboard handling
□ Viewport management
□ Reduced animations option□ Keyboard shortcuts
□ Cmd+K - Search
□ Cmd+/ - Shortcuts help
□ Esc - Close modals
□ Up/Down - Navigate messages
□ Native system tray
□ Desktop notifications
□ File drag-drop from desktop□ Unit tests for utilities
□ /packages/utils test coverage > 90%
□ Date formatters
□ Validation functions
□ Permission helpers
□ Theme generators
□ Component tests with React Testing Library
□ Message component
□ Channel list component
□ Auth forms
□ Settings panels
□ Modal dialogs
□ Integration tests
□ GraphQL operations
□ Socket.io connections
□ File upload flow
□ Search functionality
□ E2E tests with Playwright
□ Auth flow
□ Register new user
□ Login with email
□ Magic link login
□ Password reset
□ Logout
□ First-run setup
□ Owner registration
□ Organization setup
□ Theme selection
□ Initial configuration
□ Messaging
□ Send message
□ Edit message
□ Delete message
□ Add reaction
□ Reply in thread
□ Channels
□ Create channel
□ Join channel
□ Leave channel
□ Archive channel
□ Channel settings
□ Files
□ Upload file
□ Preview image
□ Download file
□ Delete file
□ Search
□ Search messages
□ Search users
□ Search files
□ Filter results
□ User management
□ Invite user
□ Assign role
□ Remove user
□ Update profile
□ Load testing with K6
□ 100 concurrent users
□ 1000 messages per minute
□ File upload stress test
□ WebSocket connection limits
□ Database query performance
□ Accessibility testing
□ axe-core automated tests
□ Screen reader manual testing
□ Keyboard navigation audit
□ Color contrast validation
□ Focus management review□ Code splitting
□ Lazy loading
□ Image optimization
□ Bundle analysis
□ Lighthouse audits
□ Database indexes
□ Query optimization□ Docker configuration
□ Environment variables
□ CI/CD pipeline
□ Monitoring setup
□ Backup strategy
□ SSL certificates
□ CDN configuration□ /docs/user-guide.md
□ Getting started
□ Creating channels
□ Sending messages
□ File sharing
□ Keyboard shortcuts
□ /docs/admin-guide.md
□ Initial setup
□ User management
□ Role configuration
□ Customization
□ Backups□ /docs/deployment.md
□ /docs/configuration.md
□ /docs/customization.md
□ /docs/api-reference.md
□ /docs/contributing.md□ Loading states everywhere
□ Message list loading
□ Channel list loading
□ User search loading
□ File upload progress
□ Initial app load
□ Error boundaries
□ Global error boundary
□ Component-level boundaries
□ Error recovery UI
□ Error reporting
□ Empty states
□ No messages in channel
□ No channels created
□ No search results
□ No notifications
□ Welcome messages
□ Skeleton loaders
□ Message skeleton
□ Channel skeleton
□ User avatar skeleton
□ Settings skeleton
□ Smooth animations
□ Page transitions
□ Modal animations
□ Message animations
□ Hover effects
□ Focus indicators
□ Micro-interactions
□ Button press feedback
□ Emoji reactions bounce
□ Typing indicator pulse
□ Notification slide-in
□ Success checkmarks
□ Sound effects (optional)
□ New message sound
□ Mention notification
□ Error sound
□ Success sound
□ Settings to control□ Security audit
□ SQL injection prevention
□ XSS protection
□ CSRF tokens
□ Rate limiting
□ Input validation
□ File upload restrictions
□ JWT expiration
□ Permission checks
□ Performance testing
□ Lighthouse scores > 90
□ Bundle size < 500KB
□ Time to Interactive < 3s
□ First Contentful Paint < 1s
□ Core Web Vitals pass
□ Cross-browser testing
□ Chrome (latest)
□ Firefox (latest)
□ Safari (latest)
□ Edge (latest)
□ Mobile browsers
□ Mobile testing
□ iOS Safari
□ Android Chrome
□ Tablet layouts
□ Touch interactions
□ Keyboard handling
□ Accessibility review
□ Screen reader testing
□ Keyboard navigation
□ Color contrast (WCAG AA)
□ Focus management
□ ARIA labels
□ Alt text for images
□ SEO optimization
□ Meta tags
□ Open Graph tags
□ Twitter cards
□ Sitemap
□ Robots.txt
□ Canonical URLs
□ Analytics setup
□ Google Analytics 4
□ Custom events
□ User properties
□ Conversion tracking
□ Error tracking (Sentry)
□ Install Sentry
□ Configure environments
□ Source maps
□ User context
□ Custom error boundaries
□ Demo data seeding
□ Sample users
□ Sample channels
□ Sample messages
□ Sample files
□ Demo organization
□ Documentation
□ README.md
□ CONTRIBUTING.md
□ API documentation
□ Deployment guide
□ Configuration guide
□ Launch announcement
□ Product Hunt
□ Hacker News
□ Twitter/X
□ LinkedIn
□ Dev.to article- Fully functional chat platform comparable to Slack/Discord
- Complete white-label system with UI customization
- Role-based permissions with Owner protection
- Real-time messaging with presence and typing
- File sharing with previews
- Search powered by MeiliSearch
- Mobile-responsive PWA
- Desktop-ready with keyboard shortcuts
- Theme system with Protocol-inspired default
- Admin dashboard for management
- Production-ready with tests and docs
- ✅ Zero to production in 30 days
- ✅ Single tenant but multi-tenant ready
- ✅ Complete customization via UI
- ✅ Role hierarchy with Owner protection
- ✅ Private channels based on roles
- ✅ Skinnable via theme.json
- ✅ First-run setup wizard
- ✅ Auth method configuration
- ✅ Maximal white-labeling
- Frontend: Next.js 14, TypeScript, Tailwind CSS
- UI: Radix UI primitives, Framer Motion
- Backend: Hasura, PostgreSQL, Redis
- Real-time: GraphQL Subscriptions, Socket.io
- Storage: Hasura Storage, MinIO
- Search: MeiliSearch
- Auth: Hasura Auth (Nhost)
- Email: MailPit (dev), SMTP (prod)
- Workers: BullMQ
- Deployment: Docker, nself CLI
- Each checkbox is a discrete task
- Complete each file before moving to next
- Test each component in isolation
- Commit after each phase
- Use TypeScript strictly
- Follow React best practices
- Ensure accessibility (WCAG 2.1 AA)
- Mobile-first responsive design
- Performance budget: <3s initial load
- Bundle size: <500KB initial
- Owner role cannot be changed after setup
- Theme must be hot-reloadable
- Search must be instant (<100ms)
- Messages must deliver in <50ms
- File uploads must support 100MB+
- Mobile must work perfectly
- Setup must be foolproof
- Customization must not require code
This is your complete blueprint. Follow it exactly and you'll have a production-ready, white-labelable chat platform that showcases the power of the nself backend.