Product Feedback Tool — Laravel API + React SPA

A comprehensive product feedback management system built with Laravel 12 and React 18, featuring user authentication, feedback submission, comments with @mentions, file uploads, and database notifications.

🚀 Features

Backend (Laravel 12 + PHP 8.2 + MySQL 8)

User Authentication with Sanctum (session-based SPA auth)
Feedback Management with CRUD operations and file uploads
Category System with admin-manageable categories
Comment System with markdown support and file attachments
@Mention System with real-time user search and notifications
Database Notifications for mention alerts
File Upload Support (images, PDFs, documents)
Authorization Policies for user ownership
Comprehensive Validation with Form Requests

Frontend (React 18 + TypeScript + Vite)

Modern React Architecture with TypeScript
Zustand for auth state management
React Query for server state & caching
React Hook Form + Zod for forms & validation
Tailwind CSS for responsive design
Markdown Rendering with syntax highlighting
File Upload UI with progress indicators
@Mention Autocomplete with user search
Real-time Updates via React Query

📁 Project Structure

├── app/
│   ├── Http/Controllers/Api/
│   │   ├── AuthController.php
│   │   ├── FeedbackController.php
│   │   ├── CommentController.php
│   │   └── UserSearchController.php
│   ├── Http/Requests/
│   │   ├── LoginRequest.php
│   │   ├── RegisterRequest.php
│   │   ├── StoreFeedbackRequest.php
│   │   └── StoreCommentRequest.php
│   ├── Models/
│   │   ├── User.php (with username)
│   │   ├── Category.php
│   │   ├── Feedback.php
│   │   └── Comment.php
│   ├── Notifications/
│   │   └── UserMentioned.php
│   └── Policies/
│       ├── FeedbackPolicy.php
│       └── CommentPolicy.php
├── database/
│   ├── migrations/
│   │   ├── create_users_table.php (with username)
│   │   ├── create_categories_table.php
│   │   ├── create_feedback_table.php
│   │   ├── create_comments_table.php
│   │   ├── create_comment_user_mentions_table.php
│   │   └── create_notifications_table.php
│   └── seeders/
│       ├── CategorySeeder.php
│       ├── UserSeeder.php
│       └── FeedbackSeeder.php
├── resources/js/
│   ├── components/
│   │   ├── Layout.tsx
│   │   ├── Markdown.tsx
│   │   ├── CommentForm.tsx
│   │   └── CommentList.tsx
│   ├── pages/
│   │   ├── Login.tsx
│   │   ├── Register.tsx
│   │   ├── FeedbackList.tsx
│   │   ├── FeedbackNew.tsx
│   │   └── FeedbackShow.tsx
│   ├── stores/
│   │   └── authStore.ts
│   ├── lib/
│   │   └── api.ts
│   ├── App.tsx
│   └── app.tsx
└── routes/
    ├── api.php
    └── web.php

🛠 Installation & Setup

Prerequisites

Docker & Docker Compose
Node.js 18+ and npm

1. Clone and Setup

git clone <repository-url>
cd splicedigital-laravel

2. Environment Configuration

# Copy environment file
cp .env.example .env

# Update .env with your settings:
# - Database credentials for MySQL
# - APP_URL=http://localhost
# - SESSION_DOMAIN=localhost
# - SANCTUM_STATEFUL_DOMAINS=localhost:5173

3. Start Services

# Start Docker containers
docker-compose up -d

# Install backend dependencies
docker-compose exec app composer install

# Generate application key
docker-compose exec app php artisan key:generate

# Run migrations and seed data
docker-compose exec app php artisan migrate --seed

# Create storage symlink
docker-compose exec app php artisan storage:link

4. Frontend Setup

# Install dependencies
npm install

# Start development server
npm run dev

🌐 API Endpoints

Authentication

POST /api/register - User registration
POST /api/login - User login
POST /api/logout - User logout
GET /api/user - Get current user

