Fullstack Laravel React Starter

Sebuah starter kit fullstack modern yang menggabungkan Laravel 12, React 19, dan Inertia.js dengan fokus pada pemisahan yang jelas antara admin panel (authenticated users) dan public site.

🚀 Tech Stack

Backend

Laravel 12 - PHP framework yang powerful dan elegant
PHP 8.4 - Versi terbaru PHP untuk performa optimal
SQLite - Database ringan untuk development
Laravel Fortify - Authentication scaffolding

Frontend

React 19 - Library JavaScript untuk membangun UI
TypeScript - Type safety untuk JavaScript
Inertia.js 2.1 - Modern monolith approach
Tailwind CSS 4 - Utility-first CSS framework
shadcn/ui - Beautiful and accessible UI components

Build Tools

Vite - Fast build tool dan dev server
Laravel Vite Plugin - Integrasi seamless antara Laravel dan Vite
ESLint & Prettier - Code linting dan formatting

🎯 Fitur Utama

🔐 Authentication System

Login/Register dengan Laravel Fortify
Two-Factor Authentication
Password Reset
Email Verification
Profile Management

🎨 UI/UX

Responsive Design - Mobile-first approach
Dark Mode Support - Toggle tema light/dark
Component-based Architecture - Menggunakan shadcn/ui
Accessibility - ARIA compliant components

📊 Admin Panel

Dashboard dengan sidebar navigation
User Management
Settings Panel - Profile, Password, 2FA, Appearance
Activity Logging - Track user activities
File Management dengan image processing

🌐 Public Site

Welcome Page untuk visitors
Responsive Navigation
SEO Optimized dengan proper meta tags

🛠️ Development Experience

Laravel Boost - Enhanced development tools
Hot Module Replacement - Instant feedback saat development
Type Safety - Full TypeScript support
Code Quality - PHPStan (Level 5), ESLint, Pint
Testing - Pest PHP untuk backend testing
Static Analysis - Strict type checking & linting

📦 Integrasi Package

Backend Packages

spatie/laravel-activitylog - Activity logging system
intervention/image - Image manipulation dan processing
spatie/laravel-backup - Database dan file backup solution
laravel/wayfinder - Advanced routing capabilities

Development Tools

laravel/boost - Enhanced Laravel development experience
laravel/pint - PHP CS Fixer untuk Laravel
rector/rector - Automated PHP code refactoring
pestphp/pest - Modern PHP testing framework

Frontend Components

@radix-ui/react-* - Primitive components untuk accessibility
lucide-react - Beautiful icon library
class-variance-authority - Utility untuk component variants
tailwind-merge - Merge Tailwind classes dengan smart

🚀 Quick Start

Prerequisites

PHP 8.4 atau higher
Node.js 18 atau higher
Composer
SQLite (atau database lainnya)

Installation

Clone repository

git clone <repository-url>
cd fullstack-laravel-react-starter

Install dependencies

# Backend dependencies
composer install

# Frontend dependencies
npm install

Setup environment

# Copy environment file
cp .env.example .env

# Generate application key
php artisan key:generate

# Run migrations
php artisan migrate

Build assets

# Development
npm run dev

# Production
npm run build

Start development server
```
php artisan serve
```

Development Scripts

# Frontend development
npm run dev              # Start Vite dev server
npm run build           # Build untuk production
npm run build:ssr       # Build dengan SSR support

# Code quality & formatting
npm run lint            # ESLint - TypeScript/React linting
npm run format          # Prettier - Code formatting
npm run types           # TypeScript type checking

# Backend quality
./vendor/bin/phpstan analyze --memory-limit=2G  # PHPStan - Type checking
./vendor/bin/pint                                # Pint - PHP formatting
./vendor/bin/pint --test                         # Test without fixing
./vendor/bin/rector process --dry-run           # Rector - Check refactoring opportunities
./vendor/bin/rector process                      # Rector - Apply refactoring (use with caution!)

# Backend
composer setup          # Full setup script
php artisan serve       # Start Laravel server
php artisan test        # Run tests (Pest)
php artisan migrate     # Run database migrations

