CRUD v2 React Projects Documentation

This documentation covers all the CRUD v2 component usage projects that implement the @phpcreation/frontend-crud-react-nextjs-bundle package. Each project demonstrates different aspects and use cases of the CRUD bundle components.

Project Overview

The CRUD v2 ecosystem consists of multiple specialized projects built on top of the shared CRUD bundle:

Core Bundle

• @phpcreation/frontend-crud-react-nextjs-bundle : The main CRUD components library

Implementation Projects

1. phpreaction-frontend-crud-react-v2  - Core CRUD implementation
2. configuration-frontend-crud-react-v2  - Configuration management
3. ticket-frontend-crud-react-v2  - Ticket management system
4. phpreaction-frontend-account-crud-react-v2  - Account/User management

Project Comparison

Bundle Dependencies

All projects use the same core dependencies for CRUD functionality:

{
  "@phpcreation/frontend-auth-authorization-flow-react-nextjs-bundle": "^2.7.13",
  "@phpcreation/frontend-components-react-nextjs-bundle": "^2.29.3",
  "@phpcreation/frontend-config-react-nextjs-bundle": "^2.9.8",
  "@phpcreation/frontend-crud-react-nextjs-bundle": "^2.80.0",
  "@phpcreation/frontend-icons-react-nextjs-bundle": "^1.11.3",
  "@phpcreation/frontend-utils-react-nextjs-bundle": "^1.28.7",
  "@phpcreation/frontend-dynamodb-react-nextjs-bundle": "^2.3.5"
}

CRUD Bundle Architecture

The @phpcreation/frontend-crud-react-nextjs-bundle v2.80.0 provides a comprehensive set of components, contexts, and utilities:

Component Categories

Context Providers

// Available contexts for state management
import {
  ListingContextProvider,    // Manages listing/table data, filtering, sorting, pagination
  DetailShowContextProvider, // Manages entity detail view state
  KanbanListingContextProvider, // Kanban board state, column visibility, drag-drop
  DebugContextProvider       // Debugging utilities
} from "@phpcreation/frontend-crud-react-nextjs-bundle";

Custom Hooks

import {
  useKVS,              // Key-Value Store operations
  useTreeView,         // Tree view management
  useFormValues,       // Form value management
  useDefaultFormValues, // Default form value initialization
  useScrollToError,    // Scroll to form validation errors
  useActionButtons     // Action button configuration
} from "@phpcreation/frontend-crud-react-nextjs-bundle";

Key Third-Party Dependencies

Detailed Project Documentation

Each CRUD v2 project has comprehensive documentation covering setup, configuration, API integration, and advanced features:

What Each Documentation Includes:

• Complete Environment Setup: Production, development, and local configurations
• API Integration Details: Endpoint mappings, authentication, and data flows
• Entity Configurations: Real-world examples with form inputs and filters
• Advanced Features: Kanban boards, real-time updates, file handling
• Security Implementation: Authentication, authorization, and compliance
• Testing Strategies: E2E testing, security testing, and quality assurance
• Deployment Guides: AWS deployment, monitoring, and troubleshooting

Common Implementation Patterns

Project Setup Structure

All CRUD v2 projects follow this consistent structure:

project-name/
├── src/
│   ├── app/                    # Next.js 14 app directory
│   │   ├── [locale]/          # Internationalization
│   │   └── api/               # API routes
│   ├── components/            # Custom components
│   ├── containers/            # Container components
│   ├── crud_config/           # Entity configurations
│   ├── store/                 # Redux store
│   ├── utils/                 # Utility functions
│   └── middleware.ts          # Next.js middleware
├── public/                    # Static assets
├── messages/                  # Translation files
├── environments/              # Environment configs
└── infrastructure/            # AWS/deployment configs

Environment Configuration

# Common environment variables across all projects
NEXT_PUBLIC_APP_ID=your-app-id
NEXT_PUBLIC_API_BASE_URL=https://api.example.com
NEXT_PUBLIC_ICONS_URL=https://icons.example.com
 
# CRUD Bundle specific
NEXT_PUBLIC_Role_Accessibility_Check=0
NEXT_PUBLIC_KVS_DATA_STORE_TOGGLE=0
NEXT_PUBLIC_USE_PUT_METHOD=0
NEXT_PUBLIC_IMPORT_FEATURE_TOGGLE=1

Entity Configuration Template

// Standard entity configuration pattern
export const entityConfig = {
  fqcn_bui: {
    Bundle: "your-bundle",
    Unit: "entity-name",
    Interface: "management",
  },
  resource: "entity_endpoint",
  mainColumns: [
    // Column definitions
  ],
  formInputs: [
    // Form field groups
  ],
  filterFields: [
    // Filter field definitions
  ],
};

Development Progression

Shared Development Board

All projects track progress through:

• GitHub Project: CRUDv2 Progression Board 

Key Milestones

Best Practices

Migration from v1 to v2

Legacy Projects

• phpr-api-config-react → configuration-frontend-crud-react-v2
• ticket-frontend-crud-react → ticket-frontend-crud-react-v2
• phpreaction-frontend-crud-react → phpreaction-frontend-crud-react-v2

Key Improvements in v2

1. Next.js 14.2+: App directory structure with improved performance and 8GB heap allocation for large builds
2. Enhanced Bundle v2.80.0: 20 component directories with 97 TypeScript files (74 TSX + 23 TS)
3. Better TypeScript 5: Improved type safety throughout with strict mode
4. Modern UI: Tailwind CSS with tailwindcss-animate for component animations
5. Advanced Features: Kanban boards with drag-drop, 16 modal types, bulk import/export, metadata management
6. Form Management: react-hook-form v7.51+ with Zod v3.25+ validation schemas
7. 4 Context Providers: ListingContext, DetailShowContext, KanbanListingContext, DebugContext
8. 6 Custom Hooks: useKVS, useTreeView, useFormValues, useDefaultFormValues, useScrollToError, useActionButtons
9. pnpm Package Manager: Faster, more efficient dependency management

Migration Checklist

Support & Resources

Documentation

• CRUD Bundle: Complete Bundle Documentation
• Form Components: Form Components Guide
• Listing Components: Listing Components Guide

Development Resources

• GitHub Organization: PHPCreation 
• Project Board: CRUDv2 Progression 
• Bundle Repository: CRUD Bundle 

Getting Help

• Issues: Report bugs and request features on the respective project repositories
• Discussions: Use GitHub Discussions for general questions and ideas
• Documentation: Refer to this comprehensive documentation for implementation guidance

This documentation provides a complete overview of all CRUD v2 component usage projects, their implementations, and best practices for development and maintenance.