DEV Community

Cover image for Crazy Laravel Stack (Fantastically Powerful)
Clean Code Studio
Clean Code Studio

Posted on • Updated on

Crazy Laravel Stack (Fantastically Powerful)

#laravel #javascript #npm #tooling
cleancodestudio image

Clean Code Studio

Clean Code Clean Life ~ Simplify

Twitter Follow

Did you know I have a newsletter? 📬

If you want to get notified when I publish new blog posts or make major project announcements, head over to https://cleancodestudio.paperform.co/

Crazy Laravel Stack (Fantastically Powerful)

Driven by a deeply personal vendetta against college debt - I've created, shared, spoken, written, recorded, published, posted, developed, built, and invested - invested time, energy, and resources into sharing knowledge.

Nearing 500,000 global viewers, over 3000 subscribers, and with 125+ published Clean Code Studio screencasts -- I have invested the time and energy into Clean Code Studio and feel the time has finally come to do something...something that may quite possibly be - bat s*** crazy.

What's crazy you ask? Great question!

So, let me break this down first. Here's a list of several of the contributions I've made via Clean Code Studio to improve the coding and educational resources available out there and further demolish this crazy notion that going to college (to quite literally deep dive into debt more times than not) is a flat out terrible idea. After the contributions to date, we'll dive into the crazy.

