Lantern

Appearance

Feature Request Submission System ​

Status: ✅ Complete
Date: 2026-01-12

Overview ​

A comprehensive system for collecting, managing, and tracking feature requests and bug reports from users. The system integrates with GitHub Issues, Discord notifications, and includes AI-powered refinement and duplicate detection.

Goals ​

  1. Easy Submission: Simple, intuitive form accessible from within the app and Discord
  2. GitHub Integration: Automatically create GitHub issues from submissions
  3. Duplicate Detection: Prevent duplicate requests using AI-powered similarity detection
  4. AI Refinement: Use GitHub Copilot to help users refine and clarify their requests
  5. Discord Integration: Notify team of new submissions via Discord webhook
  6. User Feedback: Provide users with issue tracking links for follow-up

Architecture ​

Components ​

┌─────────────────────────────────────────────────────────┐
│                      User Interface                      │
│  ┌─────────────────────────────────────────────────┐   │
│  │      FeatureRequestForm Component (React)        │   │
│  │  - Type selection (feature/bug/improvement)     │   │
│  │  - Title & description fields                   │   │
│  │  - Impact/priority selection                    │   │
│  │  - Use case examples                            │   │
│  │  - Duplicate warning display                    │   │
│  └─────────────────────────────────────────────────┘   │
└─────────────────────────────────────────────────────────┘
                            │
                            ↓
┌─────────────────────────────────────────────────────────┐
│              Firebase Cloud Function                     │
│  ┌─────────────────────────────────────────────────┐   │
│  │      createFeatureRequest (Callable)             │   │
│  │  1. Validate input                              │   │
│  │  2. Check for duplicates (AI similarity)        │   │
│  │  3. Create GitHub issue via API                 │   │
│  │  4. Store in Firestore for tracking             │   │
│  │  5. Send Discord notification                   │   │
│  │  6. Return issue URL to user                    │   │
│  └─────────────────────────────────────────────────┘   │
└─────────────────────────────────────────────────────────┘
                            │
                ┌───────────┴───────────┐
                │                       │
                ↓                       ↓
    ┌────────────────────┐   ┌────────────────────┐
    │   GitHub Issues    │   │  Discord Webhook   │
    │   - Auto-labeled   │   │  - New submission  │
    │   - Formatted      │   │  - Link to issue   │
    │   - Trackable      │   │  - Summary         │
    └────────────────────┘   └────────────────────┘

Data Model ​

FeatureRequest (Firestore Collection: featureRequests) ​

typescript
interface FeatureRequest {
  id: string                    // Auto-generated Firestore ID
  type: 'feature' | 'bug' | 'improvement' | 'question'
  title: string                 // Required, max 100 chars
  description: string           // Required, max 1000 chars
  useCase?: string             // Optional user story/example
  priority: 'low' | 'medium' | 'high' | 'critical'
  impact: 'individual' | 'small-group' | 'all-users'
  
  // GitHub Integration
  githubIssueNumber?: number   // Issue number on GitHub
  githubIssueUrl: string       // Full URL to the issue
  
  // Metadata
  submittedBy: string          // User ID (anonymous option available)
  submittedAt: Timestamp
  status: 'submitted' | 'under-review' | 'planned' | 'in-progress' | 'completed' | 'declined'
  
  // Duplicate Detection
  duplicateOf?: string         // Reference to original request ID
  similarRequests?: string[]   // Array of potentially similar request IDs
  
  // AI Refinement
  originalDescription?: string  // Before AI refinement
  refinementSuggestions?: string[]
}

User Interface ​

Form Fields ​

  1. Request Type (Required)

    • Feature Request
    • Bug Report
    • Improvement
    • Question/Discussion

  2. Title (Required, max 100 chars)

    • Clear, concise summary
    • Example: "Add dark mode to profile settings"

  3. Description (Required, max 1000 chars)

    • Detailed explanation
    • What problem does this solve?
    • How would it work?

  4. Use Case (Optional, max 500 chars)

    • Real-world example
    • User story format encouraged

  5. Priority (Required)

    • Low: Nice to have
    • Medium: Would improve experience
    • High: Important for usability
    • Critical: Blocking or security issue

  6. Impact (Required)

    • Individual: Affects only me or very few users
    • Small Group: Affects specific user segment
    • All users: Broad impact across user base

Duplicate Detection UX ​

When user types title/description, show similar existing requests:

⚠️ Similar requests found:
┌─────────────────────────────────────────────────────┐
│ #42 Add dark mode support                           │
│ Submitted: 2026-01-05 · Status: Planned             │
│ 85% similar to your request                         │
│ [View] [Continue Anyway]                            │
└─────────────────────────────────────────────────────┘

GitHub Integration ​

Issue Creation ​

Issues created with standardized format:

markdown
## Type
[Feature Request / Bug Report / Improvement / Question]