# Development helper scripts
./.script-dev-build.sh     # Build frontend assets
./.script-dev-check.sh     # Run full quality checks (Pint, PHPStan, Rector dry-run, tests)
./.script-install.sh       # Setup fresh application
./.script-update.sh        # Update application (git pull, migrate, build)
./.script-rector.sh        # Apply Rector refactoring with safety checks

Complete Code Quality Workflow

# Format PHP code with Pint
./vendor/bin/pint

# Type check PHP with PHPStan (Level 5)
./vendor/bin/phpstan analyze --memory-limit=2G

# Check refactoring opportunities with Rector (dry-run)
./vendor/bin/rector process --dry-run

# Format & lint TypeScript/React with ESLint
npx eslint . --fix

# Run tests to ensure everything works
./vendor/bin/pest --no-coverage

# Or use the convenience script for all checks
./.script-dev-check.sh

🏗️ Arsitektur

Pemisahan Admin & Public

Project ini didesain dengan pemisahan yang jelas:

Admin Panel (/dashboard, /settings)

Authenticated users only
Sidebar navigation dengan AppSidebar
Dashboard dengan widgets dan statistics
User management dan settings

Public Site (/, /login, /register)

Accessible untuk semua visitors
Header navigation dengan AppHeader
Landing page dan auth pages
SEO optimized

Code Organization & Standards

Project ini mengikuti strict coding standards dengan:

📊 PHPStan (Level 5) - Static type analysis

Strict type declarations
Type casting untuk semua variables
Nullable types & union types
No implicit any types

🎨 ESLint - TypeScript/React linting

No explicit any types
Type-safe prop interfaces
Proper import organization
No unused variables

🔧 Pint - PHP code formatting

PSR-12 compliance
Automatic import sorting
Constructor property promotion
Consistent spacing & indentation

Recommended Workflow:

./vendor/bin/pint          # 1. Format PHP
./vendor/bin/phpstan...    # 2. Type check PHP
npx eslint . --fix         # 3. Format TS/React
./vendor/bin/pest          # 4. Run tests

Struktur Directory

app/
├── Http/Controllers/     # Laravel controllers
├── Models/              # Eloquent models
└── Providers/           # Service providers

resources/js/
├── components/          # Reusable React components
├── layouts/            # Layout components (auth, app, settings)
├── pages/              # Inertia pages
├── hooks/              # Custom React hooks
├── lib/                # Utility functions
└── types/              # TypeScript definitions

routes/
├── web.php             # Public routes
├── admin.php           # Admin routes
├── auth.php            # Authentication routes  
└── settings.php        # Settings routes

docs/                    # Project documentation
├── log-audit/          # Logging & audit docs
├── scurity-audit/      # Security audit docs
├── api/                # API documentation (recommended)
├── architecture/       # Architecture & design (recommended)
├── guide/              # Developer guides (recommended)
└── troubleshooting/    # FAQ & issues (recommended)

Component Architecture

// Type-safe navigation items
interface NavItem {
    title: string;
    href: string;
    icon?: LucideIcon;
    isActive?: boolean;
}

// Shared data across components
interface SharedData {
    auth: { user: User };
    name: string;
    sidebarOpen: boolean;
}

Documentation

Semua dokumentasi tersimpan di folder /docs dengan struktur kategori:

security-audit/ - Comprehensive security audit & implementation guides
architecture/ - System architecture, patterns & design decisions
guides/ - Developer guides & tutorials (coming soon)
api/ - API endpoints & authentication (coming soon)

📖 Key Documentation:

docs/architecture/OVERVIEW.md - System architecture overview
docs/architecture/ADMIN_SITE_SEPARATION.md - Admin vs Site separation pattern
SECURITY_README.md - Security documentation hub

GitHub Copilot Instructions

Project ini memiliki comprehensive Copilot instructions di .github/copilot-instructions.md (705 lines) yang mencakup:

✅ Architecture Patterns - Admin vs Site separation
✅ PHPStan Standards - Type checking (Level 5)
✅ ESLint Rules - TypeScript/React linting
✅ Pint Formatting - PHP code formatting (PSR-12)
✅ Documentation Structure - /docs organization

Instruksi ini memastikan Copilot menghasilkan code yang comply dengan semua standards.

📚 Asset Separation

Project ini menggunakan pemisahan asset yang ketat antara Admin dan Site:

