Starter KIT Engine

🚀 Premium Laravel 12 Boilerplate with Vue 3, Inertia.js & Tailwind CSS v4

Features • Tech Stack • Installation • Usage • Structure • License

---

📖 About

Starter KIT Engine is a premium Laravel 12 boilerplate designed to accelerate your web application development. With pre-configured modern tools, optimized architecture, and a beautiful admin dashboard, you can focus on building your unique business logic instead of spending hours on initial setup.

💡 Save 20-40 hours on initial project configuration and start building in just 5 minutes!

---

✨ Features

🎯 Core Features

Feature	Description
Pre-configured Laravel 12	Optimal setup with caching, queue workers, and security headers
Modern Frontend Stack	Vue 3 + Inertia.js for SPA-like experience without API complexity
Tailwind CSS v4	Latest version with custom design system and components
Authentication Ready	Complete auth flow with login, register, password reset
Admin Dashboard	Beautiful, responsive dashboard with sidebar navigation
User Management	Full CRUD operations for user management
Transaction Module	Sample transaction management with pagination
Analytics Page	Chart.js integration for data visualization
Settings & Profile	User profile management and app settings
Dark/Light Mode Ready	Pre-configured color system for theming

🛠️ Developer Experience

• ✅ Hot Module Replacement (HMR) - Instant updates during development
• ✅ Ziggy Routes - Use Laravel routes in JavaScript
• ✅ Lucide Icons - Beautiful, customizable icon library
• ✅ Form Validation - Server-side validation with Inertia error handling
• ✅ Responsive Design - Mobile-first approach for all pages
• ✅ Clean Architecture - Well-organized folder structure

---

🛠️ Tech Stack

Backend

Technology	Version	Purpose
PHP	^8.2	Programming Language
Laravel	12.x	PHP Framework
Laravel Sanctum	4.x	API Authentication
Inertia.js	2.x	SPA Bridge
Ziggy	2.x	JavaScript Route Helper

Frontend

Technology	Version	Purpose
Vue.js	3.4+	JavaScript Framework
Tailwind CSS	4.x	Utility-first CSS
Vite	6.x	Build Tool
Chart.js	4.x	Data Visualization
Lucide Vue	0.562+	Icon Library
Axios	1.7+	HTTP Client

Development Tools

Tool	Purpose
Laravel Breeze	Authentication Scaffolding
Laravel Pint	Code Style Fixer
Laravel Pail	Real-time Log Viewer
PHPUnit	Testing Framework
Faker	Test Data Generation

---

📋 Requirements

Before installation, make sure your system meets these requirements:

• PHP >= 8.2
• Composer >= 2.x
• Node.js >= 18.x
• NPM >= 9.x
• MySQL >= 8.0 or PostgreSQL >= 13 or SQLite

---

🚀 Installation

Option 1: Quick Setup (Recommended)

# Clone the repository
git clone https://github.com/your-username/starterkit-laravel12.git

# Navigate to project directory
cd starterkit-laravel12

# Run the setup script (installs dependencies, generates key, runs migrations)
composer setup

Option 2: Manual Installation

# 1. Clone the repository
git clone https://github.com/4lifbima/starterkit-laravel12.git
cd starterkit-laravel12

# 2. Install PHP dependencies
composer install

# 3. Copy environment file
cp .env.example .env

# 4. Generate application key
php artisan key:generate

# 5. Configure your database in .env file
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=starterkit
DB_USERNAME=root
DB_PASSWORD=

# 6. Run database migrations
php artisan migrate

# 7. (Optional) Seed the database with sample data
php artisan db:seed

# 8. Install JavaScript dependencies
npm install

# 9. Build assets for development
npm run dev

---

💻 Usage

Development Server

Start all development services with a single command:

composer dev

This will concurrently run:

• 🌐 Laravel Server - http://localhost:8000
• 📥 Queue Worker - Background job processing
• 📋 Laravel Pail - Real-time log viewer
• ⚡ Vite - Hot Module Replacement

Individual Commands

# Start Laravel development server only
php artisan serve

# Start Vite development server only
npm run dev

# Build for production
npm run build

# Run tests
composer test
# or
php artisan test

# Fix code style
./vendor/bin/pint

Accessing the Application

URL	Description
http://localhost:8000	Landing Page
http://localhost:8000/login	Login Page
http://localhost:8000/register	Registration Page
http://localhost:8000/dashboard	Admin Dashboard (requires auth)
http://localhost:8000/docs	Documentation
http://localhost:8000/legal	Privacy Policy, Terms & License

---

📁 Project Structure

