Modular

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 12 (Empowers the backend)
• Tailwind CSS 4 (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.

Site

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

Roadmap

You can find the Modular Roadmap at https://docs.ismodular.com/roadmap.html.

Contributing

Please read and understand the Contribution Guide before creating an issue or pull request.

License

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