Okay - so check it - here's a list of the coding and educational contributions made directly through me as Clean Code Studio, for Clean Code Studio, or because of Clean Code Studio.

  • Spoke with 2nd Year UMKC Computer Science Majors (As a 23 Year old who had dropped out of college myself, I was impressed with the offer to come share the knowledge with computer science students at the University. The professor let me in on how he knew the degree wasn't that important for computer science any more and thought I'd have a solid take on personal branding beyond the degree since I had a solid gig without the piece of paper.

There's reddit threads, Github repos, udemy courses, leetcode submissions/feedback, etc...

Buutttt - Here's the crazy part (And a sliiiggghtttly embarrassing admission)!!.

Clean Code Studio - the website - source of the Clean Code Clean Life ~ Simplify brand - the center piece of our online presence....

Yah, so it kinda uses Google sites right now - like the default google website builder, the one that is literally worse than any other website builder out there.

Clean Code Studio, content wise, has some great content - but the website as it is in its current state is lacking.

Thus, once we hit 3000 subscribers - I decided to adjust.

I started building out the actual Clean Code Studio Website Application earlier this week (2 days ago to be precise).

I'm a Laravel fan boy - thus I started building the application out using Laravel.

_THAT's WHEN THINGS WENT SIDEWAYS (S* BLEW UP INTO ALL TYPES OF CRAZY - CRAZY GOOD)!!_**

  • 1. I started with Laravel
  • 2. Then I noticed Laravel Spark was re-created AND re-branded
  • 3. Laravel Spark (link way below) was now Laravel Spark Classic
  • 4. Laravel Spark (link way below) is now Laravel Spark Next
  • 5. Laravel Spark Next Doesn't Care Which Front-end Preset You Use (Laravel Spark Classic was biased towards vue.js)
  • 6. Laravel Spark Next needs a front-end preset - it just doesn't care about which one it is. I pulled in Laravel Jet Stream.
  • 7. Using Laravel Jet Stream, I set up the auth, created the teams, set up team & user actions/emails/notifications, added the ability for users/teams to add profile picture updates, and configured the password to be re-settable, and for two factor authentication to be optional, etc...
  • 8. Laravel Jet Stream Configures All Of This, There was very little customization on my part (if any).
  • 9 Laravel Jet Stream Can Also Use Inertia.js (AKA Vue.js SPA front-end instead of using Live Wire with Laravel Jet Stream)
  • 10. Laravel Spark Next takes care of billing. I chose the new laravel-spark-paddle (Credit card or paypal payment optioni - super easy set up)
  • 11. At this point, I remembered how fun Laravel Nova was to use as a user (I had used Laravel nova on a few past projects - it's amazing).
  • 12. Laravel Nova is technically supposed to be used as an admin panel.
  • 13. With Laravel JetStream we have the authentication and the profile/team scaffolds. With Laravel Spark we have the Billing Scaffolds and Integration. And now - after bringing in Laravel Nova - we have an admin panel allowing us to easily connect, create, relate, destroy, search, sort, and access all of the model data from both Laravel JetStream and Laravel Spark directly from an admin panel via Laravel Nova.
  • 14. Then, there's Laravel Sanctum - Laravel JetStream let's you use Laravel Sanctum. Laravel Sanctum lets you create a publicly facing API that provides tokens with abilities for users to interact with your API.
  • 15. Laravel Sanctum allows you to create a public, user accessible, API that creates tokens that authorize api access for
    • API Token Authentication
    • SPA Authentication
    • Mobile Application Authentication
  • 16. And allows testing of APIs using the Sanctum::actingAs method that allows you to authenticate a user and specify which abilities should be granted to their token.

All together, we have

  • Laravel
    • Laravel - Framework for web artisans
  • Laravel Mix
    • Laravel Mix - Webpack Asset Compilation/Webpack Wrapper
  • Laravel Sail
    • Laravel Sail - Local Docker Environment for Laravel
  • Laravel Spark
    • Laravel Spark - SaaS App Scaffolding
    • Laravel Spark - Integrates Billing Features Into Laravel Application
    • Laravel Cashier Paddle
      • Laravel Cashier Paddle provides an expressive, fluent interface to Paddle's subscription billing services.
  • Laravel Nova
    • Laravel Nova - Admin Panel for Laravel (Eloquent Models)
    • Laravel Scout
      • Laravel Scout - Optional driver for adding full-text search to your eloquent models
  • Laravel Jet Stream
    • Jetstream - Provides the implementation for your application's login, registration, email verification, two-factor authentication, session management, API via Laravel Sanctum, and optional team management features.
    • Laravel Fortify
    • Laravel Fortify is a frontend agnostic authentication backend implementation for Laravel
  • Laravel Sanctum
    • Laravel Sanctum provides a featherweight authentication system for SPAs (single page applications), mobile applications, and simple, token based APIs. Sanctum allows each user of your application to generate multiple API tokens for their account. These tokens may be granted abilities / scopes which specify which actions the tokens are allowed to perform.
  • Laravel Forge
    • Laravel Forge - Server management and site deployment service (Deploying app to stage - then to prod)

This Laravel stack listed above is what I'm currently working with to create https://cleancode.studio - so far, I'm extremely impressed. With Laravel Spark Next being released and non being biased towards any front-end - This tech stack of more than half of Laravel's core eco system integrates all but seamlessly.

Below is the actual README.md I pulled from my Clean Code Studio private repo. Feel free to check it out!

I also highly recommend doctoc from NPM if you're starting to build out a long read me. It automatically creates a table of contents for any markdown file based on headers and sub-header relationships :)

1. Install Doctoc

npm i doctoc --save-dev
Enter fullscreen mode Exit fullscreen mode

2. Open package.json and add "index-readme": "doctoc README.md" to yourscripts` object
`js
// package.json

"private": true,
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production",
"index-readme": "doctoc README.md"
},
`

3. Whenever you want to generate a table of content in your README.md - simply run npm run index-readme

My Actual Clean Code Studio README.md (Pulled from my personal project this morning)

Table of Contents

Clean Code Studio

Setup Local Dev Environment

GitHub

sh
git clone https://github.com/zhorton34/cleancodestudio && cd cleancodestudio

Composer

php
composer install

.env (Environment Variables)

sh
mv .env.local .env

Database

.env (SQLite local) Settings for Database

`sh
DB_CONNECTION=sqlite

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=database

DB_USERNAME=root
DB_PASSWORD=
`

Migrate database tables and seed dummy data

php
php artisan migrate:fresh --seed

Compile Front-end Assets

js
npm install && npm watch

Boot Development Server

php
php artisan serve

Tech Stack

PHP 8.0+

Laravel 8.0

Vue JS 3.05

Admin panel

(Uses Laravel Nova v3.27.0)

Billing

(Uses Laravel Spark Next)
(Uses Paddle Payment Gateway Via Spark Next)

Authentication

(Uses Laravel Jetstream)

CSS

(Uses Tailwind CSS)
(Using Tailwind within Laravel Jetstream)

JS

(Uses Vue.js Front-end)
(Uses Inertia.js for development)

Webpack (JS/CSS/ASSET Bundler)

(Uses Laravel Mix Wrapper To Simplify Webpack)

App APIs

Public User Accessable APIs

--

(Public API's Authenticate User Tokens Via Laravel Sanctum)

API Token Authentication
API Tokens - Issuing
API Tokens - Abilities
API Tokens - Protecting Routes
API Tokens - Revoking Tokens
SPA Token Authentication
SPA Auth - Configuration
SPA Auth - Authenticating
SPA Auth - Authenticating - CSRF Protection
SPA Auth - Authenticating - Logging In
SPA Auth - Protecting Routes
SPA Auth - Authorizing Private Broadcast Channels
Private Broadcast Channel Authentication
Testing User Accessible APIs (Laravel Sanctum Testing)

Internal Clean Code Studio APIs

Brand

Clean Code Studio Branding

Canva (Create Visual Designs)

Icons (Stored/saved via canva account)

Apply Brand To...

Adding Brand To Admin Panel

Adding Brand To Billing Sections

Adding Brand To Notification Email Template

Clean Code Studio Online Presence

Website: https://cleancode.studio

Youtube: https://youtube.com/c/cleancodestudio

LeetCode: https://leetcode.com/zhorton34/

Github: https://github.com/zhorton34

DevTo: https://dev.to/cleancode.studio

Twitter: https://twitter.com/cleancodestudio

Reddit: https://reddit.com/user/cleancodestudio

TikTok: https://www.tiktok.com/@cleancodestudio

Instagram: https://www.instagram.com/cleancodestudio

Facebook: https://www.facebook.com/CleanCodeStudio

Packagist: https://packagist.org/packages/clean-code-studio

LinkedIn: https://www.linkedin.com/company/cleancodestudio

Npm (Node Package Manager): https://npmjs.com/~zhorton999

Stack Overflow: https://stackoverflow.com/users/8541350/clean-code-studio

Deployment

Laravel Forge (Server management & site deployment)

Staging Site

Stage Database

  • User: stage
  • Database: stage

Production Site

Production Database

  • User: forge
  • Database: forge

Clean Code Studio ~ Content Resources

Testing

--

Billing Tests (Laravel Spark)

Public Facing API Tests (Laravel Sanctum)

Posts/Videos/Screencasts & Notes (Clean Code Studio Content)

FAANG Notes (Google Drive)

RESUME Notes (Google Drive)

DEV To (Written Blog Posts)

YouTube Videos (Screencasts)

YouTube Playlists (Screencasts)

Youtube Community (Comments & Posts)

YouTube About (With Links To Socials)

APIs to Retrieve Created Content (API Retrievable Clean Code Studio Content)

Dev To (Get Blogs API)

Youtube (Get Screencasts API)

Google Drive API

Terminal/Console/Command Line Commands

php artisan Console Commands

php artisan serve (boot local server)

php artisan route:list (see all routes)

php artisan migrate:fresh --seed (migrate tables to database and run seeders to populate database with dummy data)

npm run Console Commands

npm run dev (compile assets once for local dev)

npm run watch (compile assets and watch for changes to re-compile)

npm run production (build application for production deployment)

npm run index-readme (Adds table of contents to read me)

cleancodestudio image

Clean Code Studio

Clean Code Clean Life ~ Simplify

Did you know I have a newsletter? 📬

If you want to get notified when I publish new blog posts or make major project announcements, head over to

Top comments (3)

Collapse
 
johnt_f807e8f581 profile image
JohnT •

Cool stuff, that’s an awesome setup. Have you thought about pulling Laravel Octane in as well?

Collapse
 
cleancodestudio profile image
Clean Code Studio •

Haven't covered Laravel Octane yet. I'll have to dive into the docs and see where it might be beneficial to hook Octane in. Thanks for the tip/idea!

Collapse
 
cleancodestudio profile image
Clean Code Studio •

Read next

programminginblood profile image

Why Set.has() is Faster Than Array.includes() for Finding Items

Programming In Blood -

aamfahim profile image

Refactoring code and Git history!

Abdullah Al Mamun Fahim -

ridoy_hasan profile image

How to Set Up Your JavaScript Development Environment

Ridoy Hasan -

sonaykara profile image

React : Keeping Components Pure

Sonay Kara -