Create Lib Components MUI

A modern, production-ready React + TypeScript + Vite template using Material UI. This template provides a robust architecture for enterprise web applications with a clear separation of concerns using the Service-Hook Pattern.

🚀 Installation

You can generate a new project instantly using npx:

npx create-lib-components-mui my-awesome-app
cd my-awesome-app
npm install
npm run dev

🏗️ Architecture & Coding Pattern (Service-Hook Pattern)

This project strictly follows the Service-Hook Pattern to separate UI, Business Logic, and API Calls.

Directory Structure

• src/views/ (Page Level / UI State)

  • Responsible for rendering the UI and assembling components.
  • Rule: Contains NO complex business logic or data fetching. It only consumes Data and Functions provided by Custom Hooks.

• src/hooks/ (Business Logic & Data State)

  • The heart of the application logic (e.g., useUserManagement.ts, useLoginForm.ts).
  • Rule: Manages local state (useState), form data, validations, and loading states. It catches errors from the Service layer and triggers global UI alerts (via useAlert).

• src/services/ (API Layer)

  • Strictly for making API requests using Axios.
  • Rule: Do NOT put try...catch or UI logic here. Just return the Promise (e.g., return api.post('/login', payload)). Let the Hook handle the data mapping and errors.

• src/components/ (Reusable UI Components)

  • Pure or "Dumb" components. They receive props and emit events.
  • Rule: Avoid tying them to specific business logic so they can be reused anywhere.

• src/contexts/ (Global UI Providers)

  • Global state contexts such as AlertContext for showing Snackbars across the app.

🛠️ Built With

• React 19
• Vite (Ultra-fast bundler)
• TypeScript (Strict mode, verbatimModuleSyntax)
• Material UI (MUI) (Pre-configured with a modern, clean Corporate Theme)
• Axios (Configured API client)
• React Router v7

💡 Example Flow (Login Page)

1. Service (authService.ts):

   export const AuthService = {
     login: (payload: LoginPayload) => api.post('/login', payload),
   };

2. Hook (useLoginForm.ts): Manages formData, handles the submit event, calls AuthService.login(), and triggers showAlert() if an error occurs.
3. View (LoginPageView.tsx): Calls const { formData, handleChange, handleSubmit, isLoading } = useLoginForm(); and renders the TextField and Button.

Happy Coding! 🚀