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

1. Install the CLI:

   npm install -g diagramers-admin

2. Create a new project:

   diagramers-admin init my-admin-app

3. Navigate to the project:

   cd my-admin-app

4. Start development server:

   npm start

5. Open in browser:

   http://localhost:3000

Customization

Adding Custom Components

1. Create your component in src/components/
2. Import and use in your views
3. Follow the existing component patterns

Modifying Themes

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

Extending Redux Store

1. Create new slices in src/store/
2. Add to store configuration
3. Use in components with useSelector and useDispatch

Development

Building the CLI

npm run build

Running in Development

npm run dev

Testing

npm test

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. 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