## Description
[User's description]

## Use Case
[User's use case if provided]

## Priority & Impact
- Priority: [low/medium/high/critical]
- Impact: [individual/small-group/all-users]

## Submitted By
User ID: [userId or "Anonymous"]
Submitted: [timestamp]

---
*Auto-generated from in-app feature request form*

Labels Applied ​

  • feature-request, bug, improvement, or question
  • priority-low, priority-medium, priority-high, or priority-critical
  • user-submitted (distinguishes from internal issues)
  • needs-triage (for team review)

Authentication ​

Uses GitHub Personal Access Token stored in Firebase Functions config:

bash
firebase functions:config:set github.token="ghp_xxxxxxxxxxxx"

Required permissions:

  • repo scope (to create issues)

Discord Integration ​

Notification Format ​

🎯 New Feature Request #123
──────────────────────────
Type: Feature Request
Priority: High · Impact: All users

Title: Add dark mode to profile settings

Description:
Users have requested ability to switch to dark mode...

Use Case:
When browsing at night, bright screens are jarring...

👤 Submitted by: user_abc123
🔗 GitHub Issue: https://github.com/cattreedev/lantern_app/issues/123
📅 2026-01-12 at 4:30 PM

AI-Powered Refinement ​

Refinement Flow ​

  1. User writes initial request
  2. Click "Refine with AI" button
  3. GitHub Copilot analyzes and suggests:
    • Clearer title
    • More specific description
    • Missing use case details
    • Better priority/impact classification

Copilot Prompt Template ​

You are helping a user refine their feature request for the Lantern app.
Lantern is an anonymous, location-based social app for meeting people at real places.

Current request:
Title: [title]
Description: [description]
Type: [type]

Please suggest:
1. A clearer, more specific title (max 100 chars)
2. An improved description with:
   - What problem this solves
   - How it would work
   - Why it matters
3. A concrete use case or user story
4. Appropriate priority and impact levels

Keep the user's intent but make it more actionable for developers.

Implementation Steps ​

Phase 1: Core Form Component (Priority 1) ​

  • [x] Create FeatureRequestForm.jsx component
  • [x] Add form validation
  • [x] Implement character counters
  • [x] Add type/priority/impact selectors
  • [x] Create submission success/error states

Phase 2: Firebase Cloud Function (Priority 1) ​

  • [x] Set up Firebase Functions directory
  • [x] Create createFeatureRequest callable function
  • [x] Integrate GitHub API (using Octokit)
  • [x] Store requests in Firestore
  • [x] Return issue URL to client

Phase 3: Duplicate Detection (Priority 2) ​

  • [ ] Implement similarity scoring algorithm
  • [ ] Create search index for existing requests
  • [ ] Add real-time duplicate checking
  • [ ] Display similar requests to user

Phase 4: Discord Integration (Priority 1) ​

  • [x] Add Discord webhook to Cloud Function
  • [x] Format notification message
  • [x] Include priority/type/impact indicators
  • [x] Add links to GitHub issue

Phase 5: AI Refinement (Priority 3) ​

  • [ ] Create refinement interface
  • [ ] Implement Copilot integration
  • [ ] Add before/after comparison
  • [ ] Allow user to accept/reject suggestions

Phase 6: App Integration (Priority 1) ​

  • [x] Add route to App.jsx
  • [x] Add navigation item (settings menu)
  • [x] Ensure mobile responsiveness
  • [x] Add help text and examples

Security Considerations ​

Input Validation ​

  • Sanitize all user input
  • Enforce character limits
  • Validate enum values (type, priority, impact)
  • Rate limiting (max 5 submissions per user per day)

Authentication ​

  • Require user to be logged in for submissions
  • Option for anonymous submission (doesn't link to user profile)
  • GitHub token stored securely in Firebase Functions config
  • Discord webhook URL stored as secret

Spam Prevention ​

  • Rate limiting per user
  • Duplicate detection prevents spam
  • Manual review queue for suspicious submissions
  • Ability to flag/delete spam issues

Testing Strategy ​

Unit Tests ​

  • Form validation logic
  • Duplicate detection algorithm
  • GitHub API integration
  • Discord webhook formatting

Integration Tests ​

  • End-to-end submission flow
  • GitHub issue creation and labeling
  • Firestore data storage
  • Discord notification delivery

Manual Testing Checklist ​

  • [ ] Submit feature request from app
  • [ ] Verify GitHub issue created with correct labels
  • [ ] Confirm Discord notification received
  • [ ] Check Firestore document saved correctly
  • [ ] Test duplicate detection with similar titles
  • [ ] Test AI refinement suggestions
  • [ ] Test error handling (API failures, network issues)
  • [ ] Test on mobile devices

Environment Configuration ​

Required Environment Variables ​

Firebase Functions Config:

bash
# GitHub API
firebase functions:config:set github.token="ghp_xxxxxxxxxxxx"
firebase functions:config:set github.repo="cattreedev/lantern_app"

# Discord Webhook
firebase functions:config:set discord.webhook_url="https://discord.com/api/webhooks/..."

Client (.env.local):

bash
# No additional client config needed - uses Firebase Functions

Future Enhancements ​

Phase 2 Features (Post-MVP) ​

  1. Voting System

    • Users can upvote requests
    • Sort by popularity
    • Influence priority

  2. Comments & Discussion

    • Users can discuss requests
    • Sync with GitHub issue comments
    • Notification system

  3. Status Updates

    • Notify users when status changes
    • Email/push notifications
    • Progress tracking

  4. Admin Dashboard

    • Triage interface
    • Bulk actions
    • Analytics and trends

  5. Integration Improvements

    • Slack integration option
    • Email notifications
    • API for external submissions

Documentation ​

User-Facing ​

  • Help text in form
  • Examples for each field
  • FAQ about submission process
  • How to track submitted requests

Developer-Facing ​

  • API documentation for Cloud Function
  • GitHub issue template explanation
  • Duplicate detection algorithm details
  • Discord webhook payload format

Success Metrics ​

  • Adoption: Number of requests submitted per week
  • Quality: Percentage of requests acted upon
  • Efficiency: Time from submission to triage
  • Duplicate Prevention: Percentage of duplicates caught
  • User Satisfaction: Follow-up survey on process

See Also ​

Built with VitePress

Copyright © 2026 Lantern