A production-grade, community-driven Q&A and FAQ platform engineered for institutional portals, university hubs, and knowledge-sharing communities. Featuring a moderated answer pipeline, reputation & badge gamification, AI-powered summaries, multi-language translation, voice-enabled search, text-to-speech accessibility, real-time leaderboards, and a cinematic dark/light developer aesthetic.
🚀 Getting Started · ✨ Features · 🏆 Gamification · 🏗️ Architecture · 📄 License
|
Fine-grained RBAC with three permission tiers:
|
Enterprise-grade content quality assurance:
|
|
Full gamification engine to drive engagement:
|
Hands-free voice input powered by the Web Speech API:
|
|
Built-in accessibility for content consumption:
|
Break language barriers with real-time translation:
|
|
Instant search suggestions as you type:
|
Community-driven content moderation:
|
|
AI-powered question deduplication:
|
Automatic content quality filtering:
|
|
100% free, privacy-first NLP summaries:
|
Never lose sight of your submissions:
|
|
Flexible, secure authentication:
|
Cinematic dual-theme experience:
|
| Action | Points |
|---|---|
| Ask a Question | +5 |
| Post an Answer | +10 |
| Answer Gets Upvoted | +10 |
| Question Gets Upvoted | +5 |
| Accepted Answer | +30 |
| Daily Login | +2 |
| Downvote Received | -2 |
|
Beginner Contributor — 10 pts |
Knowledge Sharer — 100 pts |
Expert Contributor — 500 pts |
| Badge | Criteria |
|---|---|
| 👑 Community Leader | Top reputation holder in the community |
| 🔥 Top Contributor of the Month | Most active contributor in the current month |
| 🚀 Fast Responder | Consistently answers within minutes |
| 💡 Innovation Guru | Answers with highest quality ratings |
Visual progress bars show users how close they are to their next badge:
Knowledge Sharer Badge
████████░░ 80/100 Points
Expert Contributor Badge
██░░░░░░░░ 120/500 Points
Live rankings of top contributors displayed platform-wide:
🏅 1. Vishal Soni 1,250 pts 👑🥇🔥
🏅 2. Arnav 980 pts 🥇🥈
🏅 3. Aryan 870 pts 🥈🥈
🏅 4. Priya 650 pts 🥈
🏅 5. Rahul 420 pts 🥉
- Question owners can mark one answer as the accepted answer
- ✅ Green checkmark appears on the accepted answer
- Accepted answer is pinned to the top of the answer list
- The answerer receives +30 reputation points
- Improves content discoverability for future visitors
Every registered user gets a comprehensive profile showcasing:
| Metric | Description |
|---|---|
| 🏆 Total Reputation | Cumulative reputation points earned |
| 🎖️ Badges Earned | All bronze, silver, gold, and special badges |
| ❓ Questions Asked | Total questions submitted |
| 💬 Answers Posted | Total answers contributed |
| ✅ Accepted Answers | Number of answers marked as accepted |
| 📊 Ranking Position | Current leaderboard position |
| 🎯 Progress to Next Badge | Visual progress bar |
┌──────────────────────────────────────────────────────────────────┐
│ CLIENT (SPA) │
│ React 19 · Vite 8 · Tailwind CSS v4 · Framer Motion 12 │
├────────┬────────┬────────┬────────┬────────┬────────┬────────────┤
│ Auth │Question│ Answer │ Search │ Voice │Translation│
│Context │ Hook │ Hook │ Hook │STT/TTS │ Engine │
├────────┴────────┴────────┴────────┴────────┴───────────┤
│ Reputation Engine · Badge System · Leaderboard │
├──────────────────────────────────────────────────────────────────┤
│ Supabase JS Client (v2.106+) │
│ ┌──────────┬──────────┬──────────┐ │
│ │ Auth │ Database │ Storage │ │
│ │ (JWT) │ (REST) │ (S3-API) │ │
└──────────────┴──────────┴──────────┴──────────┴──────────────────┘
│
┌───────────────────────────┴──────────────────────────────────────┐
│ SUPABASE BACKEND │
│ PostgreSQL · Row-Level Security · Edge Functions · Realtime │
├──────────────────────────────────────────────────────────────────┤
│ 8+ Tables · 5+ RPC Functions · 16+ RLS Policies · 9+ Indexes │
│ Cascade Deletes · Composite Constraints · Auto Triggers │
└──────────────────────────────────────────────────────────────────┘
Answerhub/
├── public/ # Static assets
├── supabase/
│ └── schema.sql # Full database schema, triggers, RLS policies
├── src/
│ ├── components/
│ │ ├── admin/ # Moderation dashboard, flagging review
│ │ ├── answers/ # Answer cards, forms, accepted answer UI
│ │ ├── auth/ # ProtectedRoute, GuestRoute guards
│ │ ├── layout/ # Navbar, Sidebar, Footer, Layout shell
│ │ ├── notifications/ # Real-time notification bell & dropdown
│ │ ├── questions/ # QuestionCard, QuestionForm, QuestionFeed
│ │ ├── search/ # SearchBar with voice input & type-ahead
│ │ └── ui/ # Design system: Button, Modal, Toast,
│ │ # Card, Input, Avatar, Badge, Skeleton,
│ │ # Tooltip, ThemeToggle, BackToTop
│ ├── config/
│ │ └── supabase.js # Supabase client initialization
│ ├── contexts/
│ │ └── AuthContext.jsx # Global auth state with session persistence
│ ├── hooks/
│ │ ├── useAdmin.js # Admin moderation & flagging operations
│ │ ├── useAnswers.js # Answer CRUD + verification + accepted answers
│ │ ├── useAuth.js # Auth context consumer
│ │ ├── useCategories.js # Category fetching
│ │ ├── useFileUpload.js # Supabase Storage file uploads
│ │ ├── useNotifications.js # Notification state management
│ │ ├── useQuestions.js # Question CRUD + upvoting + deletion
│ │ ├── useSearch.js # Fuzzy search + type-ahead + analytics
│ │ ├── useSpeechToText.js # 🎙️ Web Speech API (STT) hook
│ │ ├── useTextToSpeech.js # 🔊 SpeechSynthesis (TTS) hook
│ │ └── useUpvote.js # Optimistic upvote toggling
│ ├── lib/ # Utility functions
│ ├── pages/
│ │ ├── AdminDashboard.jsx # Metrics, bulk moderation, flag queue
│ │ ├── AskQuestionPage.jsx # Question form with voice dictation
│ │ ├── FaqPage.jsx # FAQ browser with STT & TTS
│ │ ├── ForgotPasswordPage.jsx # Email-based password reset
│ │ ├── HomePage.jsx # Main feed with category filtering
│ │ ├── LoginPage.jsx # Email/password login
│ │ ├── NotFoundPage.jsx # Animated 404 page
│ │ ├── ProfilePage.jsx # Stats, reputation, badges
│ │ ├── QuestionDetailPage.jsx # Full question + answers + accepted
│ │ ├── SearchPage.jsx # Global search results
│ │ └── SignupPage.jsx # User registration
│ ├── App.jsx # Route definitions with AnimatePresence
│ ├── main.jsx # App entry point
│ └── index.css # Global styles & design tokens
├── index.html
├── vite.config.js
├── vercel.json # Vercel SPA routing config
└── package.json
| Layer | Technology | Version | Purpose |
|---|---|---|---|
| Frontend Framework | React | 19 | Component architecture with hooks |
| Build Tool | Vite | 8 | Lightning-fast HMR and optimized production builds |
| Styling | Tailwind CSS | v4 | CSS-first utility engine with design tokens |
| Animations | Framer Motion | 12 | Spring-physics transitions & micro-interactions |
| Icons | Lucide React | 1.17 | Consistent, tree-shakeable icon library |
| Forms | React Hook Form | 7 | Performant form state management |
| Routing | React Router | 7 | Client-side navigation with route guards |
| Backend & DB | Supabase | PostgreSQL | Auth, Database, Storage, Realtime |
| Search Engine | Fuse.js | 7 | Client-side fuzzy matching & similarity scoring |
| Voice Input | Web Speech API | Native | Browser speech-to-text recognition |
| Audio Output | SpeechSynthesis API | Native | Browser text-to-speech playback |
| Deployment | Vercel | — | Edge-optimized SPA hosting |
The PostgreSQL database is organized into 8+ core tables with strict relational constraints, Row-Level Security (RLS) policies, and cascade delete rules:
┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐
│ auth.users │────▶│ users │ │ categories │
│ (Supabase Auth) │ │ id, name, email │ │ id, name, icon │
└──────────────────┘ │ role, avatar │ └────────┬─────────┘
│ reputation, rank │ │
└───────┬──────────┘ │
│ │
┌─────────────┼─────────────────────────┘
│ │
┌─────▼─────────────▼──────┐
│ questions │
│ id, title, description │
│ category, tags, views │
│ upvotes, attachment_url │
│ flags │
└──────┬───────────┬───────┘
│ │
┌────────────▼──┐ ┌────▼───────────────┐
│ answers │ │ question_upvotes │
│ id, content │ │ question_id, │
│ verification │ │ user_id (PK) │
│ is_accepted │ └────────────────────┘
│ admin_note │
└──────┬─────────┘
│
┌──────▼─────────────┐ ┌──────────────────┐
│ answer_upvotes │ │ notifications │
│ answer_id, │ │ id, user_id, │
│ user_id (PK) │ │ message, is_read │
└────────────────────┘ └──────────────────┘
┌──────────────────────┐
│ search_analytics │
│ id, search_term, │
│ user_id, created_at │
└──────────────────────┘
| Feature | Implementation |
|---|---|
| Auto User Profiles | Database trigger on auth.users INSERT automatically creates a public.users row |
| Cascade Deletes | Deleting a question removes all associated answers, upvotes, and notifications |
| Duplicate Vote Prevention | Composite primary keys on upvote tables enforce one-vote-per-user |
| Trending Analytics | RPC function get_trending_searches() returns top 10 search terms from the past 7 days |
| Toggle Upvotes | RPC functions atomically insert/delete upvote records and update counters |
| 16+ RLS Policies | Fine-grained row-level security ensuring users only access authorized data |
| Reputation Tracking | Points calculated from user actions and stored for leaderboard rankings |
The useSpeechToText hook wraps the native Web Speech Recognition API to provide hands-free voice input across the platform:
| Feature | Details |
|---|---|
| Continuous Recognition | Keeps listening until manually stopped |
| Interim Results | Shows real-time transcription as you speak |
| Multi-Language | Defaults to en-US, configurable via lang parameter |
| Error Recovery | Graceful handling of microphone permission errors |
| Used In | Search bar, Ask Question (title + description), FAQ search |
The useTextToSpeech hook uses the native SpeechSynthesis API for audio content playback:
| Feature | Details |
|---|---|
| One-Tap Playback | Single button to play/stop on any content |
| Unique Tracking | Each content item has a unique speech ID to track active playback |
| Auto Cleanup | Speech synthesis is cancelled on component unmount |
| Used In | Question cards, FAQ answer panels |
| Requirement | Minimum Version |
|---|---|
| Node.js | v18+ |
| npm | v9+ |
| Supabase Account | Free Tier |
1. Clone & Install
git clone https://github.com/sonivishal66666/Answerhub.git
cd Answerhub
npm install2. Database Setup
- Create a new project on the Supabase Dashboard
- Navigate to SQL Editor → New Query → Blank Query
- Copy the entire contents of
supabase/schema.sqland paste into the editor - Click Run — this creates all tables, triggers, RLS policies, indexes, and seed data
3. Storage Configuration
- In the Supabase Dashboard, go to Storage
- Click New Bucket → name it
attachments - Toggle Public Bucket to ON → Click Create
4. Environment Configuration
cp .env.example .envUpdate .env with your Supabase project credentials:
VITE_SUPABASE_URL=https://your-project.supabase.co
VITE_SUPABASE_ANON_KEY=your-anon-key-here5. Launch Development Server
npm run devOpen http://localhost:5173 in your browser.
6. Production Build
npm run build
npm run preview # Preview the production build locallyTo activate the admin moderation dashboard:
- Create an account on the running application via Sign Up
- Open the Supabase Dashboard → Table Editor →
userstable - Locate your user row and change the
rolecolumn fromusertoadmin - Refresh your browser — the Admin link will appear in the navigation bar
| Capability | Description |
|---|---|
| 📊 Platform Metrics | Total questions, answers, pending reviews, user counts, and reputation stats |
| ✅ Bulk Moderation | Approve, reject, or flag multiple answers at once |
| 🗑️ Question Deletion | Delete any question with premium animated confirmation dialogs |
| 🚩 Flag Review Queue | Review and resolve community-flagged content |
| 📝 Admin Notes | Attach feedback notes to reviewed answers |
| 🔔 Auto-Notifications | Authors are notified of verification decisions in real-time |
| 🏆 Reputation Management | View and manage user reputation and badge assignments |
- Push your repository to GitHub
- Import the project on Vercel
- Add environment variables:
VITE_SUPABASE_URLVITE_SUPABASE_ANON_KEY
- Deploy — the included
vercel.jsonhandles SPA routing automatically
npm run build # Outputs to ./dist
npx serve dist # Serve locally for testing| # | Feature | Description |
|---|---|---|
| 1 | 🔐 Role-Based Access Control | Guest, User, and Admin permission tiers |
| 2 | 🛡️ Moderated Answer Pipeline | Admin-verified answers with 4-state workflow |
| 3 | 🏆 Reputation System | Points for actions (ask, answer, upvote, accepted) |
| 4 | 🎖️ Badge System | Bronze, Silver, Gold, and Special achievement badges |
| 5 | 🔥 Leaderboard | Live rankings of top contributors |
| 6 | ✅ Accepted Answers | Question owners mark the best answer (+30 pts) |
| 7 | 📈 Progress Tracker | Visual progress bars toward next badge |
| 8 | 🎙️ Voice Search (Voice Chat) | Hands-free voice input across the platform |
| 9 | 🔊 Text-to-Speech | Listen to questions and FAQ answers |
| 10 | 🌐 Translation | Multi-language translation for questions & answers |
| 11 | 🔍 Type-Ahead | Autocomplete search suggestions as you type |
| 12 | 🚩 Content Flagging | Flag inappropriate questions or answers |
| 13 | 📍 Track Your Questions | Real-time status tracking for submissions |
| 14 | 🔑 Forgot Password | Email-based password reset flow |
| 15 | 🧠 Duplicate Detection | Fuse.js fuzzy matching with similarity scores |
| 16 | 🚫 Spam Detector | Heuristic auto-flagging of spam content |
| 17 | 🔮 AI Summarizer | Client-side NLP extractive summaries |
| 18 | 📎 File Attachments | Upload images and documents to questions/answers |
| 19 | 🔔 Real-Time Notifications | In-app notification bell with live updates |
| 20 | 🎨 Obsidian & Paper Themes | Cinematic dark/light theme system |
| 21 | ✨ Spring-Physics Animations | Framer Motion transitions & micro-interactions |
| 22 | 🌌 Cosmic Particle Backdrops | Floating particle emitter with ambient nebulas |
Contributions are welcome! Please follow these steps:
- Fork the repository
- Create a feature branch:
git checkout -b feature/amazing-feature - Commit your changes:
git commit -m "feat: add amazing feature" - Push to the branch:
git push origin feature/amazing-feature - Open a Pull Request
This project is licensed under the MIT License — see the LICENSE file for details.
Built with ❤️ for knowledge-sharing communities
