Products Feedback

A comprehensive feedback management system for tracking product feedback, feature requests, and user suggestions with categories, priorities, and status tracking.

Overview

Products Feedback is a modern web application designed to help teams collect, organize, and manage feedback from users and stakeholders. Built with Next.js and TypeScript, it provides an intuitive interface for tracking feedback items with advanced filtering, categorization, and priority management.

Features

• Feedback Management: Create, edit, and delete feedback items with rich metadata
• Categorization: Organize feedback into custom categories for better organization
• Priority System: Set priority levels (High, Medium, Low) for efficient task management
• Status Tracking: Track feedback progress with status updates (Open, In Progress, Done)
• Advanced Search: Search through feedback by title, description, or category
• Responsive Design: Optimized for both desktop and mobile devices
• Touch Navigation: Swipe gestures for mobile category navigation
• Real-time Updates: Instant feedback when adding, updating, or deleting items
• Keyboard Shortcuts: Press Enter to quickly add new feedback
• Data Persistence: Built-in data storage with Supabase integration
• Theme Support: Dark and light mode support

Preview

Demo

Visit the live demo at: https://products-feedback.bjornleonhenry.com

Tech Stack

• Framework: Next.js 15.2.4
• Language: TypeScript
• Styling: Tailwind CSS
• UI Components: Radix UI primitives
• Icons: Lucide React
• Database: Supabase (optional)
• Analytics: Vercel Analytics
• Fonts: Geist Sans

Getting Started

Prerequisites

• Node.js 18+
• pnpm (preferred) or npm

Installation

1. Clone the repository:

git clone https://github.com/bjornleonhenry/products-feedback.git
cd products-feedback

2. Install dependencies:

pnpm install

3. Start the development server:

pnpm run dev

4. Open http://localhost:3000 in your browser

Build for Production

pnpm run build
pnpm run start

Project Structure

products-feedback/
├── app/                    # Next.js app directory
│   ├── actions.ts         # Server actions for data operations
│   ├── globals.css        # Global styles and CSS variables
│   ├── layout.tsx         # Root layout component
│   ├── loading.tsx        # Loading UI component
│   └── page.tsx           # Main feedback page
├── components/            # React components
│   ├── add-feedback-modal.tsx    # Modal for adding/editing feedback
│   ├── category-filters.tsx      # Category filter component
│   ├── theme-provider.tsx        # Theme context provider
│   └── ui/               # Reusable UI components
├── hooks/                # Custom React hooks
├── lib/                  # Utility functions and types
│   ├── initial-data.ts   # Sample feedback data
│   ├── supabase.ts       # Supabase configuration
│   ├── types.ts          # TypeScript type definitions
│   └── utils.ts          # Utility functions
├── public/               # Static assets
└── styles/              # Additional stylesheets

Features Breakdown

Feedback Management

• Create new feedback items with title, description, category, and priority
• Edit existing feedback items inline
• Delete feedback items with confirmation
• Copy feedback details to clipboard

Advanced Filtering

• Filter by category with dynamic category generation
• Search across title, description, and category
• Sort by priority (High → Medium → Low) and creation date
• Real-time filtering with instant results

Mobile Experience

• Touch-friendly interface with swipe navigation
• Floating action button for adding new feedback
• Responsive card layout for mobile devices
• Touch gestures for category navigation

Data Management

• In-memory storage for development/preview mode
• Supabase integration for production data persistence
• Server actions for secure data operations
• Optimistic updates for better user experience

Configuration

Environment Variables

Create a .env.local file for Supabase configuration (optional):

NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key

Supabase Setup (Optional)

If you want to use Supabase for data persistence:

1. Create a new Supabase project
2. Create a feedback_items table with the following schema:

CREATE TABLE feedback_items (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  title TEXT NOT NULL,
  description TEXT NOT NULL,
  status TEXT DEFAULT 'Open',
  priority TEXT DEFAULT 'Medium',
  category TEXT NOT NULL,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

Deployment

This project is optimized for deployment on Vercel:

1. Connect your GitHub repository to Vercel
2. Configure environment variables if using Supabase
3. Deploy with automatic builds on push

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

License

This project is licensed under the MIT License.

Author

Bjorn Leon Henry (bjornleonhenry)

• GitHub: @bjornleonhenry
• Website: bjornleonhenry.com

---

Built with ❤️ using Next.js and modern web technologies.