AeThex-Labs/AeThex-Connect
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
AeThex-Connect/FEATURES-ROADMAP.md

20 KiB
Raw Blame History

AeThex-Connect Complete Features Roadmap

Current Status: 40% Complete (UI + Basic Functionality)
Target: 100% Feature Parity with Discord Clone + Blockchain Integration

PHASE 1: CORE FEATURES (15 hours) - ESSENTIAL

1.1 Message System

  • Emoji Reactions (30 min)

    • Add emoji picker button next to messages
    • Click emoji to toggle reaction
    • Show reaction count badge
    • Remove reaction on second click
    • Files: MessageInput.jsx, Message.jsx, add emoji-picker lib

  • File Uploads (1 hour)

    • Wire UploadThing to message input
    • Preview uploaded files before sending
    • Display file attachments in messages
    • Support images, PDFs, documents
    • Files: FileUploadModal.jsx, Message.jsx

  • Message Timestamps (15 min)

    • Show human-readable timestamps
    • Format: "Today 2:34 PM" / "Yesterday" / "Mon 3/1"
    • Hover to show exact datetime
    • Files: Message.jsx, utility function

  • Message Search (2 hours)

    • Add search bar in header
    • Filter messages by keyword
    • Highlight search results
    • Show result count
    • Files: ChatAreaHeader.jsx, add searchStore

  • Typing Indicators (1 hour)

    • Show "User is typing..." when someone types
    • Hide after 3 seconds of inactivity
    • Multiple typists support
    • Files: ChatArea.jsx, add typingStore

1.2 Channel Management

  • Edit/Delete Channels (1 hour)

    • Edit channel name & description
    • Delete channel with confirmation
    • Move channels between categories
    • Files: ChannelSidebar.jsx, extend channelStore

  • Channel Topics/Descriptions (30 min)

    • Show channel description in header
    • Update channel topic
    • Store in channelStore
    • Files: ChatAreaHeader.jsx

  • Mute/Archive Channels (30 min)

    • Mute notifications from channel
    • Archive channel (hide from list)
    • Visual indicator for muted channels
    • Files: ChannelSidebar.jsx, extend channelStore

1.3 Member System

  • User Profiles (1 hour)

    • Click member name → profile modal
    • Show username, avatar, status, joined date
    • Display user activity/game
    • Add friend button (prep for later)
    • Files: UserProfileModal.jsx, Member.jsx

  • Member Status Indicator (30 min)

    • Show online/offline/away/dnd status
    • Live update presence
    • Status badge on avatars
    • Filter by status
    • Files: MemberSidebar.jsx, extend memberStore

  • Member Sorting (30 min)

    • Sort by online status
    • Sort by role (Admin → Mod → Member)
    • Sort alphabetically
    • Files: MemberSidebar.jsx

1.4 User Interface Polish

  • Hover Effects (30 min)

    • Add hover delete/edit buttons (DONE but needs refinement)
    • Hover color changes
    • Smooth transitions
    • Files: CSS updates

  • Loading States (30 min)

    • Show spinners while loading channels
    • Show loading skeleton for messages
    • Disable buttons while loading
    • Files: Add to components

  • Error States (30 min)

    • Handle network errors gracefully
    • Show error toast messages
    • Retry buttons
    • Files: Add error handling

PHASE 2: ADVANCED MESSAGING (12 hours) - HIGH PRIORITY

2.1 Message Threading

  • Message Threads (2 hours)

    • Right-click message → "Reply in Thread"
    • Show thread badge with reply count
    • Thread modal/sidebar view
    • Nested conversation view
    • Files: ThreadModal.jsx, update messageStore

  • Thread Notifications (30 min)

    • Notify when thread gets new reply
    • Show unread thread count
    • Mark thread as read

  • Thread Sorting (15 min)

    • Sort threads by newest/oldest
    • Show last reply time

2.2 Rich Text & Formatting

  • Bold/Italic/Underline (1 hour)

    • Markdown support (bold, italic, underline)
    • Toolbar buttons in message input
    • Preview formatting
    • Files: MessageInput.jsx, add rich-text lib

  • Code Blocks (1 hour)

    • Syntax highlighting for code
    • Language detection
    • Copy code button
    • Files: Message.jsx, add syntax-highlighter lib

  • Links & Embeds (1 hour)

    • Auto-linkify URLs
    • Show link preview cards
    • Embed YouTube, Twitter, etc.
    • Files: Message.jsx

  • Mentions & Markdown (1 hour)

    • @mention autocomplete
    • #channel mentions
    • Full markdown support (headers, quotes, lists)
    • Files: MessageInput.jsx, add mention autocomplete

