A modern, feature-rich feedback management platform built with Next.js 15, designed to collect, organize, and discuss user feedback in an aesthetically pleasing mint-green themed interface.
- Two-toned aesthetic with mint green and white color scheme
- Dark mode support with seamless theme switching using
next-themes - Fully responsive with mobile-friendly burger menu navigation
- Smooth animations on landing page and interactive elements
- CSS variables for consistent theming across all components
- GitHub OAuth integration via NextAuth.js
- Session management with secure user authentication
- Protected routes for creating feedback and posting comments
- User profile dropdown with theme toggle and sign-out option
- Avatar support with fallback initials for users without profile images
- Create, read, and upvote feedback posts
- Status tracking (Pending, In Progress, Completed, Rejected)
- Category organization for better feedback classification
- Advanced filtering by status (all, pending, in-progress, completed)
- Sorting options by popularity (upvotes) or recency (date)
- Persistent upvotes stored in localStorage to prevent duplicate votes
- Modal-based interaction - view feedback details without page navigation
- Comment threads on each feedback post
- Real-time comment loading via API endpoints
- Author attribution with profile images
- Timestamp tracking for all comments
- Authentication check - only signed-in users can comment
- Embedded comments in MongoDB for efficient data retrieval
- Visitor tracking system with persistent count
- Real-time visitor statistics displayed on landing page
- MongoDB-based storage for accurate metrics
- Gemini Flash 2.0 powered intelligent assistant
- Context-aware responses about platform features
- Conversation history for natural dialogue flow
- Quick question suggestions for common queries
- Always accessible floating chat button on all pages
- Real-time responses with typing indicators
- Built-in rate limiting (10 messages/min) to protect API usage
- Beautiful UI matching the mint-green theme
- Skeleton loading states for smooth content transitions
- Custom dialogs for authentication prompts
- Empty state designs with call-to-action buttons
- Hover effects and smooth transitions throughout
- Optimized images with Next.js Image component
- Node.js 18.x or higher
- MongoDB database (local or Atlas)
- GitHub OAuth App credentials
- Clone the repository
git clone <your-repo-url>
cd feedback-board- Install dependencies
npm install- Set up environment variables
Create a .env.local file in the root directory:
# MongoDB Connection
MONGODB_URI=your_mongodb_connection_string
# NextAuth Configuration
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=your_nextauth_secret_key
# GitHub OAuth
GITHUB_ID=your_github_oauth_app_id
GITHUB_SECRET=your_github_oauth_app_secret
# Gemini AI (for Chatbot)
GEMINI_API_KEY=your_gemini_api_keyNote: Get your Gemini API key from Google AI Studio
- Run the development server
npm run dev- Open your browser
Navigate to http://localhost:3000
feedback-board/
├── app/
│ ├── api/
│ │ ├── auth/[...nextauth]/ # NextAuth configuration
│ │ ├── feedback/ # Feedback CRUD endpoints
│ │ │ └── [id]/
│ │ │ └── comments/ # Comment endpoints
│ │ ├── visitors/ # Visitor tracking
│ │ └── chatbot/ # Gemini AI chatbot endpoint
│ ├── feedback/
│ │ ├── page.tsx # Feedback list page
│ │ ├── new/ # Create feedback form
│ │ └── [id]/ # Feedback detail pages
│ ├── login/ # Login page
│ ├── layout.tsx # Root layout with providers
│ ├── page.tsx # Landing page
│ └── globals.css # Global styles & CSS variables
├── components/
│ ├── FeedbackCard.tsx # Feedback card component
│ ├── FeedbackModal.tsx # Modal for feedback details
│ ├── FeedbackForm.tsx # Create/edit feedback form
│ ├── CommentList.tsx # Comment display component
│ ├── Chatbot.tsx # AI chatbot component
│ ├── Navbar.tsx # Navigation with auth
│ ├── ThemeToggle.tsx # Dark mode toggle
│ ├── SubmitDialog.tsx # Auth-aware submission dialog
│ └── FeedbackSkeleton.tsx # Loading skeleton
├── backend/
│ ├── models/
│ │ ├── Feedback.ts # Feedback schema with comments
│ │ ├── User.ts # User authentication schema
│ │ └── Visitor.ts # Visitor tracking schema
│ ├── types/
│ │ └── IFeedback.ts # TypeScript interfaces
│ └── lib/
│ └── mongodb.ts # Database connection
├── hooks/
│ ├── useFeedback.ts # Fetch feedback data
│ └── useVisitors.ts # Track visitor count
└── types/
└── next-auth.d.ts # NextAuth type definitions
- Next.js 15.5.6 - React framework with App Router
- React 18.3.1 - UI library
- TypeScript - Type safety
- Tailwind CSS 4 - Utility-first styling
- next-themes - Theme management
- Next.js API Routes - RESTful endpoints
- MongoDB - NoSQL database
- Mongoose 8.19.2 - ODM for MongoDB
- NextAuth.js 4.24.11 - Authentication solution
- GitHub OAuth - OAuth provider
- Google Generative AI - Gemini Flash 2.0 for chatbot
- Context-aware AI - Intelligent conversation handling
- react-hook-form - Form state management
- zod - Schema validation
- @hookform/resolvers - Validation resolvers
GET /api/feedback- Fetch all feedbackPOST /api/feedback- Create new feedbackPATCH /api/feedback/[id]- Update feedback (upvote)
GET /api/feedback/[id]/comments- Get comments for feedbackPOST /api/feedback/[id]/comments- Add new comment
GET /api/visitors- Get total visitor countPOST /api/visitors- Track new visitor
POST /api/chatbot- Send message to AI chatbot- Request body:
{ message: string, conversationHistory: array } - Response:
{ message: string, success: boolean }
- Request body:
GET/POST /api/auth/[...nextauth]- NextAuth endpoints
FeedbackHub uses CSS variables for consistent theming:
/* Light Mode */
--background: white
--foreground: #1a1a1a
--mint-primary: #6ee7b7
--mint-light: #d1fae5
--mint-accent: #34d399
--mint-dark: #10b981
/* Dark Mode */
--background: #1a1a1a
--foreground: #f5f5f5
--mint-primary: #34d399
--mint-light: rgba(52, 211, 153, 0.1)
--mint-accent: #10b981
--mint-dark: #059669- User clicks "Sign in with GitHub"
- Redirected to GitHub OAuth
- After authorization, user data stored in session
- Session persists across page navigations
- Protected actions check session status
- User can sign out via profile dropdown
Instead of navigating to a separate page, clicking a feedback card opens a modal overlay that:
- Shows full feedback details
- Displays all comments in a threaded view
- Allows authenticated users to post comments
- Maintains context by staying on the same page
- Each user can upvote once per feedback item
- Upvote state persisted in localStorage
- Optimistic UI updates with loading states
- Server-side validation and count updates
- Tracks unique page visits
- Stored in MongoDB for persistence
- Displayed on landing page with formatted count
- Fallback to default count on error
- Push your code to GitHub
- Import project in Vercel
- Add environment variables
- Deploy
Ensure all environment variables are set in your deployment platform:
MONGODB_URINEXTAUTH_URL(your production URL)NEXTAUTH_SECRETGITHUB_IDGITHUB_SECRET
- Fork the repository
- Create a feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is open source and available under the MIT License.
- Built with Next.js
- Authentication by NextAuth.js
- Icons from Heroicons
- Font family: Geist
Made with ❤️ and ☕ by sgfrdgrln