Smart School Developer

This is a complete HTML document for a blog post. It visually presents a set of developer instructions for scaffolding a new module in a "Smart School" application, using a clean, card-based layout with highlighted code blocks and design standards. ```html

⚠️

Developer Instructions

Follow these exact steps in order to safely scaffold and integrate a new module into the Smart School without disrupting the existing ecosystem.

1

Create Migration

php artisan make:migration create_sm_yourmodule_table
php artisan migrate

2

Create Controller

php artisan make:controller YourModuleController

3

Add Routes (routes/web.php)

Route::prefix('yourmodule')->name('yourmodule.')->group(function () {
    Route::get('/', [YourModuleController::class, 'index'])->name('index');
    Route::post('/', [YourModuleController::class, 'store'])->name('store');
    Route::patch('/{id}', [YourModuleController::class, 'update'])->name('update');
    Route::delete('/{id}', [YourModuleController::class, 'destroy'])->name('destroy');
});

4

Create Vue Page

import AppLayout from '@/Layouts/AppLayout.vue'
import PageHeader from '@/Components/PageHeader.vue'
import { confirmDelete } from '@/Utils/confirm'
import { formatDate } from '@/Utils/dateHelpers'
defineProps({ items: Array })
// Template: AppLayout > PageHeader > your content

5

Add Sidebar Link

// In AppLayout.vue sidebar section:
// SidebarItem :href='#' label='Module Name'

6

Rebuild Frontend

npm run build

Design Standards & Best Practices

✓ Confirmation Dialogs

Never use native browser window.confirm(). Always import and use the SweetAlert wrappers confirmDelete() or confirmAction() for a premium UX.

✓ Date Formatting

import { formatDate } from '@/Utils/dateHelpers'

Avoid toLocaleDateString(). Enforce absolute consistency across the Smart School using the global formatter.

✓ Layout Structure

<AppLayout>
  <PageHeader />
  <div class="max-w-7xl mx-auto">...</div>
</AppLayout>

Wrap every authenticated page in AppLayout to ensure the sidebar and topbar render correctly.

✓ UI Color Semantic Palette

Primary (Indigo) Success (Emerald) Danger (Rose) Warning (Amber) Neutral (Slate)

🧩 Smart School · Module Scaffolding Blog v1.0 · best practices for 2026

```