2.3 Message Actions

  • Message Pins (1 hour)

    • Pin important messages
    • Show pinned messages in header dropdown
    • Unpin messages
    • Files: ChatAreaHeader.jsx, extend messageStore

  • Message Bookmarks (1 hour)

    • Bookmark messages for later
    • View bookmarked messages
    • Remove bookmarks
    • Files: Add bookmarkStore

  • Quote Messages (30 min)

    • Reply to specific message with quote
    • Show original message context
    • Files: Message.jsx, MessageInput.jsx

PHASE 3: PERMISSIONS & ROLES (10 hours) - IMPORTANT

3.1 Role System

  • Create Custom Roles (1.5 hours)

    • Create new roles beyond Admin/Mod/Member
    • Set role colors
    • Drag to reorder role hierarchy
    • Files: RoleManagementModal.jsx, add roleStore

  • Role Permissions Matrix (2 hours)

    • Toggle permissions per role:
      • Send messages
      • Edit own messages
      • Delete any message
      • Manage channels
      • Manage roles
      • Kick members
      • Ban members
    • Store in roleStore
    • Files: PermissionsModal.jsx

3.2 Channel Permissions

  • Channel Permission Overrides (2 hours)

    • Override server-wide permissions per channel
    • Restrict roles from viewing channel
    • Set who can speak in voice channels
    • Files: ChannelPermissionsModal.jsx

  • Private Channels (1 hour)

    • Restrict channel visibility by role
    • "Only visible to admins" etc.
    • Files: ChannelSidebar.jsx

