Laravel 12 - Genesis Starter Kit Auth & Dashboard
Laravel 12 - Genesis Starter Kit Auth & Dashboard
In this tutorial, we will learn how to use the Laravel 12 Genesis Starter Kit to quickly build apps with authentication, dashboard, dark mode, and a modern UI ready out of the box.
If you're a video person, feel free to skip the post and check out the video instead!
Quick Overview
This guide walks you through setting up a fresh Laravel 12 project with the Genesis Starter Kit as the starter template. We’ll generate the app using the global Laravel installer, select Pest for testing, and configure MySQL as the database. Because Genesis is applied during project creation, authentication scaffolding, routes, controllers, and views, plus a polished UI are included out of the box, so there’s no need for separate publishing steps. After installing frontend dependencies and starting Vite for real-time asset compilation, we’ll configure the environment, run database migrations, start the Laravel development server, and verify everything by visiting the registration and login pages. This workflow delivers a clean, modern foundation that minimizes setup and lets us focus on building features rather than boilerplate.
Step # 1 : Create fresh Laravel project.
Before we begin working with Genesis, we need a fresh Laravel installation. The easiest way to achieve this is by using the Laravel installer. If you don’t already have it installed globally, run the following command.
composer global require laravel/installer
This command makes the laravel executable available system wide, allowing you to quickly scaffold new projects without typing long Composer commands each time. Once installed, you can create projects instantly using the laravel new command. If you already have the installer set up, you can skip this step.
Now let’s create a new project with Genesis baked in.
laravel new genesis --using=devdojo/genesis
This command generates a fresh Laravel 12 application named genesis and applies the Genesis Starter Kit right away, so you get authentication scaffolding, routes, controllers, and UI components without any extra steps.
During the setup, choose the following options to match our stack.
- Choose Pest as the testing framework for a modern testing experience.
- Would you like to run npm install and npm run build?”, type yes.
At this point, you’ll have a clean Laravel project already configured with the Genesis Starter Kit, giving you authentication pages, controllers, and a modern UI out of the box. The project is set up with Pest as the testing framework for writing clean and expressive tests, MySQL as the database engine for reliable data management, and default migration. This combination provides a flexible foundation that’s easy to extend, whether you’re building a small prototype or a large-scale application.
Step # 2 : Navigate to Your Project.
After creating your Laravel project, the next step is to open a terminal (like Git Bash) and navigate to the project’s root directory. For example, if your project is stored in XAMPP’s htdocs folder, you would run.
cd c:xampp/htdocs/genesis
This step ensures that any further commands you run, such as installing front-end dependencies or starting the development server, are executed in the correct context. The project root contains all Laravel files, the Genesis Starter Kit assets, configuration files, and environment settings. Being in the right directory makes it easy to manage the project, explore its structure, and start customizing your application immediately.
Step # 3 : Start the Development Server and Test.
Now that your project is set up and you’re inside the project folder, it’s time to start the Laravel development server. This allows you to view your application in the browser and test the authentication features provided by the Genesis Starter Kit. Run the following command in your terminal.
php artisan serve
Once the server starts, you should see an output showing it’s running, typically on http://127.0.0.1:8000, which means your Laravel application is now live locally. You can open this URL in your browser and navigate to the pre-configured registration page at http://127.0.0.1:8000/auth/register, where you can create a new user account. Upon successful registration, you will be automatically redirected to the dashboard, giving you immediate access to the user interface and features provided by Genesis. This allows you to see the authentication flow in action, verify that the user data has been stored correctly, and confirm that the pre-built dashboard is functioning as expected.
After testing the registration flow, you can now try logging in with the user account you just created. Open your browser and go to the login page at http://127.0.0.1:8000/auth/login. Here, you will see a beautifully styled login form provided by the Genesis Starter Kit. Enter the credentials of the user you registered, and upon successful login, you will be automatically redirected to the dashboard, just like with the registration flow. This confirms that the authentication system is working correctly, and that user sessions, redirects, and dashboard access are all functioning as expected.
In addition to login and registration, Genesis provides other pre-built routes such as profile management, password reset, and account settings. You can explore these routes to test user profiles, update account information, or implement additional authentication features as needed. Genesis also comes with a built-in dark mode toggle, allowing users to switch between light and dark themes for a better visual experience. This makes Genesis a fully functional starting point for building applications with robust user management and modern UI features, without having to create everything from scratch. Beyond the default routes, you can easily extend the system with custom pages, additional user roles, or specialized dashboard components. The flexibility of Genesis ensures that as your application grows, you can maintain a consistent UI, integrate new functionality seamlessly, and provide a polished experience for your users.
Conclusion
By following this guide, you’ve successfully set up a fresh Laravel 12 project with the Genesis Starter Kit, giving you a ready-to-use foundation for building applications with authentication, user management, and a polished UI. Starting from project creation with the global Laravel installer, applying Genesis during setup, and configuring Pest for testing and MySQL as the database, you now have a modern development environment that minimizes boilerplate and setup time. You’ve verified the authentication flow by registering a new user and logging in, seeing automatic dashboard redirection, and explored additional features like profile management, password reset, and the built-in dark mode. With Genesis handling the core scaffolding, you can now focus on customizing and extending your application, building new features, and refining the user experience, while enjoying a streamlined, fully functional starting point that scales from small projects to more complex applications.
For more details, please refer to the Genesis documentation.
Share this with friends!
To engage in commentary, kindly proceed by logging in or registering
Subscribe to Our Newsletter
Stay ahead of the curve! Join our newsletter to see what everyone’s talking about.
Continue with Google
0 Comments