Documentation Index
Fetch the complete documentation index at: https://mintlify.com/keving5726/megacreative/llms.txt
Use this file to discover all available pages before exploring further.
Mega Creative’s frontend is built with Laravel Blade templates and Bootstrap 4. All views extend a single master layout that provides the full HTML skeleton, navigation header, and footer. Font Awesome icons are bundled alongside Bootstrap through the SASS pipeline, so no external CDN links are required.
Layout Structure
The layout system is split into a master file and three reusable partials, all living under resources/views/.
resources/views/layouts/app.blade.php
This is the master layout that every page view extends. It assembles the full HTML document by including the three partials, wrapping the main content in a Bootstrap container, and loading the compiled JavaScript bundle.
<!DOCTYPE html>
<html lang="en">
@include('includes.head')
<body>
@include('includes.header')
<div class="container">
@yield('content')
</div>
@include('includes.footer')
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
| Slot | Description |
|---|
@yield('title') | Injected into the <title> tag inside includes.head |
@yield('content') | The main page body — filled by each resource view |
resources/views/includes/head.blade.php
Renders the HTML <head> element. It sets the charset and viewport meta tags, inserts the dynamic page title via @yield('title'), and loads the compiled CSS (which includes Bootstrap 4 and Font Awesome):
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, shrink-to-fit=no">
<title>Mega Creative | @yield('title')</title>
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>
<header>
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="{{ route('home') }}">MegaCreative</a>
<!-- Carreras dropdown: route('carreras.create'), route('carreras.index') -->
<!-- Estudiantes dropdown: route('estudiantes.create'), route('estudiantes.index') -->
</nav>
</header>
resources/sass/footer.sass.
View Sets
resources/views/welcome.blade.php
The application landing page served at /. It extends layouts/app, sets the title to Home, and renders a Bootstrap jumbotron with a welcome heading and introductory paragraph.
@extends('layouts/app')
@section('title', 'Home')
@section('content')
<div class="jumbotron">
<h1 class="display-4">Welcome to Mega Creative!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
</div>
@endsection
Estudiantes Views (resources/views/estudiantes/)
| File | Route | Description |
|---|
index.blade.php | GET /estudiantes | Striped Bootstrap table listing all students with Mostrar and Borrar action buttons |
create.blade.php | GET /estudiantes/create | Form with ten fields: nombres, apellidos, sexo (select), fecha de nacimiento, email, carrera (select), status (select), pais (select), estado (select), ciudad (select) |
show.blade.php | GET /estudiantes/{id} | Read-only detail view for a single student |
edit.blade.php | GET /estudiantes/{id}/edit | Pre-populated edit form with the same ten fields as create |
Carreras Views (resources/views/carreras/)
| File | Route | Description |
|---|
index.blade.php | GET /carreras | Table listing all academic programs with action buttons |
create.blade.php | GET /carreras/create | Form with three fields: nombre, descripcion, and status (select) |
show.blade.php | GET /carreras/{id} | Read-only detail view for a single program |
edit.blade.php | GET /carreras/{id}/edit | Pre-populated edit form matching the create form |
Blade Syntax Used
The views rely on several standard Blade directives. Here is a reference of the key patterns found throughout the template set.
Extending the Layout
Every resource view starts by declaring which layout it uses and filling the title and content sections:
@extends('layouts/app')
@section('title', 'Crear Estudiante')
@section('content')
{{-- page content here --}}
@endsection
Iterating Records
The index views loop over a model collection passed from the controller:
@foreach($estudiantes as $estudiante)
<tr>
<td>{{ $estudiante->nombres }}</td>
<td>{{ $estudiante->apellidos }}</td>
<td>{{ $estudiante->email }}</td>
<td>{{ $estudiante->carrera->nombre }}</td>
<td>{{ $estudiante->status->status }}</td>
<td>
<a href="{{ route('estudiantes.show', $estudiante->id) }}"
class="btn btn-primary">Mostrar</a>
</td>
</tr>
@endforeach
Populating Dropdowns from Lookup Tables
Create and edit forms build <select> elements by iterating the lookup collections passed by the controller:
<select name="carrera" class="form-control">
@foreach($carreras as $carrera)
<option value="{{ $carrera->id }}">{{ $carrera->nombre }}</option>
@endforeach
</select>
Flash Message Display
Index views check for the session flash key set by the controller after successful write operations:
@if(session()->get('success'))
<div class="alert alert-success">
{{ session()->get('success') }}
</div>
@endif
Validation Error Display
Create and edit forms surface server-side validation errors using the $errors bag:
@if ($errors->any())
<div class="alert alert-danger">
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
@csrf to embed a CSRF token. Delete buttons use a POST form with @method('DELETE') to satisfy the resource route’s expected HTTP verb:
<form action="{{ route('estudiantes.destroy', $estudiante->id) }}" method="post">
@csrf
@method('DELETE')
<button class="btn btn-danger" type="submit">Borrar</button>
</form>
Named Route Generation
Links and form actions always use route() helper calls rather than hard-coded URLs, which keeps the application portable:
{{-- Navigate to a student's detail page --}}
<a href="{{ route('estudiantes.show', $estudiante->id) }}">Ver</a>
{{-- Navigate to the programs list --}}
<a href="{{ route('carreras.index') }}">Carreras</a>
{{-- Submit a create form --}}
<form method="post" action="{{ route('estudiantes.store') }}">
Asset Compilation
Mega Creative uses Laravel Mix (Webpack wrapper) to compile SASS and bundle JavaScript.
SASS Structure
| File | Role |
|---|
resources/sass/app.scss | Main entry point — imports Bootstrap, Font Awesome, and the two custom SASS files |
resources/sass/main.sass | Global layout rules: html min-height, body top/bottom margins, large-breakpoint font-size adjustment |
resources/sass/footer.sass | Footer-specific styles: absolute positioning, link transitions, social icon hover animations, and quick-link hover indent effect |
app.scss pulls everything together:
@import "~bootstrap/scss/bootstrap";
@import "~@fortawesome/fontawesome-free/scss/brands";
@import "~@fortawesome/fontawesome-free/scss/fontawesome";
@import "~@fortawesome/fontawesome-free/scss/regular";
@import "~@fortawesome/fontawesome-free/scss/solid";
@import "main";
@import "footer";
webpack.mix.js
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
resources/js/app.js → public/js/app.jsresources/sass/app.scss → public/css/app.css
Compilation Commands
| Command | Output |
|---|
npm run dev | Unminified assets with source maps — fastest for local iteration |
npm run watch | Unminified assets, rebuilt automatically whenever a source file changes |
npm run prod | Minified, version-hashed assets ready for production deployment |
Use npm run watch during active development. It monitors all files imported into app.scss and app.js and recompiles instantly on save, so you see style and script changes in the browser with a simple page refresh — no manual compile step needed.