Feedback Board App

This is a public feedback board where anyone can post suggestions or feedback, and other users can upvote them.

Features

• Submit Feedback: Users can submit feedback with title, description, and category
• View Feedbacks: Display feedback items in a list of cards
• Upvote System: Users can upvote feedback items (limited to one upvote per session using local storage)
• Category Filter: Filter feedback by category
• Sorting: Sort by most upvoted or most recent
• Search: Search for feedback by title or description
• Comments: Users can comment on feedback items
• Responsive Layout: Works on all device sizes
• Dark Mode: Toggle between light and dark mode
• Local Storage: All data persists in browser local storage (no external database required)

Tech Stack

• Frontend: Next.js, React, TypeScript, Tailwind CSS
• UI Components: shadcn/ui
• Data Storage: Browser Local Storage
• Form Handling: React Hook Form with Zod validation
• Authentication: None (as per requirements)

Getting Started

Prerequisites

• Node.js 18+ installed

Installation

1. Clone the repository:

```bash git clone https://github.com/Lapidis2/feedback-board.git cd feedback-board ```

2. Install dependencies:

```bash npm install

or

yarn install

or

pnpm install ```

3. Run the development server:

```bash npm run dev

or

yarn dev

or

pnpm dev ```

4. Open http://localhost:3000 in your browser to see the application.

Data Storage

The application uses browser Local Storage to persist data:

• Feedbacks: Stored in localStorage with key feedbacks
• Comments: Stored in localStorage with key comments
• Upvoted Feedbacks: Stored in localStorage with key upvotedFeedbacks

The app comes with some initial mock data to demonstrate functionality. All new feedback and comments will be saved to local storage and persist between browser sessions.

Features Implemented

✅ Required Features:

• Submit Feedback (form with title, description, category)
• View Feedbacks (displayed as cards with upvote counts)
• Upvote System (one upvote per session using local storage)
• Category Filter (filter by bug, feature, improvement, etc.)

✅ Bonus Features:

• Sorting (Most Upvoted, Recent)
• Responsive layout
• Search bar
• Comments on feedback
• Dark/Light mode toggle

Project Structure

``` ├── app/ │ ├── layout.tsx # Root layout with theme provider │ ├── page.tsx # Home page │ └── globals.css # Global styles ├── components/ │ ├── ui/ # shadcn/ui components │ ├── feedback-board.tsx # Main feedback board component │ ├── feedback-list.tsx # List of feedback cards │ ├── feedback-card.tsx # Individual feedback card │ ├── feedback-form.tsx # Form to submit new feedback │ ├── feedback-filters.tsx # Search and filter controls │ ├── comment-section.tsx # Comments for each feedback │ ├── header.tsx # App header │ └── mode-toggle.tsx # Dark/light mode toggle ├── lib/ │ ├── storage.ts # Local storage utilities │ ├── constants.ts # App constants (categories) │ └── utils.ts # Utility functions └── README.md ```

Deployment

My feedback board is deployed on Netlify, but you can deploy it on any platform that supports static sites.

this is the link to the deployed app: Feedback Board

Netlify

1. Build the project: npm run build
2. Deploy the out folder to Netlify

Other Platforms

Since the app uses only local storage, it can be deployed to any static hosting service without additional configuration.

Development

To extend the application:

1. Add new categories: Update CATEGORIES in lib/constants.ts
2. Modify storage: Update methods in lib/storage.ts
3. Add new features: Create new components in components/
4. Styling: Modify Tailwind classes or update globals.css

License

This project is licensed under the MIT License.