genesis: A Blade repository from ibourgeois

About Genesis

Genesis is a Laravel Starter Kit that utilizes the TALL Stack as well as single-file Volt and Folio files. This starter kit contains Authentication, User Dashboard, Edit Profile, and a set of UI Components.

It will be beneficial to have a good understanding of the following technologies (which Genesis is built upon):

Learn how to install and configure Geneses below.

Installation

This preset is intended to be installed into a fresh Laravel application.

Currently Folio, Volt, and Livewire are still in Beta, so for that reason you'll need to set your minimum-stability to dev, by finding the following line inside of your composer.json file "minimum-stability": "stable", and replace with "minimum-stability": "dev",

After creating a new Laravel application (and updating the minimum-stability) you can install Genesis with the following commands:

composer require devdojo/genesis dev-main
php artisan ui genesis
npm install
npm run dev

Finally, you'll want to connect a database inside of your application .env file and run the following migrations:

php artisan migrate

Visit your application homepage and you should be good to go 🤘

Routes in your application

Currently Genesis creates 10 routes including the homepage, authentication, dashboard view, and a few others. You can see all the routes currently in your application by using the php artisan folio:list command:

  GET       / ................................................ index.blade.php
  GET       /auth/login ................................. auth/login.blade.php
  GET       /auth/password/confirm ........... auth/password/confirm.blade.php
  GET       /auth/password/reset ............... auth/password/reset.blade.php
  GET       /auth/password/{token} ........... auth/password/[token].blade.php
  GET       /auth/register ........................... auth/register.blade.php
  GET       /auth/verify ............................... auth/verify.blade.php
  GET       /dashboard ............................. dashboard/index.blade.php
  GET       /learn ..................................... learn/index.blade.php
  GET       /profile/edit ............................. profile/edit.blade.php

                                                           Showing [10] routes

Let's cover each of the pages provided by Genesis.

Home Page

The homepage (screenshot shown above 👆) is located at resources/views/pages/index.blade.php. This file as well as all the other pages are utilizing Page-based routing thanks to Folio.

This file contains a middleware redirect-to-dashboard which is registered at the top of the file:

middleware(['redirect-to-dashboard']);

This will redirect an authenticated user to the dashboard when they try and visit the homepage. You can simply remove this line if you do not wich to redirect the authenticated user.

Authentication Pages

All the authentication files are located inside of the resources/views/pages/auth folder. These files are mapped to routes thanks to Folio. Here are the current authentication routes:

Dashboard Page

The dashboard page is very minimal which makes it very easy for you to customize. You'll notice that this page has the following middleware:

middleware(['auth', 'verified']);

You will probably want to add this middleware to many of your application pages where you want to make sure that the user is authenticated and verified.

Edit Profile Page

The edit profile page is located at resources/views/profile/edit, and it can also be loaded by visiting url.com/profile/edit. This file contains the same middleware as the dashboard page, which means that users must be authenticated and verified before visiting.

This page has three different sections

Update profile section where users can update the name and email in their profile.
Update password section where users can update their password.
Delete profile section where users can delete their profile.

To learn more about this file, visit the documentation in the Wiki here.

Learn Page

This page displays the Genesis Readme file. It simply fetches the README.md file that you are reading right now and displays it in the dashboard.

Layouts

Currently there are two layouts which are located inside of resources/views/components/layouts:

app.blade.php - This is the main layout for your application
dashboard.blade.php - This is the dashboard layout which also extends the app layout.

You can use these layouts as follows:

<!-- App Layout -->
<x-layouts.app>
    <!-- content here... -->
</x-layouts.app>

<!-- Dashboard Layout -->
<x-layouts.dashboard>
    <!-- content here... -->
</x-layouts.dashboard>

UI Components

We are also providing a handful of Blade Components that you can use in your new application which are located inside of resources/views/components/ui. These components include:

button.blade.php
checkbox.blade.php
input.blade.php
link.blade.php
logo.blade.php
modal.blade.php
nav.blade.php
placeholder.blade.php
text-link.blade.php

These elements are pretty self-explanatory; however, you may want to look into how each one works so that way you can get the most out of it.

Updating the logo throughout your application is as easy as updating the logo.blade.php component with your logo SVG or image.

Testing

Genesis has some basic tests to test out the authentication functionality. You can check those tests by running the following command:

./vendor/bin/pest

Every test inside the tests/Feature folder has a test file that corresponds to each page in the resources/views/pages folder.

Troubleshooting

There may be times where you'll see Line numbers printed out in the view causing a weird layout and output. You'll want to run php artisan view:clear. This is probably due to the fact that Folio and Volt are still in Beta 😉

Credits

License

The MIT License (MIT). Please see License File for more information.

ibourgeois/genesis