3.3 Moderation

  • Ban System (1 hour)

    • Ban members (can't rejoin)
    • Ban list management
    • Temp bans with expiry
    • Files: MemberSidebar.jsx, extend memberStore

  • Mute System (1 hour)

    • Mute members (can't send messages)
    • Show muted badge
    • Mute duration settings
    • Files: extend memberStore

PHASE 4: DIRECT MESSAGING (8 hours) - NICE TO HAVE

4.1 DM System

  • Direct Messages (2 hours)

    • Open DM with any member
    • DM sidebar showing conversations
    • DM notifications
    • Files: DMSidebar.jsx, add dmStore

  • Group DMs (1.5 hours)

    • Create group conversation
    • Add/remove people from group
    • Group name & avatar
    • Files: DM system expansion

  • DM Notifications (30 min)

    • Badge showing unread DMs
    • Mention notifications
    • Sound/desktop notifications (prep)

4.2 Message Requests

  • DM Requests (1 hour)
    • Strangers' DMs go to "Requests"
    • Accept/decline requests
    • Block users
    • Files: add requestStore

PHASE 5: INVITE & ONBOARDING (6 hours) - COMMUNITY

5.1 Invite System

  • Generate Invite Links (1 hour)

    • Create invite with expiry
    • Set max uses
    • Different link per invite
    • Track invite source
    • Files: InviteModal.jsx, add inviteStore

  • Invite Management (1 hour)

    • Revoke invites
    • See who joined via invite
    • Edit invite settings
    • Files: InviteManagementModal.jsx

  • Accept Invites (1 hour)

    • Join server via invite link
    • Auto-role assignment
    • Welcome message
    • Files: add route for /invite/:code

5.2 Welcome

  • Welcome Channel (1 hour)

    • Auto-create #welcome channel
    • Post welcome message
    • Quick onboarding questionnaire
    • Files: server setup logic

  • New Member Questions (1 hour)

    • Show modal on first join
    • Collect info about member
    • Use for welcome message
    • Files: OnboardingModal.jsx

PHASE 6: VOICE & VIDEO (12 hours) - COMPETITIVE ADVANTAGE

6.1 Voice Channels

  • Replace WebRTC with LiveKit (3 hours)

    • Remove simple-peer dependency
    • Install @livekit/components-react
    • Basic voice room setup
    • Join/leave voice
    • Files: Major refactor, VoiceChannel.jsx

  • Voice Channel UI (2 hours)

    • Show connected users
    • Mic/speaker toggle
    • Volume control
    • Mute other users
    • Files: VoiceControlBar.jsx

  • Voice Notifications (1 hour)

    • Notify when someone joins voice
    • Play join/leave sounds
    • Show duration connected
    • Files: Add notifications

6.2 Video Calls

  • Video Channel Support (2 hours)

    • Enable video in voice channels
    • Grid/gallery view
    • Camera toggle
    • Speaker view
    • Files: VideoGrid.jsx, VideoTile.jsx

  • Screen Share (2 hours)

    • Share screen with audio
    • Pause/resume screen share
    • Show screen sharer indicator
    • Files: ScreenShareButton.jsx

  • Recording (1 hour)

    • Record voice/video
    • Download recordings
    • Store in cloud (optional)
    • Files: integration with backend

6.3 Voice Settings

  • Audio Input/Output (1 hour)

    • Select mic/speaker device
    • Test audio before joining
    • Audio level indicator
    • Files: AudioSettings.jsx

  • Echo Cancellation (1 hour)

    • Reduce echo/feedback
    • Noise suppression
    • Auto gain control
    • Files: LiveKit config

PHASE 7: BACKEND INTEGRATION (15 hours) - CRITICAL

7.1 Authentication

  • Connection to Auth Endpoints (2 hours)

    • Connect demo login to backend
    • Real login/register
    • JWT token handling
    • Session persistence
    • Files: Update AeThexProvider

  • Multi-Method Auth (1 hour)

    • Password login
    • OAuth (Google/GitHub/Clerk)
    • Blockchain wallet login
    • Files: Add auth methods

7.2 Database Sync

  • Fetch Real Channels (1 hour)

    • Load channels from Supabase
    • Store in channelStore
    • Refresh on join
    • Files: Add API calls

  • Fetch Real Messages (2 hours)

    • Load messages from API
    • Pagination/infinite scroll
    • Cache management
    • Real-time Socket.IO updates
    • Files: Update ChatArea

  • Save Messages (1 hour)

    • POST message to backend
    • Handle optimistic updates
    • Retry on failure
    • Files: Update messageStore

  • Sync Member List (1 hour)

    • Load server members from DB
    • Update on join/leave
    • Real-time presence via Socket.IO
    • Files: Update memberStore

7.3 Real-time Updates

  • Socket.IO Integration (3 hours)

    • Connect to Socket.IO server
    • Listen for new messages
    • Listen for member joins/leaves
    • Listen for typing indicators
    • Files: Create socketService.jsx

  • Optimistic Updates (2 hours)

    • Show message immediately
    • Rollback if fails
    • Show loading state
    • Handle conflicts
    • Files: Update messageStore

  • Conflict Resolution (1 hour)

    • Handle simultaneous edits
    • Show version conflicts
    • Last-write-wins logic
    • Files: Add conflictStore

7.4 File Storage

  • UploadThing Integration (1.5 hours)

    • Wire file uploads to UploadThing API
    • Show upload progress
    • Handle upload errors
    • Get file URL
    • Files: FileUploadModal.jsx

  • File Deletion (30 min)

    • Delete files from UploadThing
    • Clean up on message delete
    • Files: Add to backend

PHASE 8: NOTIFICATIONS (6 hours) - ENGAGEMENT

8.1 In-App Notifications

  • Toast Notifications (1 hour)

    • Show temporary messages
    • Auto-dismiss
    • Different colors for types
    • Files: Create Toast.jsx, useToast.js

  • Mention Notifications (1 hour)

    • Badge when @mentioned
    • Highlight in chat
    • Jump to mention context
    • Files: Add notificationStore

  • Channel Activity Badges (30 min)

    • Show unread count on channels
    • Mark as read on view
    • Files: extend channelStore

8.2 System Notifications

  • Desktop Notifications (1.5 hours)

    • Request permission
    • Show mentions as desktop notifications
    • Show DMs as desktop notifications
    • Click to jump to message
    • Files: Add notificationService.js

  • Sound Notifications (1 hour)

    • Play sound for mentions
    • Play sound for DMs
    • Mute global sound
    • Per-channel sound settings
    • Files: Add audioNotifications.js

PHASE 9: SETTINGS & PERSONALIZATION (8 hours) - UX

9.1 User Settings

  • Profile Settings (1 hour)

    • Edit username
    • Upload custom avatar
    • Set custom status/bio
    • Visibility settings
    • Files: UserSettingsModal.jsx

  • Privacy Settings (1 hour)

    • DM privacy (who can DM)
    • Show online status
    • Show activity status
    • Block list management
    • Files: PrivacySettingsModal.jsx

  • Notification Settings (1 hour)

    • Mute server/channel
    • Notification types per channel
    • Time mute (do not disturb)
    • Keywords that notify
    • Files: NotificationSettingsModal.jsx

9.2 Server Settings

  • Server General Settings (1.5 hours)

    • Edit server name
    • Upload server icon
    • Change server region
    • Default notification level
    • Files: ServerSettingsModal.jsx

  • Server Audit Log (1 hour)

    • Show who did what
    • Filter by action/person
    • Export audit log
    • Files: AuditLogModal.jsx

  • Backup/Import (1 hour)

    • Export server data
    • Import settings
    • Clone channel structure
    • Files: Add export/import logic

9.3 Theme & Display

  • Dark/Light Theme (1 hour)

    • Toggle dark/light mode
    • Persist preference
    • Match system preference
    • Files: Create ThemeProvider.jsx

  • Custom Colors (1 hour)

    • Accent color picker
    • Custom brand colors
    • Save theme presets
    • Files: extend themeStore

  • Zoom/Font Size (30 min)

    • Adjust UI scale
    • Adjust text size
    • Adjust message density
    • Files: Add scale settings

PHASE 10: ADVANCED FEATURES (10 hours) - POLISH

10.1 Search & Discovery

  • Advanced Message Search (1.5 hours)

    • Search by author
    • Search by date range
    • Search by file type
    • Save searches
    • Files: Extend search UI

  • Server Directory (1 hour)

    • Browse public servers
    • Search by category/name
    • Show member count
    • Quick join
    • Files: ServerDirectory.jsx

10.2 Integrations

  • Webhook Support (1.5 hours)

    • Create webhooks
    • Post via webhooks
    • Delete webhooks
    • Test webhook
    • Files: WebhookModal.jsx

  • Bot Commands (1.5 hours)

    • Command parser
    • Bot command registry
    • Help command
    • Admin commands
    • Files: Add commandService.js

10.3 Analytics & Admin

  • Server Stats Dashboard (1.5 hours)

    • Member growth chart
    • Message activity chart
    • Most active channels
    • Most active members
    • Files: StatsModal.jsx

  • Moderation Dashboard (1.5 hours)

    • View reported messages
    • Approve/reject reports
    • Ban/mute history
    • Action logs
    • Files: ModerationPanel.jsx

10.4 Export & Reporting

  • Message Export (1 hour)

    • Export channel as JSON/CSV
    • Export with attachments
    • Download as HTML report
    • Files: Add exportService.js

  • User Reports (1 hour)

    • Report message
    • Report user
    • View submissions
    • Admin panel for reports
    • Files: ReportModal.jsx

PHASE 11: MONETIZATION (6 hours) - REVENUE

11.1 Premium Features

  • Premium Tiers (1 hour)

    • Free tier
    • Premium tier ($4.99/mo)
    • Pro tier ($9.99/mo)
    • Define features per tier
    • Files: Add subscriptionStore

  • File Storage Limits (1 hour)

    • Free: 50MB/month
    • Premium: 500MB/month
    • Pro: 5GB/month
    • Show storage usage
    • Files: Add to FileUpload components

  • Custom Emojis (1 hour)

    • Upload custom emojis (premium)
    • Use in messages
    • Emoji pack management
    • Files: CustomEmojiModal.jsx

11.2 Payments

  • Stripe Integration (2 hours)

    • Subscription management
    • Payment processing (already have Stripe installed)
    • Invoice history
    • Cancel subscription
    • Files: Integrate Stripe payments

  • Ad-Free Option (1 hour)

    • Remove ads for premium
    • Hide ad placeholders
    • Premium badge
    • Files: Add ad components (if using ads)

PHASE 12: BLOCKCHAIN FEATURES (8 hours) - AETHEX UNIQUE

12.1 Identity Integration

  • Connect .aethex Domain (2 hours)

    • Show .aethex domain on profile
    • Verify domain ownership
    • Link blockchain wallet
    • Display on member card
    • Files: Add blockchainService.js

  • Wallet Integration (1.5 hours)

    • Connect wallet button
    • Show connected wallet
    • Verify ownership
    • Use for login (Web3 auth)
    • Files: Add walletService.js

12.2 Trinity Division UI

  • Division Badges (1 hour)

    • Show Trinity division on members
    • Filter by division
    • Division-specific channels
    • Division color coding
    • Files: Update MemberSidebar

  • Division Permissions (1.5 hours)

    • Restrict channels by division
    • Division-specific roles
    • Division leadership
    • Files: Add division-based ACL

12.3 Crypto Features

  • Token Gating (1.5 hours)

    • Require token to view channel
    • Verify wallet balance
    • Dynamic channel access
    • Files: Add tokenGating.js

  • NFT Roles (1.5 hours)

    • NFT holders get special role
    • Auto-assign role based on NFT
    • Show NFT on profile
    • Files: Add nftService.js

PHASE 13: PERFORMANCE & OPTIMIZATION (8 hours) - BACKEND WORK

13.1 Data Optimization

  • Message Pagination (1.5 hours)

    • Load messages in batches
    • Virtual scrolling for large lists
    • Cache old messages
    • Files: Update ChatArea

  • Member List Caching (1 hour)

    • Cache member list
    • Update on join/leave
    • Quick search without API call
    • Files: Update memberStore

  • Image Optimization (1 hour)

    • Lazy load images
    • Responsive images
    • Image compression
    • WebP format
    • Files: Image service

13.2 Performance Metrics

  • Add Analytics (1.5 hours)

    • Track page load time
    • Track API response time
    • Track message send time
    • Send to monitoring service
    • Files: Add analyticsService.js

  • Monitor Errors (1.5 hours)

    • Capture client errors
    • Send to error tracking (Sentry)
    • Show error rate dashboard
    • Files: Add errorTracking.js

  • Database Query Optimization (1 hour)

    • Profile slow queries
    • Add indexes where needed
    • Implement query caching
    • Backend work in Express

PHASE 14: TESTING & QA (8 hours)

14.1 Unit Tests

  • Test Stores (2 hours)

    • Test Zustand stores
    • Test state updates
    • Test computed values
    • Files: Add .test.js files

  • Test Components (2 hours)

    • Test Message component
    • Test ChatArea component
    • Test modals
    • Files: Add component tests

14.2 Integration Tests

  • Test Message Flow (2 hours)

    • Send message end-to-end
    • Edit message
    • Delete message
    • Files: Add integration tests

  • Test Auth Flow (1 hour)

    • Login/logout
    • Session persistence
    • Token refresh
    • Files: Add auth tests

14.3 User Testing

  • QA Pass (1 hour)
    • Manual testing checklist
    • Bug documentation
    • Performance testing
    • Browser compatibility

PHASE 15: DEPLOYMENT & DOCS (6 hours)

15.1 Documentation

  • API Documentation (1.5 hours)

    • Document all endpoints
    • Document Socket.IO events
    • Include examples
    • Files: Create API docs

  • User Guide (1 hour)

    • How to use features
    • Keyboard shortcuts
    • Tips & tricks
    • Files: Create user guide

  • Developer Guide (1.5 hours)

    • Setup instructions
    • Architecture overview
    • Contributing guidelines
    • Files: Update README

15.2 Deployment

  • Environment Setup (1 hour)

    • Production env vars
    • Database backups
    • CDN configuration
    • Files: Deployment config

  • CI/CD Pipeline (1 hour)

    • Auto-deploy on push
    • Run tests
    • Build optimization
    • Files: GitHub Actions config

SUMMARY

Total Estimated Time: 145 hours

Breakdown by Phase:

  • Phase 1-4: 45 hours (Messaging & Communities)
  • Phase 5-8: 32 hours (Community & Engagement)
  • Phase 9-10: 18 hours (Settings & Polish)
  • Phase 11-12: 14 hours (Monetization & Blockchain)
  • Phase 13-15: 22 hours (Performance & Deployment)

Critical Path (MVP):

  • Phase 1: Messaging (15h)
  • Phase 7: Backend Integration (15h)
  • Phase 14: Testing (5h)
  • 35 hours for MVP

Achievable in 1 sprint (2 weeks):

  • Phase 1 + Phase 2 (27 hours) = Basic messaging platform

Competitive Differentiation:

  • Phase 12 (Blockchain) = Unique value
  • Phase 6 (Voice/Video) = Core Discord feature
  • Phase 11 (Monetization) = Revenue model