Admin: Entry point terpisah di resources/js/entries/admin.tsx
Site: Entry point terpisah di resources/js/entries/site.tsx
Auto-detection: Middleware otomatis memilih template berdasarkan route
Optimized bundles: Vite menghasilkan bundle terpisah untuk performa optimal

Untuk detail lengkap, lihat: docs/ASSET_SEPARATION.md

Verifikasi setup:

bash scripts/verify-asset-separation.sh

🎨 UI Components

Menggunakan shadcn/ui untuk component library yang:

Fully accessible (ARIA compliant)
Customizable dengan Tailwind CSS
Type-safe dengan TypeScript
Consistent design system

Key Components

AppSidebar - Admin navigation sidebar
AppHeader - Public site header
UserMenu - User dropdown dengan profile actions
Breadcrumbs - Navigation breadcrumbs
ThemeToggle - Dark/light mode switcher

🔧 Kustomisasi

Theme Configuration

Ubah tema di tailwind.config.js dan resources/css/app.css:

/* Dark mode colors */
.dark {
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;
  /* ... */
}

Navigation Items

Edit navigation di components/app-sidebar.tsx:

const mainNavItems: NavItem[] = [
    {
        title: 'Dashboard', 
        href: dashboard(),
        icon: LayoutGrid,
    },
    // Add more items...
];

🧪 Testing

# Run all tests
php artisan test

# Run specific test
php artisan test --filter=DashboardTest

# Run with coverage
php artisan test --coverage

# Code quality checks
./vendor/bin/phpstan analyze --memory-limit=2G  # PHPStan type checking
./vendor/bin/pint --test                         # Pint format check
npx eslint .                                     # ESLint check

Test Results

✅ Pest:      75 tests passed (264 assertions)
✅ PHPStan:   [OK] No errors
✅ ESLint:    No errors
✅ Pint:      PASS (85 files)

🔒 Security

Aplikasi ini telah melalui comprehensive security audit (Oktober 16, 2025).

📊 Status Keamanan Terkini

Security Score: 80/100 ⚠️ (Target: 90/100 ✅)
Critical Issues: 0 tersisa ✅
High Priority: 2 tersisa ⏳
Status: Improved, 2-3 minggu lagi menuju production ready

📚 Dokumentasi Keamanan

🎯 Mulai Di Sini:

SECURITY_README.md - 📖 Navigation guide untuk semua dokumentasi keamanan
SECURITY_CHECKLIST.md - Quick reference checklist

Audit Komprehensif (Oktober 16, 2025):

docs/security-audit/SECURITY_AUDIT_CURRENT.md - Comprehensive security audit terkini
docs/security-audit/SECURITY_IMPLEMENTATION.md - Step-by-step implementation guide
.github/SECURITY.md - Security policy & vulnerability reporting

🛡️ Fitur Keamanan Built-in

✅ Two-Factor Authentication - Laravel Fortify 2FA
✅ Rate Limiting - Login throttling (5 attempts)
✅ CSRF Protection - Laravel & Inertia built-in
✅ SQL Injection Protection - Eloquent ORM
✅ XSS Protection - React auto-escaping
✅ Password Hashing - Bcrypt (12 rounds)
✅ Activity Logging - Spatie Activity Log
✅ Type Safety - PHPStan Level 5

⚠️ Rekomendasi Pre-Production

Sebelum deploy ke production, WAJIB review dan implementasi:

Critical Issues ✅
- ✅ Strong admin passwords implemented
- ✅ Sensitive data filtered in Inertia props
High Priority (2-3 weeks)
- ⏳ Integrate SecurityLogger with authentication
- ⏳ Configure Activity Log migrations
- 🔄 Implement Content Security Policy
- 🔄 Add global rate limiting

Configuration Required

APP_ENV=production
APP_DEBUG=false
APP_URL=https://yourdomain.com
SESSION_ENCRYPT=true
SESSION_LIFETIME=30
SESSION_SECURE_COOKIE=true
ADMIN_DEFAULT_PASSWORD=<strong-password-24-chars>

Baca docs/security-audit/SECURITY_AUDIT_CURRENT.md untuk detail lengkap.

🔍 Security Audit & Code Quality

