diagramers-admin

Diagramers Admin CLI

A powerful CLI tool for generating React admin applications with Redux, authentication, and a complete design system.

Features

• 🚀 Quick Setup: Generate a complete React admin application in seconds
• 🎨 Design System: Built-in comprehensive UI component library
• 🔐 Authentication: Complete auth flows (login, register, forgot password, OTP)
• 📊 Dashboard: Ready-to-use dashboard with charts and analytics
• 👥 User Management: Full CRUD operations for user management
• 🔄 Redux Integration: Pre-configured Redux store with RTK
• 🔌 API Integration: Connected to diagramers-api by default
• 📱 Responsive: Mobile-first responsive design
• 🎯 TypeScript Ready: Full TypeScript support

Installation

npm install -g diagramers-admin

Usage

Initialize a new project

diagramers-admin init my-admin-app --port 3000

This will create a new React admin application with:

• Complete admin template with design system
• Redux store configuration
• Authentication setup
• API integration with diagramers-api
• Environment configuration

Extend existing project

cd my-admin-app
diagramers-admin extend auth
diagramers-admin extend users
diagramers-admin extend dashboard

Available features:

• auth: Authentication flows and Redux slice
• users: User management CRUD operations
• dashboard: Dashboard with analytics

Project Structure

my-admin-app/
├── src/
│   ├── components/          # Reusable UI components
│   ├── views/              # Page components
│   │   ├── interface/      # Design system components
│   │   ├── blocks/         # Content blocks
│   │   └── pages/          # Page layouts
│   ├── store/              # Redux store and slices
│   ├── auth/               # Authentication components
│   ├── hooks/              # Custom React hooks
│   ├── layout/             # Layout components
│   ├── routing/            # Route configuration
│   └── sass/               # Styles and themes
├── public/                 # Static assets
├── .env                    # Environment variables
└── package.json           # Dependencies and scripts

Environment Configuration

The CLI automatically creates a .env file with:

PORT=3000
REACT_APP_API_URL=http://localhost:3001
REACT_APP_SOCKET_URL=http://localhost:3001
REACT_APP_ENV=development

Design System

The generated application includes a comprehensive design system with:

Components

• Forms: Input groups, selects, checkboxes, radio buttons
• Layout: Cards, containers, grids, spacing
• Navigation: Sidebar, top navigation, breadcrumbs
• Data Display: Tables, lists, badges, avatars
• Feedback: Alerts, modals, tooltips, notifications
• Charts: Line charts, bar charts, pie charts, gauges

Themes

• Light and dark themes
• Multiple color schemes (blue, green, pink, etc.)
• Customizable CSS variables

Authentication

The authentication system includes:

• Login: Email/password authentication
• Register: User registration with validation
• Forgot Password: Password reset flow
• OTP Verification: Two-factor authentication
• Token Management: Automatic token storage and refresh
• Protected Routes: Route protection based on auth status

API Integration

The application is pre-configured to work with diagramers-api:

• Base URL: Configurable via environment variables
• Authentication: JWT token-based auth
• Error Handling: Centralized error handling
• Request/Response Interceptors: Automatic token injection
• Socket.IO: Real-time updates support

Redux Store

Pre-configured Redux store with:

• Auth Slice: User authentication state
• Users Slice: User management operations
• Dashboard Slice: Dashboard data and analytics
• Persistent Storage: State persistence across sessions

Getting Started

• Install the CLI:

  npm install -g diagramers-admin
  

• Create a new project:

  diagramers-admin init my-admin-app
  

• Navigate to the project:

  cd my-admin-app
  

• Start development server:

  npm start
  

• Open in browser:

  http://localhost:3000
  

Customization

Adding Custom Components

• Create your component in src/components/
• Import and use in your views
• Follow the existing component patterns

Modifying Themes

• Edit src/sass/themes/_variables.scss
• Update color schemes in theme files
• Rebuild CSS with npm run build-css

Extending Redux Store

• Create new slices in src/store/
• Add to store configuration
• Use in components with useSelector and useDispatch

Development

Building the CLI

npm run build

Running in Development

npm run dev

Testing

npm test

Contributing

• Fork the repository
• Create a feature branch
• Make your changes
• Add tests if applicable
• Submit a pull request

License

MIT License - see LICENSE file for details

Support

For support and questions:

• Create an issue on GitHub
• Check the documentation
• Review the example projects

Changelog

v1.0.0

• Initial release
• React admin template with design system
• Redux integration
• Authentication flows
• User management
• Dashboard components
• API integration
• CLI tool for project generation