DEV Community

Cover image for Free and open source Laravel admin dashboard interface
Themesberg profile image Zoltán Szőgyényi
Zoltán Szőgyényi for Themesberg

Posted on

Free and open source Laravel admin dashboard interface

#laravel #opensource #showdev

Volt Laravel Dashboard features dozens of handcrafted UI elements tailored for Bootstrap 5 and an out of the box Laravel backend.

The Livewire integration allows you to build dynamic interfaces easier without leaving the comfort of your favourite framework.

If you combine this even further with Alpine.js, you get the perfect combo for your next big project.

Project higlights

  • 100+ handcrafted UI components tailored for Bootstrap 5 with Vanilla JS. This means buttons, alerts, modals, datepickers and everything in between
  • 11 example pages to get you started
  • 3 lightweight plugins: datepicker, notification and charts library
  • Sass files & Gulp commands
  • fully-functional authentication system, register and user profile editing features built with Laravel Livewire & Alpine.js integration

Free for personal and commercial projects

Whether you're working on a side project or delivering to a client, with Volt Dashboard Laravel you can do both. Volt Dashboard Laravel is released under MIT license, so you can use it for personal and commercial projects for free. Just start coding.

Getting started

Prerequisites

If you don't already have an Apache local environment with PHP and MySQL, use one of the following links:

Also, you will need to install Composer: https://getcomposer.org/doc/00-intro.md

Laravel

  1. Download the project’s zip then copy and paste volt-dashboard-master folder in your projects folder. Rename the folder to your project’s name
  2. Make sure you have Node and Composer locally installed. 3.Run the following command in order to download all the project dependencies. composer install
  3. In your terminal run npm install
  4. Copy .env.example to .env and updated the configurations (mainly the database configuration)
  5. In your terminal run php artisan key:generate
  6. Run php artisan migrate --seed to create the database tables and seed the roles and users tables
  7. Run php artisan storage:link to create the storage symlink (if you are using Vagrant with Homestead for development, remember to ssh into your virtual machine and run the command from there).

Usage

Register a user or login using admin@volt.com and secret and start testing the Laravel app (make sure to run the migrations and seeders for these credentials to be available).
Make sure to run the migrations and seeders for the above credentials to be available.

Make sure to run the migrations and seeders for the above credentials to be available.

Besides the dashboard and the auth pages this application also has 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 of the features can be viewed once you login 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 /dashboard in the URL.

Sign in

You have the option to log in using the email and password. To access this page, just click the "Page examples/ Sign in" link in the left sidebar or add /login in the URL.

The app/Http/Livewire/Auth/Login.php handles the log in process and validation.

   protected $rules = [
        'email' => 'required|email',
        'password' => 'required',
    ];

    public function login()
    {
        $credentials = $this->validate();
        return auth()->attempt($credentials)
                ? redirect()->intended('/profile')
                : $this->addError('email', trans('auth.failed'));
    }
Enter fullscreen mode Exit fullscreen mode

Sign up

You have the option to register an user using the email and password. To access this page, just click the "Page examples/ Sign up" link in the left sidebar or add /register in the URL.

The app/Http/Livewire/Auth/Register.php handles the register process and validation.

    public function register()
    {
        $this->validate([
            'email' => 'required',
            'password' => 'required|same:passwordConfirmation|min:6',
        ]);

        $user = User::create([
            'email' =>$this->email,
            'password' => Hash::make($this->password),
            'remember_token' => Str::random(10),
        ]);

        auth()->login($user);

        return redirect('/profile');
    }
Enter fullscreen mode Exit fullscreen mode

Forgot password

You have the option to send an email containing the password reset link to an user. To access this page, just click the "Page examples/ Forgot password" link in the left sidebar or add /forgot-password in the URL.

The app/Http/Livewire/ForgotPassword.php handles the email submission process.

    public function recoverPassword() {
        $this->validate();
        $user=User::where('email', $this->email)->first();
        $this->notify(new ResetPassword($user->id));
        $this->mailSentAlert = true;
        }
    }
Enter fullscreen mode Exit fullscreen mode

The app/Notifications/ResetPassword.php handles the email submission itself. Here you can edit the overall layout of the email.

    public function toMail($notifiable)
    {
        $url = URL::signedRoute('reset-password', ['id' => $this->token]);
        return (new MailMessage)
                    ->subject('Reset your password')
                    ->line('Hey, did you forget your password? Click the button to reset it.')
                    ->action('Reset Password', $url)
                    ->line('Thank you for using our application!');
    }
Enter fullscreen mode Exit fullscreen mode

Reset password

The email sent through the forgot password process will send the user to an unique link containing the password reset form. To access an example of this page, just click the "Page examples/ Reset password" link in the left sidebar or add /reset-password-example in the URL.

The app/Http/Livewire/ResetPassword.php handles the password reset process and validation.


    public function resetPassword() {
        $this->validate();
        $existingUser = User::where('email', $this->email)->first();
        if($existingUser && $existingUser->id == $this->urlId) {
            $existingUser->update([
                'password' => Hash::make($this->password)
            ]);
            $this->isPasswordChanged = true;
            $this->wrongEmail = false;
        }
        else {
            $this->wrongEmail = true;
        }
    }
Enter fullscreen mode Exit fullscreen mode

User Profile

You have the option to edit the current logged in user's profile information (name, email, profile picture) and password. To access this page, just click the "Profile" link in the left sidebar or add /profile in the URL.

The app/Http/Livewire/Profile.php handles the update of the user information and password.

    public function mount() { $this->user = auth()->user(); }

    public function save()
    {
        $this->validate();

        $this->user->save();

        $this->showSavedAlert = true;

        }
    }
Enter fullscreen mode Exit fullscreen mode

If you input the wrong data when editing the profile, don't worry. Validation rules have been added to prevent this.

    protected $rules = [
        'user.first_name' => 'max:15',
        'user.last_name' => 'max:20',
        'user.birthday' => 'date_format:Y-m-d',
        'user.email' => 'email',
        'user.phone' => 'numeric',
        'user.gender' => '',
        'user.address' => 'max:20',
        'user.number' => 'numeric',
        'user.city' => 'max:20',
        'user.zip' => 'numeric',
    ];
Enter fullscreen mode Exit fullscreen mode

Documentation

The documentation for Volt is hosted on our website.

Resources

Upgrade to Pro

Take front-end development to the next level by upgrading to the PRO version of Volt Laravel Admin Dashboard featuring over 3 times more components, plugin and pages and 5 times more Laravel features. You also get 6 months of premium support and free updates. Check out Volt Pro Premium Laravel Admin Dashboard.

Licensing

Useful Links

Credits

Top comments (1)

Collapse
 
fullstackapps profile image
FullStack_Apps •

Sounds good. Thanks for your efforts.

Read next

sonmusui profile image

What is Agile methodology? (A beginner’s guide)

Sonam Choeda -

arinzingade profile image

ClickHouse: The Key to Faster Insights

Arin Zingade -

devmahfuz profile image

What Happens When You Run “php artisan serve” in Laravel?

Mahfuzur Rahman -

bhaidar profile image

Safe Database Migration: Converting MySQL Enum to String in Laravel

Bilal Haidar -