starterkit-laravel12/
├── app/
│   ├── Http/
│   │   ├── Controllers/
│   │   │   ├── Auth/                 # Authentication controllers
│   │   │   ├── AnalyticsController.php
│   │   │   ├── DashboardController.php
│   │   │   ├── HelpController.php
│   │   │   ├── ProfileController.php
│   │   │   ├── TransactionController.php
│   │   │   └── UserController.php
│   │   └── Middleware/
│   └── Models/
│
├── resources/
│   ├── js/
│   │   ├── Components/               # Reusable Vue components
│   │   │   ├── Checkbox.vue
│   │   │   ├── Dropdown.vue
│   │   │   ├── InputError.vue
│   │   │   ├── InputLabel.vue
│   │   │   ├── Modal.vue
│   │   │   ├── Pagination.vue
│   │   │   ├── PrimaryButton.vue
│   │   │   ├── SecondaryButton.vue
│   │   │   └── TextInput.vue
│   │   │
│   │   ├── Layouts/                  # Layout components
│   │   │   ├── AdminLayout.vue       # Dashboard layout with sidebar
│   │   │   ├── AuthenticatedLayout.vue
│   │   │   └── GuestLayout.vue       # Auth pages layout
│   │   │
│   │   ├── Pages/                    # Page components (routes)
│   │   │   ├── Auth/                 # Authentication pages
│   │   │   │   ├── Login.vue
│   │   │   │   ├── Register.vue
│   │   │   │   ├── ForgotPassword.vue
│   │   │   │   └── ResetPassword.vue
│   │   │   ├── Analytics/
│   │   │   ├── Help/
│   │   │   ├── Profile/
│   │   │   ├── Settings/
│   │   │   ├── Transactions/
│   │   │   ├── Users/
│   │   │   ├── Dashboard.vue
│   │   │   ├── Docs.vue
│   │   │   ├── PrivacyPolicy.vue
│   │   │   └── Welcome.vue           # Landing page
│   │   │
│   │   └── app.js                    # Vue application entry
│   │
│   ├── css/
│   │   └── app.css                   # Tailwind CSS entry
│   │
│   └── views/
│       └── app.blade.php             # Main HTML template
│
├── routes/
│   ├── web.php                       # Web routes
│   └── auth.php                      # Authentication routes
│
├── public/
│   ├── lara-icon.png                 # Favicon
│   └── larav.png                     # Logo
│
├── database/
│   ├── migrations/                   # Database migrations
│   ├── factories/                    # Model factories
│   └── seeders/                      # Database seeders
│
├── tests/                            # Test files
├── composer.json                     # PHP dependencies
├── package.json                      # JS dependencies
└── vite.config.js                    # Vite configuration

---

🎨 Customization

Brand Colors

The color system is defined in resources/css/app.css. Customize the brand colors:

:root {
    --color-brand: #b30202;           /* Primary brand color */
    --color-brand-light: #e60000;     /* Lighter variant */
    --color-brand-dark: #8b0000;      /* Darker variant */
}

Adding New Pages

1. Create a Vue component in resources/js/Pages/
2. Create a controller (optional) in app/Http/Controllers/
3. Add a route in routes/web.php

Example:

// routes/web.php
Route::get('/my-page', function () {
    return Inertia::render('MyPage');
});

<!-- resources/js/Pages/MyPage.vue -->
<script setup>
import AdminLayout from '@/Layouts/AdminLayout.vue';
import { Head } from '@inertiajs/vue3';
</script>

<template>
    <AdminLayout>
        <Head title="My Page" />
        <h1>Hello World!</h1>
    </AdminLayout>
</template>

---

🧪 Testing

# Run all tests
php artisan test

# Run tests with coverage
php artisan test --coverage

# Run specific test file
php artisan test tests/Feature/ExampleTest.php

---

📦 Production Deployment

Build for Production

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

# Build frontend assets
npm run build

# Cache configuration
php artisan config:cache
php artisan route:cache
php artisan view:cache

Environment Variables

Make sure to set these in production:

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

# Database
DB_CONNECTION=mysql
DB_HOST=your-db-host
DB_DATABASE=your-database
DB_USERNAME=your-username
DB_PASSWORD=your-secure-password

# Session & Cache
SESSION_DRIVER=redis
CACHE_DRIVER=redis

# Queue
QUEUE_CONNECTION=redis

---

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

---

📄 License

This project is open-sourced software licensed under the MIT license.

MIT License

Copyright (c) 2025 Starter KIT Engine

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

---

💬 Support

If you have any questions or need help, feel free to:

• 📧 Email: [email protected]
• 🐛 Open an Issue
• 💬 Discussions

---

Made with ❤️ by Alif Bima Pradana

⬆️ Back to Top