​
Common Development Scenarios

This guide demonstrates the most common development workflows using NikCLI, from simple tasks to complex project implementations.

Component Development

Creating React components and UI elements

API Development

Building REST APIs and backend services

Bug Fixing

Debugging and resolving code issues

Refactoring

Code optimization and structure improvements

​
Frontend Development Workflows

​
Creating React Components

1

Simple Component Creation

Start with a basic component request:
> Create a Button component with variants for primary, secondary, and danger
NikCLI Response:
🔍 Analyzing project structure...
📁 Found React TypeScript project with Tailwind CSS
🎯 Creating Button component with variants...
✏️  Writing Button.tsx...
📝 Adding TypeScript interfaces...
🎨 Implementing Tailwind styles...
✅ Button component created successfully
Generated Files:
  • src/components/Button.tsx
  • src/components/Button.stories.tsx (if Storybook detected)
  • src/components/__tests__/Button.test.tsx (if testing setup found)
2

Complex Component with State

Request a more complex component:
> Create a SearchableSelect component with async data loading, 
  filtering, and keyboard navigation
Features Implemented:
  • Async data fetching with loading states
  • Real-time search filtering
  • Keyboard navigation (arrow keys, enter, escape)
  • Accessibility attributes
  • TypeScript interfaces
  • Custom hooks for state management
3

Form Components

Create form components with validation:
> Create a user registration form with email, password, 
  and confirm password fields. Include validation and error handling
NikCLI Implementation:
  • Form validation with yup or zod (based on project)
  • Error handling and display
  • Form submission logic
  • Loading states and feedback
  • Accessibility compliance

​
State Management Integration

> Add user authentication state management using Redux Toolkit
Generated Files:
src/store/
├── slices/
│   └── authSlice.ts
├── api/
│   └── authApi.ts
└── store.ts
Features:
  • RTK Query for API calls
  • Authentication slice with actions
  • Typed hooks and selectors
  • Middleware configuration

​
Styling and Layout

​
Backend Development Workflows

​
API Development

1

REST API Creation

Create a complete REST API:
> Create a REST API for a blog system with posts, comments, 
  and user authentication using Express.js and MongoDB
Generated Structure:
src/
├── routes/
│   ├── auth.ts
│   ├── posts.ts
│   └── comments.ts
├── models/
│   ├── User.ts
│   ├── Post.ts
│   └── Comment.ts
├── middleware/
│   ├── auth.ts
│   └── validation.ts
└── controllers/
    ├── authController.ts
    ├── postController.ts
    └── commentController.ts
2

Database Integration

Add database operations:
> Add pagination, sorting, and filtering to the posts API
Enhanced Features:
  • Query parameter parsing
  • Database query optimization
  • Response formatting
  • Error handling
  • Input validation
3

Testing Implementation

Add comprehensive testing:
> Add unit and integration tests for the blog API
Test Coverage:
  • Route testing with supertest
  • Database mocking
  • Authentication testing
  • Error scenario testing
  • Performance testing

​
Database Operations

> Create user profile management with MongoDB, 
  including avatar upload and profile settings
Implementation:
  • Mongoose schemas with validation
  • File upload handling with multer
  • Image processing with sharp
  • Cloud storage integration
  • Indexed queries for performance

​
Authentication and Security

​
Full-Stack Integration Workflows

​
End-to-End Feature Development

1

Feature Planning

Start with a comprehensive feature request:
> Implement a real-time chat system with private messages, 
  group chats, and file sharing
NikCLI Planning:
📋 Analyzing chat system requirements...

Frontend Components:
├── ChatList - List of conversations
├── ChatWindow - Message display and input
├── FileUpload - File sharing component
└── UserList - Online users display

Backend Services:
├── WebSocket server setup
├── Message API endpoints
├── File upload handling
└── Real-time event management

Database Schema:
├── Users and authentication
├── Conversations and participants
├── Messages with metadata
└── File attachments
2

Coordinated Implementation

NikCLI implements frontend and backend in coordination:Frontend Implementation:
  • WebSocket client setup
  • Real-time message updates
  • File upload with progress
  • Responsive chat interface
  • Typing indicators
