Fintech Feedback Board

A modern, component-based feedback board application built with React. Share and discuss ideas, report bugs, and track feature requests with your team.

Features

• User Posts - Create and view feedback posts with categorized topics
• Comment Threads - Engage in discussions on each feedback item
• Category Badges - Visual indicators for Bug, Feature, Improvement, and Question posts
• User Avatars - Auto-generated avatars based on user initials
• Responsive Design - Works seamlessly on desktop and mobile
• Real-time Stats - Live counters for posts, contributors, and comments

Tech Stack

• React 19 - Modern React with hooks
• Vite - Fast development and building
• CSS3 - Custom styling with CSS variables
• JSONPlaceholder API - Mock data for posts, users, and comments

Project Structure

src/
├── App.jsx                 # Main application entry
├── App.css                 # Global styles
├── main.jsx                # React DOM renderer
├── index.css               # Base styles
├── assets/                 # Static assets
└── components/
    ├── Dashboard.jsx        # Main dashboard container
    ├── Header.jsx           # App header with statistics
    ├── PostList.jsx         # Grid layout for posts
    ├── PostCard.jsx         # Individual post display
    ├── CommentSection.jsx   # Comments thread component
    └── UserAvatar.jsx       # User avatar with initials

Getting Started

Prerequisites

• Node.js 18+
• npm or bun

Installation

# Clone the repository
git clone <repository-url>
cd Tesroom

# Install dependencies
npm install

# Start development server
npm run dev

Available Scripts

Command	Description
npm run dev	Start development server
npm run build	Build for production
npm run preview	Preview production build
npm run lint	Run ESLint

Component Overview

Dashboard

The main container that manages data fetching and passes props to child components.

Header

Displays the app branding and aggregate statistics (total posts, contributors, comments).

PostCard

Renders individual feedback items with:

• User avatar and info
• Category badge (Bug/Feature/Improvement/Question)
• Title and truncated body text
• "Read more" for long content
• Comment count indicator

CommentSection

Shows threaded comments on each post with:

• Collapsible view (shows 2 by default)
• "View all X comments" for expanded view
• Empty state messaging

UserAvatar

Auto-generates colored avatars from user initials with consistent color assignment.

API Reference

This project uses JSONPlaceholder as a mock API:

• GET /posts - Fetch all posts
• GET /users - Fetch all users
• GET /comments - Fetch all comments

License

MIT