# Security checks
composer audit
npm audit --audit-level=high

# Static analysis & type checking
./vendor/bin/phpstan analyze --memory-limit=2G

# Code formatting & linting
./vendor/bin/pint --test
npx eslint .

# Run security tests
php artisan test --filter=SecurityTest

📝 Deployment

Pre-Deployment Checklist

Sebelum deploy, pastikan telah menjalankan semua quality checks:

# 1. Code formatting dengan Pint
./vendor/bin/pint

# 2. Type checking dengan PHPStan (Level 5)
./vendor/bin/phpstan analyze --memory-limit=2G

# 3. Linting dengan ESLint
npx eslint . --fix

# 4. Running tests
./vendor/bin/pest

# 5. Security checks
composer audit
npm audit --audit-level=high

# 6. Review security documentation
# Baca: docs/scurity-audit/SECURITY_CHECKLIST.md

Production Build

# Install production dependencies
composer install --no-dev --optimize-autoloader

# Build frontend assets
npm run build

# Optimize Laravel
php artisan config:cache
php artisan route:cache
php artisan view:cache

# Run migrations
php artisan migrate --force

Environment Variables

Pastikan environment variables berikut diset untuk production:

APP_ENV=production
APP_DEBUG=false
APP_URL=https://your-domain.com

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=your_database
DB_USERNAME=your_username
DB_PASSWORD=your_password

# Security
SESSION_ENCRYPT=true
SESSION_SECURE_COOKIE=true

Lihat juga: docs/scurity-audit/SECURITY_CHECKLIST.md

🤝 Contributing

Fork repository
Buat feature branch (git checkout -b feature/amazing-feature)
Commit changes (git commit -m 'Add amazing feature')
Push ke branch (git push origin feature/amazing-feature)
Open Pull Request

📚 Code Standards & Development Guidelines

Required Reading

Sebelum mulai development, WAJIB baca:

.github/copilot-instructions.md (705 lines)
- Comprehensive guide untuk semua developer & Copilot
- Covers: Architecture, PHPStan, ESLint, Pint, Documentation
docs/COPILOT_INSTRUCTIONS_SUMMARY.md
- Quick reference untuk standards
- Tool chain workflow
- Common issues & fixes

Code Quality Standards

PHPStan (Type Checking - Level 5)

All parameters & return types must have explicit type declarations
No implicit any types
Proper variable type casting
Use nullable types (?Type or Type|null)

ESLint (TypeScript/React Linting)

No explicit any types (use specific types or unknown)
Type-safe prop interfaces
Proper import organization
No unused variables or imports

Pint (PHP Code Formatting)

PSR-12 compliance
4-space indentation
Proper import sorting
Constructor property promotion (PHP 8)

Documentation

All docs in /docs folder organized by category
File naming: UPPERCASE_WITH_UNDERSCORES.md
Each category has README.md or INDEX.md
Include frontmatter with status & date

Development Workflow

Before committing code:

# 1. Format PHP
./vendor/bin/pint

# 2. Type check PHP
./vendor/bin/phpstan analyze --memory-limit=2G

# 3. Format TypeScript/React
npx eslint . --fix

# 4. Run tests
./vendor/bin/pest --no-coverage

# 5. Verify all passing
# If all green, ready to commit!

Common Issues & Fixes

Issue	Solution
PHPStan error: "Parameter expects int, string given"	Cast option: `(int) $this->option('name')`
ESLint error: "Unexpected any"	Use specific type or `unknown as Type`
Unused variable warning	Remove variable or use it in code
Formatting not applied	Run `./vendor/bin/pint` & `npx eslint . --fix`
Test failing after changes	Run `./vendor/bin/pest` to see failures

📄 License

Project ini menggunakan MIT License.

🙏 Credits & Acknowledgments

Frameworks & Libraries

Laravel - The PHP framework for web artisans
React - A JavaScript library for building user interfaces
Inertia.js - Build single-page apps, without building an API
Tailwind CSS - A utility-first CSS framework
shadcn/ui - Beautiful and accessible UI components

Key Packages

Spatie Laravel ActivityLog - Log activity inside your Laravel app
Intervention Image - Image handling and manipulation library
Spatie Laravel Backup - A package to backup your Laravel app
Laravel Fortify - Frontend agnostic authentication backend

