README

Why Modular?

Starting a new web application usually means tackling a bunch of common yet crucial tasks, including:

Scalable Architecture: Structuring your application in a way that scales seamlessly with growth.
Robust Access Control: Crafting a granular ACL (Access Control List) to manage users and roles proficiently.
Intuitive Admin Panel: Either customizing a ready-made or developing a bespoke Admin Panel to streamline your application's construction.
Responsive Design: Ensuring your Admin Panel is mobile-friendly and responsive across devices.
Unified UI Toolkit: Adopting or developing a UI Toolkit to fast-track frontend development while maintaining a coherent design across pages.
Effortless Frontend-Backend Integration: Bridging your frontend and backend intuitively, ensuring a maintainable and straightforward connection.
Optimized Build Management: Harnessing the right toolset and stack to manage your frontend application's build steps efficiently.
Reusable Components: Abstracting common functionalities and components for reuse (embrace DRY - Don't Repeat Yourself), such as data search, pagination, flash messages, and more.
Thorough Testing Frameworks: Implementing testing frameworks to validate your application's functionality.
Comprehensive Activity Log: Keeping a detailed log to audit user operations.
Clear Architectural Vision: Maintaining a lucid mental model of the project's architectural decisions, promoting consistency and a solid understanding of how all elements interlink.

The intricacies of these tasks are far from trivial, often demanding a substantial amount of time and attention. As you delve deeper, you may encounter additional minor behaviors and tweaks that, while seemingly marginal, are crucial and time-consuming.

Furthermore, more complex scenarios such as multi-faceted dashboards tailored to user profiles or intricate business rules may arise, adding layers of complexity to your project.

Modular aims to alleviate these hurdles by providing a well-structured, comprehensive solution, allowing you to focus on what truly matters - bringing your unique application to life.

Why VILT Stack (Vue, Inertia, Laravel, Tailwind)?

The VILT Stack is a powerful combination of frameworks and tools that provide a robust foundation for building web applications. These technologies work very well together to deliver a seamless developer experience, enabling you to concentrate on your application's core functionalities. Moreover, after developing projects of varying sizes and complexities with different stacks, I discovered that the VILT Stack is incredibly flexible. It accommodates simple CRUD applications just as well as it does more complex UIs, with enhanced interactivity and client-side heavy business logic (interactive calendars, dynamic form fields, complex graphics, etc.). Consequently, it scales adeptly in both scenarios, proving to be a reliable choice for both small, straightforward apps and large, complex ones.

About Modular

Modular stands on the shoulders of giants, integrating powerful frameworks and tools to offer a streamlined development experience. Here’s what lies under the hood:

Vue 3 (Drives custom frontend components)
Inertia.js (Bridges the gap between frontend and backend)
Laravel 11 (Empowers the backend)
Tailwind CSS 3 (Styles with ease)
Vite (Accelerates frontend tooling)

When you bring Modular into your Laravel application, here’s a taste of what you'll unlock:

A Themed Admin Panel seamlessly integrated with Tailwind CSS, ready to assist you in crafting your application.
A finely-tuned ACL (Access Control List) System to effortlessly manage users and roles.
A suite of auto-loaded Custom Vue 3 Components, penned in JavaScript, and tailored with Tailwind CSS; ready for use.
Vite for a lightning-fast frontend development journey.
Inertia.js to ensure a smooth frontend and backend connection, simplifying routing and component data hydration, among other benefits.
A custom-built CLI to swiftly generate new modules; propelling your development speed.
A comprehensive translation system ready to help your application speak the world's languages (if needed).
Build steps for your frontend application are set, pre-configured, and ready to roll from the get-go, with the right tooling and stack to keep the momentum high.
A developer experience designed to leave a grin on your face at the end of each coding day ;)

Custom Vue 3 Components

In previous iterations of Modular, I leveraged robust UI Toolkits like Vuetify and Prime Vue. While these are excellent options, a desire for more control over the components led to a change, guided by the following criteria:

Adoption of Vue 3 as the primary JavaScript framework.
Employment of Tailwind CSS for styling purposes.
Seamless integration of Custom Vue 3 Components with the Tailwind Theme System.
Easy customization of components by merely editing them. To facilitate this, components reside not in node_modules, but in "./resources/js/Components". Need some tweaking? Open the component, modify the Tailwind CSS classes, and save it. Done.
No use of Sass, Less, Stylus, etc. Tailwind CSS exclusively.
No TypeScript. Pure JavaScript only.
Light and exceedingly straightforward Common Components. If necessary, extend or create new components per project to imbue additional functionality.

At present, Modular furnishes the following Custom Vue 3 Components:

./resources/js/Components
.
├── Auth
│   ├── AppAuthLogo.vue
│   └── AppAuthShell.vue
├── DataTable
│   ├── AppDataSearch.vue
│   ├── AppDataTable.vue
│   ├── AppDataTableData.vue
│   ├── AppDataTableHead.vue
│   ├── AppDataTableRow.vue
│   └── AppPaginator.vue
├── Form
│   ├── AppCheckbox.vue
│   ├── AppCombobox.vue
│   ├── AppFormErrors.vue
│   ├── AppInputDate.vue
│   ├── AppInputFile.vue
│   ├── AppInputPassword.vue
│   ├── AppInputText.vue
│   ├── AppLabel.vue
│   ├── AppRadioButton.vue
│   ├── AppTextArea.vue
│   ├── AppTipTapEditor.vue
│   └── TipTap
│       ├── TipTapButton.vue
│       ├── TipTapDivider.vue
│       └── extension-file-upload.js
├── Menu
│   ├── AppBreadCrumb.vue
│   ├── AppBreadCrumbItem.vue
│   ├── AppMenu.vue
│   ├── AppMenuItem.vue
│   └── AppMenuSection.vue
├── Message
│   ├── AppAlert.vue
│   ├── AppFlashMessage.vue
│   ├── AppToast.vue
│   └── AppTooltip.vue
├── Misc
│   ├── AppButton.vue
│   ├── AppCard.vue
│   ├── AppImageNotAvailable.vue
│   ├── AppLink.vue
│   ├── AppSectionHeader.vue
│   └── AppTopBar.vue
└── Overlay
    ├── AppConfirmDialog.vue
    ├── AppModal.vue
    └── AppSideBar.vue

Each of these components is crafted to integrate seamlessly with Modular, ensuring the most straightforward developer experience possible.

Documentation

You can find the Modular documentation at https://docs.ismodular.com.

Demo App

You can find the Modular Demo App at https://demo.ismodular.com.

And the repository for the demo app at https://github.com/daniel-cintra/modular-demo.

License

The Modular Project is open-source software licensed under the MIT license.

daniel-cintra / modular

Maintainers

Details