This is not your typical tutorial - Web Portal with Vue, Nuxt, Vuetify, Laravel, and Docker

Hey everyone!

TLDR; If you're looking for the table of contents, it's down below!

Today we're kicking off a starter kit that you will be able to use for internal tools, authenticated client areas, client accounts, CRM, and those sorts of things. Hopefully, we'll build it all together, live on Youtube Channel!

So what's so special about another starter kit?? Well, apart from other strong points, is that it will use "renderless" UI components.

And what does that even mean? You might ask!

I'm so glad you asked it! 😀 There's no established definition for now, and different naming may occur for the same concept. Essentially, is that the "renderless" library will have the code for behaviour, and but the one for the looks, is just a starting point, you might change that as per your need! Complex UI components that interact with a server, can be easily customized, no only by changing CSS, but the whole HTML+CSS+JS.

We'll get into that later, the post is not about this topic, but I sure do hope you like the idea!

The application and its recipe

It's a full-stack web application, meaning you'll get a browser and server-side app, database, cache, and queue. And it's not the typical starter kit. I will take this from the ground up, right from the scratch, have a development environment, then a production environment, and of course, we have to monitor and track bugs in both front and backend!

It's the only the way I see for a "From Zero to Hero" 🚀

We will count on the help of tools such as Vue, Vuetify, Nuxt and more on the frontend!

On the backend, we'll rely on Laravel, which itself is an ecosystem of application components, more than a framework. We will develop and deploy the whole thing to production using Docker.

I won't go into many details about all the tooling, for now, I'm pretty sure if you're reading, you might know all of them, and I trust the gazillions of resources about them. A unique side is the combination of all tools, taking you on a journey from zero to production and maintenance!

If you lack the time or motivation to learn how to combine all of these techs, then this is the place. You can use as-is, or also customize something as you see fit.

The scope

As previously explained, this is more of a starter kit, with a library of components to use, so that you can build what you need and not a final application that you could tweak or distort! Even so, we have to have something built, to grasp concepts, and this will be an Organization's Internal Portal, like an Intranet, which may have various areas. This will allow for great flexibility in use cases, for the widgets or “pieces of application” (components).

• Internal Tool, a restricted area with user credentials
  • Newsfeed
  • Schedules
  • Vacations
    • Vacation requirement
  • Rooms
• Tasks, team organization
• Contact Lists
• Shared Files

This is just indicative, things may vary. The goal is to have a rich and fully customizable set of components.

During the live, some inspiration came and the name Epicenter came up! So here is the Source code link on Github, which is open source and MIT license.

Let’s dive into creating the project! Video timestamps

• Brainstorming and Examples of Portals Internal Tools
• Let's get help from a UI framework - Meet Vuetify
• Not only Vue, but also Nuxt - high level framework
• Laravel and API with Laravel Sanctum
• Inspiration for naming the project
• Install Laravel and configure Docker and its integration with Project
• Install Laravel Breeze API
• Next steps for the next stream

Happy coding!

As always happy coding, friends!!

See you soon, much love ❤️