Development Tools

PHPStan - Static analysis tool for PHP (Level 5 - strict)
Pint - Laravel's PHP code style fixer (PSR-12)
ESLint - JavaScript/TypeScript linting with strict rules
Laravel Boost - Enhanced Laravel development experience
Vite - Next generation frontend tooling
Pest - An elegant PHP testing framework
VS Code - Code editor with excellent Laravel support
GitHub Copilot - AI pair programmer with custom instructions

UI & Icons

Radix UI - Low-level UI primitives for React
Lucide - Beautiful & consistent icon toolkit
Headless UI - Unstyled, accessible UI components

Documentation & Security

Laravel Security Guide - Official Laravel security best practices
OWASP - Security best practices reference

Repository

Terinspirasi dari Laravel React Starter Kit - Official Laravel starter kit untuk React

Used By

Base project ini sudah digunakan oleh:

indatechno
santrimu

Built with ❤️ using Laravel, React, TypeScript, and strict coding standards

Latest Update: October 16, 2025
Version: 1.0.0 Production Ready
Status: ✅ All quality checks passing

Name		Name	Last commit message	Last commit date
Latest commit History 162 Commits
.github		.github
app		app
bootstrap		bootstrap
components/ui/minimal-tiptap		components/ui/minimal-tiptap
config		config
database		database
docs		docs
public		public
resources		resources
routes		routes
scripts		scripts
storage		storage
tests		tests
.editorconfig		.editorconfig
.env.example		.env.example
.gitattributes		.gitattributes
.gitignore		.gitignore
.prettierignore		.prettierignore
.prettierrc		.prettierrc
.script-rector.sh		.script-rector.sh
AUDIT_VERIFICATION.md		AUDIT_VERIFICATION.md
DOCUMENTATION_SUMMARY.md		DOCUMENTATION_SUMMARY.md
README.md		README.md
SECURITY_CHECKLIST.md		SECURITY_CHECKLIST.md
SECURITY_README.md		SECURITY_README.md
artisan		artisan
boost.json		boost.json
components.json		components.json
composer.json		composer.json
composer.lock		composer.lock
eslint.config.js		eslint.config.js
package-lock.json		package-lock.json
package.json		package.json
phpstan.neon		phpstan.neon
phpunit.xml		phpunit.xml
rector.php		rector.php
tsconfig.json		tsconfig.json
vite.config.ts		vite.config.ts
vitest.config.ts		vitest.config.ts

sdldev/fullstack-laravel-react-starter

Folders and files

Latest commit

History

Repository files navigation

Fullstack Laravel React Starter

🚀 Tech Stack

Backend

Frontend

Build Tools

🎯 Fitur Utama

🔐 Authentication System

🎨 UI/UX

📊 Admin Panel

🌐 Public Site

🛠️ Development Experience

📦 Integrasi Package

Backend Packages

Development Tools

Frontend Components

🚀 Quick Start

Prerequisites

Installation

Development Scripts

Complete Code Quality Workflow

🏗️ Arsitektur

Pemisahan Admin & Public

Code Organization & Standards

Struktur Directory

Component Architecture

Documentation

GitHub Copilot Instructions

📚 Asset Separation

🎨 UI Components

Key Components

🔧 Kustomisasi

Theme Configuration

Navigation Items

🧪 Testing

Test Results

🔒 Security

📊 Status Keamanan Terkini

📚 Dokumentasi Keamanan

🛡️ Fitur Keamanan Built-in

⚠️ Rekomendasi Pre-Production

🔍 Security Audit & Code Quality

📝 Deployment

Pre-Deployment Checklist

Production Build

Environment Variables

🤝 Contributing

📚 Code Standards & Development Guidelines

Required Reading

Code Quality Standards

Development Workflow

Common Issues & Fixes

📄 License

🙏 Credits & Acknowledgments

Frameworks & Libraries

Key Packages

Development Tools

UI & Icons

Documentation & Security

Repository

Used By

About

Topics

Resources

Security policy

Uh oh!

Stars

Watchers

Forks

Releases 1

Packages 0

Uh oh!

Contributors 5

Uh oh!

Languages

Packages