Public Routes

GET /api/categories - List all categories
GET /api/feedback - List feedback (with filters)
GET /api/feedback/{id} - Get feedback details
GET /api/feedback/{id}/comments - Get feedback comments

Protected Routes (Require Auth)

POST /api/feedback - Create feedback
PUT /api/feedback/{id} - Update feedback
DELETE /api/feedback/{id} - Delete feedback
POST /api/feedback/{id}/comments - Create comment
PUT /api/comments/{id} - Update comment
DELETE /api/comments/{id} - Delete comment
GET /api/users?search=term - Search users for mentions

🎯 Key Features in Detail

User Authentication

Session-based authentication with Sanctum
CSRF protection for SPA
User registration with username field
Secure logout with session invalidation

Feedback System

Create, read, update, delete feedback
File uploads (images, PDFs, documents)
Category filtering and search
Status tracking (open, in_progress, completed, closed)
Ownership-based authorization

Comment System

Markdown support with syntax highlighting
File attachments
Edit/delete own comments
Real-time @mention autocomplete
Database notifications for mentions

File Uploads

Multiple file support
Type validation (images, PDFs, docs)
Size limits (10MB per file)
Secure storage with public access links

@Mention System

Type @ + username for autocomplete
Real-time user search
Database notifications
Mention highlighting in comments

🔧 Development

Backend Development

# Run artisan commands
docker-compose exec app php artisan <command>

# Access database
docker-compose exec mysql mysql -u root -p

# View logs
docker-compose logs -f app

Frontend Development

# Start dev server with hot reload
npm run dev

# Build for production
npm run build

# Type checking
npx tsc --noEmit

Testing

# Run PHP tests
docker-compose exec app php artisan test

# Run JavaScript tests
npm test

📊 Default Data

The application seeds with:

Users

[email protected] / password (username: demo)
[email protected] / password (username: johnsmith)
[email protected] / password (username: alicej)
[email protected] / password (username: bobw)
[email protected] / password (username: sarahd)

Sample Feedback

Various feedback items with comments
Demonstrates markdown formatting
Shows @mention functionality
Includes different status types

🔐 Security Features

CSRF Protection via Sanctum
Input Validation on all forms
File Upload Security with type/size restrictions
Authorization Policies for resource access
Output Escaping for XSS prevention
CORS Configuration for SPA security

🎨 UI/UX Features

Responsive Design for mobile/desktop
Dark Mode Ready (Tailwind configuration)
Loading States and error handling
File Upload Progress indicators
Markdown Preview in comment form
Auto-complete @Mentions with dropdown
Real-time Updates via React Query

📱 Browser Support

Chrome 90+
Firefox 88+
Safari 14+
Edge 90+

🚀 Deployment

For production deployment:

Environment: Set APP_ENV=production
Database: Configure production MySQL
Storage: Set up file storage (S3, etc.)
CORS: Update allowed origins
Build: Run npm run build
Queue: Configure queue workers for notifications
Cache: Set up Redis for caching

🤝 Contributing

Fork the repository
Create a feature branch
Make changes with tests
Submit a pull request

📝 License

This project is open-sourced under the MIT license.

Name		Name	Last commit message	Last commit date
Latest commit History 6 Commits
app		app
bootstrap		bootstrap
config		config
database		database
docker		docker
public		public
resources		resources
routes		routes
storage		storage
tests		tests
.editorconfig		.editorconfig
.env.example		.env.example
.gitattributes		.gitattributes
.gitignore		.gitignore
Dockerfile		Dockerfile
README.md		README.md
artisan		artisan
composer.json		composer.json
composer.lock		composer.lock
docker-compose.yml		docker-compose.yml
package-lock.json		package-lock.json
package.json		package.json
phpunit.xml		phpunit.xml
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
vite.config.js		vite.config.js

mathamel/laravel-test-sd

Folders and files

Latest commit

History

Repository files navigation