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 10 (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
├── AppAlert.vue
├── AppAuthLogo.vue
├── AppAuthShell.vue
├── AppBreadCrumb.vue
├── AppBreadCrumbItem.vue
├── AppButton.vue
├── AppCard.vue
├── AppCheckbox.vue
├── AppConfirmDialog.vue
├── AppDataSearch.vue
├── AppDataTable.vue
├── AppDataTableData.vue
├── AppDataTableHead.vue
├── AppDataTableRow.vue
├── AppFlashMessage.vue
├── AppFormErrors.vue
├── AppInputPassword.vue
├── AppInputText.vue
├── AppLabel.vue
├── AppLink.vue
├── AppMenu.vue
├── AppMenuItem.vue
├── AppMenuSection.vue
├── AppModal.vue
├── AppPaginator.vue
├── AppSectionHeader.vue
├── AppSideBar.vue
├── AppTipTap.vue
├── AppToast.vue
├── AppTooltip.vue
├── AppTopBar.vue
└── TipTap (Custom WYSIWYG Rich Text Editor)
    ├── TipTapButton.vue
    └── TipTapDivider.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.

License

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