Backend Implementation:
  • Socket.io server configuration
  • Message broadcasting logic
  • File storage and retrieval
  • User presence tracking
  • Rate limiting and validation
3

Testing and Integration

Comprehensive testing across the stack:
> Add end-to-end tests for the chat system
Test Coverage:
  • WebSocket connection testing
  • Message delivery verification
  • File upload functionality
  • Multiple user scenarios
  • Error handling validation

​
DevOps and Deployment

> Create Docker configuration for development and production
Generated Files:
docker/
├── Dockerfile
├── docker-compose.yml
├── docker-compose.dev.yml
└── .dockerignore
Features:
  • Multi-stage builds
  • Development hot-reload
  • Environment-specific configs
  • Health checks
  • Volume management

​
Bug Fixing Workflows

​
Debugging Process

1

Issue Analysis

Describe the problem:
> The user login is failing intermittently with a 500 error. 
  The logs show database connection timeouts
NikCLI Analysis:
🔍 Analyzing authentication flow...
📁 Found login route in src/routes/auth.ts
🗄️  Checking database connection in src/config/database.ts
📊 Examining error logs and patterns...

Issues identified:
├── Database connection pool exhaustion
├── Missing connection timeout configuration
└── Lack of retry logic for transient errors
2

Root Cause Identification

NikCLI investigates the underlying cause:
🔎 Root cause analysis:

Primary Issue:
└── Database connection pool size too small for concurrent users

Contributing Factors:
├── Long-running queries without timeouts
├── Connections not properly released
└── No connection health monitoring
3

Fix Implementation

Apply comprehensive fixes:Database Configuration:
// Enhanced connection pool settings
mongoose.connect(DB_URL, {
  maxPoolSize: 10,
  serverSelectionTimeoutMS: 5000,
  socketTimeoutMS: 45000,
  bufferMaxEntries: 0
});
Error Handling:
// Retry logic for database operations
const retryOperation = async (operation, maxRetries = 3) => {
  for (let attempt = 1; attempt <= maxRetries; attempt++) {
    try {
      return await operation();
    } catch (error) {
      if (attempt === maxRetries) throw error;
      await delay(attempt * 1000);
    }
  }
};
4

Testing and Validation

Verify the fix:
> Add tests to prevent this issue from recurring
Prevention Measures:
  • Connection pool monitoring
  • Database health checks
  • Load testing
  • Error rate alerting
  • Performance benchmarks

​
Performance Optimization

​
Maintenance Workflows

​
Code Refactoring

> Refactor the components directory to follow 
  atomic design principles
Refactoring Plan:
src/components/
├── atoms/          # Basic building blocks
├── molecules/      # Simple combinations
├── organisms/      # Complex components
├── templates/      # Layout structures
└── pages/          # Complete pages

​
Testing Implementation

​
Best Practices

Clear Communication

Be Specific: Provide detailed requirementsGood: “Create a responsive product card with image, title, price, and add-to-cart functionality”Better: “Create a product card component that displays product image (with lazy loading), title, formatted price, star rating, and add-to-cart button with loading state”

Incremental Development

Start Simple: Build features incrementally
  1. Basic functionality first
  2. Add error handling
  3. Implement loading states
  4. Add accessibility features
  5. Optimize performance

Context Awareness

Reference Existing Code: Help NikCLI understand patterns“Follow the same pattern as UserCard.tsx” “Use the same error handling as in authService.ts” “Match the styling approach in the existing components”

Testing Focus

Include Testing: Always consider testing“Include unit tests for this component” “Add integration tests for the API endpoints” “Ensure the feature has proper error handling”

​
Next Steps

Advanced Automation

Learn complex multi-agent workflows and automation patterns

Integration Examples

Explore integrations with external tools and services

Real-World Scenarios

See how NikCLI handles production-level challenges

CLI Reference

Master all available commands and features
Remember that NikCLI learns from your project structure and coding patterns. The more you use it within a project, the better it becomes at understanding your specific requirements and conventions.