We did it again. We fired up a new collab to give developers like yourself another easy way to jumpstart their next web development project. And make it look amazing in the process.

We created a free starter kit to rule them all: beautiful frontend designed by Creative Tim with a cohesive Laravel backend by Updivision. In short, the building blocks for a web app which looks like you want it to look and does what you want it to do. With zero time wasted.

Instead of hand coding every component and investing time in doing the integration, you have a boilerplate which does the dirty work for you. The out of the box CRUD for managing users is a must for any app you are going to build, while the Google-inspired Material Design components can be easily combined and customized for a sight to behold.

You can find the free starter kit in three places:

GitHub: https://github.com/laravel-frontend-presets/material-dashboard

Creative Tim website:https://www.creative-tim.com/product/material-dashboard-laravel

Packagist: https://packagist.org/packages/laravel-frontend-presets/material-dashboard

The package is free to download, use, and modify as you see fitting, including for commercial purposes, under MIT License.

The Free version will provide you with:

customized Bootstrap 4 theme with handcrafted components
a couple of demo layouts
admin dashboard
a stylish working login and register page
user profile editing
fully functional user management — Create, Read, Update, and Delete (CRUD)

Here are the steps you need to follow to install Material Dashboard Free Laravel:

Material Frontend Preset for Laravel Framework 5.5. and Up

Current version: Material Dashboard v2.1.1. See more info at https://www.creative-tim.com/product/material-dashboard

Note: We recommend installing this preset on a project that you are starting from scratch, otherwise your project’s design might break.

Installation

After initializing a fresh instance of Laravel (and making all the necessary configurations), install the preset using one of the provided methods:

Via composer

Cd to your Laravel app
Install this preset via composer require laravel-frontend-presets/material-dashboard. No need to register the service provider. Laravel 5.5 & up can auto-detect the package.
Run php artisan preset material command to install the Material Dashboard preset. This will install all the necessary assets and also the custom auth views, it will also add the auth route in routes/web.php (NOTE: If you run this command several times, be sure to clean up the duplicate Auth entries in routes/web.php)
In your terminal run composer dump-autoload
Run php artisan migrate –seed to create the basic users table

By using the archive

In your application’s root create a presets folder
Download an archive of the repo and unzip it
Copy and paste the material-dashboard-master folder in presets (created in step 2) and rename it to material
Open composer.json file
Add “LaravelFrontendPresets\\MaterialPreset\\”: “presets/material/src” to autoload/psr-4 and to autoload-dev/psr-4
Add LaravelFrontendPresets\MaterialPreset\MaterialPresetServiceProvider::class to config/app.php file
In your terminal run composer dump-autoload
Run php artisan preset material command to install the Material preset. This will install all the necessary assets and also the custom auth views, it will also add the auth route in routes/web.php (NOTE: If you run this command several times, be sure to clean up the duplicate Auth entries in routes/web.php)
Run php artisan migrate –seed to create basic users table

Usage

The fastest way to get a sense of the look and feel is through the live preview.

In order to start testing the free starter kit, register as a user or log in using the username admin@material.comand the password secret. Make sure to run the migrations and seeders for these credentials to be available.

Besides the dashboard and the auth pages, the present also has a user management example and an edit profile page. All the necessary files (controllers, requests, views) are installed out of the box and all the needed routes are added to routes/web.php.

Keep in mind that all these features can be viewed once you log in using the credentials provided above or by registering your own user.

Dashboard

You can access the dashboard either by using the “Dashboard” link in the left sidebar or by adding /home in the URL.

Profile Edit

The free starter kit gives you the option to edit the current logged in user’s profile (change name, email, and password). To access this page just click the “User profile” link in the left sidebar or add /profile in the URL.

The App\Htttp\Controlers\ProfileController handles the update of the user information.

public function update(ProfileRequest $request)

{

auth()->user()->update($request->all());

return back()->withStatus(__(‘Profile successfully updated.’));

}

If you enter the wrong input data when editing the profile, don`t worry. Validation rules were added to prevent this (see App\Http\Requests\ProfileRequest).

If you try to change the password, you will see that other validation rules were added in App\Http\Requests\PasswordRequest. Notice that in this file you have a custom validation rule that can be found in App\Rules\CurrentPasswordCheckRule.

public function rules()

{

return [

‘old_password’ => [‘required’, ‘min:6’, new CurrentPasswordCheckRule],

‘password’ => [‘required’, ‘min:6’, ‘confirmed’, ‘different:old_password’],

‘password_confirmation’ => [‘required’, ‘min:6’],

];

}

User Management

The preset comes with a user management option out of the box. To access this example, click the “User Management” link in the left sidebar or add /user to the URL.

The first thing you will see is a listing of existing users.

You can add new ones by clicking the “Add user” button in the upper right corner. On the Add user page, you will be presented with an input form, where you can add the user`s name, email, and password.

All pages are generate using blade templates:

<div class=”form-group{{ $errors->has(‘name’) ? ‘ has-danger’ : ” }}”>

<input class=”form-control{{ $errors->has(‘name’) ? ‘ is-invalid’ : ” }}” name=”name” id=”input-name” type=”text” placeholder=”{{ __(‘Name’) }}” value=”{{ old(‘name’) }}” required=”true” aria-required=”true”/>

@if ($errors->has(‘name’))

<span id=”name-error” class=”error text-danger” for=”input-name”>{{ $errors->first(‘name’) }}</span>

@endif

</div>

Also, validation rules were added so you will know exactly what to enter in the form fields (see App\Http\Requests\UserRequest). Note that these validation rules also apply to the user edit option.

public function rules()

{

return [

‘name’ => [

‘required’, ‘min:3′

’email’ => [

‘required’, ’email’, Rule::unique((new User)->getTable())->ignore($this->route()->user->id ?? null)

‘password’ => [

$this->route()->user ? ‘nullable’ : ‘required’, ‘confirmed’, ‘min:6’

]

];

}

Once you add more users, the list will get bigger and for every user, you will have edit and delete options in the Actions column.

All the sample code for the user management can be found in App\Http\Controllers\UserController. See store method example bellow:

public function store(UserRequest $request, User $model) { $model->create($request->merge([‘password’ => bcrypt($request->get(‘password’))])->all()); return redirect()->route(‘user.index’)->withStatus(__(‘User successfully created.’)); }

Let us know what you think. Your feedback is very valuable as it helps us make this product better. So, leave a comment below or help with a Star on GitHub. Stay tuned for the Pro version!

Extra

Laravel Templates start to gain a lot of digital space, as they save you up to 90hs of development and design. Creative Tim launched a series of Laravel templates.

White Dashboard PRO Laravel

The dashboard is packed with a huge number of handcrafted UI components, charts, maps, tables and more. In short, everything you need for you next app.

All components are fully implemented and can take variations in color, that you can easily modify using SASS files.We want the design process to be seamless, so switching from prototype to the real thing is very easy.

Download Live Preview Get Hosting