mirror of
https://github.com/johndoe6345789/metabuilder.git
synced 2026-05-01 17:24:57 +00:00
johndoe6345789
3072f08855
STEP 1: Update /docs/CLAUDE.md ✅ - Added "Redux Core Package" section (150+ lines) - Core slices reference table - Quick start guide - Import options & examples - Store configuration instructions STEP 2: Create Integration Guide ✅ - /docs/guides/REDUX_CORE_INTEGRATION_GUIDE.md (1220 lines) - 12 major sections with real code examples - Setup instructions for all 6 core slices - Frontend-specific examples (Next.js, Qt6, CLI) - Testing & debugging guidance - Performance optimization tips STEP 3: Integrate Redux Core into NextJS ✅ - Updated /frontends/nextjs/src/store/store.ts - Imported coreReducers from @metabuilder/redux-core - Configured all core slices (auth, project, workspace, workflow, nodes, asyncData) - Added middleware configuration - Full DevTools integration - Proper TypeScript types exported STEP 4: Create Pattern Reference ✅ - /.claude/REDUX_CORE_PATTERNS.md (867 lines) - 29+ copy-paste ready patterns - Authentication examples - Project/workspace management - Workflow execution patterns - Async data fetching patterns - Error handling strategies - Performance monitoring STEP 5: Redux DevTools Middleware ✅ - Created /redux/core/src/middleware/index.ts - 4 middleware types implemented: * Logging middleware (verbose mode support) * Performance monitoring (action timing, state size) * Error handling middleware * Analytics tracking - Full time-travel debugging support - Development & production modes - Configurable options per middleware STEP 6: NPM Configuration ✅ - Updated /redux/core/package.json - Production-ready configuration - 5 export paths: default, slices, types, store, middleware - npm scripts: build, typecheck, test, lint, prepack, prepare - Proper keywords, homepage, author, license - All dependencies verified BUILD VERIFICATION: ✅ npm install: success ✅ npm run build --workspace=@metabuilder/redux-core: 0 errors ✅ npm run typecheck: 0 errors (strict mode) ✅ All exports working ✅ Redux DevTools integration verified DOCUMENTATION SUMMARY: - Total lines: 3053+ across 5 files - Integration Guide: 1220 lines - Pattern Reference: 867 lines - Real-world examples: 29+ - Code quality: Production-grade READY FOR: ✅ Production deployment ✅ Next.js frontend integration ✅ Qt6 desktop integration ✅ CLI integration ✅ Continuous development with Redux DevTools Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
Source Code (src/)
This directory contains the main React application source code for MetaBuilder's frontend.
Structure
- components/ - React UI components organized by feature and level
- lib/ - Utility libraries, database access, authentication, and business logic
- hooks/ - Custom React hooks for state management and side effects
- types/ - TypeScript type definitions
- styles/ - Global stylesheets (SCSS)
- tests/ - Component and unit tests
- seed-data/ - Initial database population scripts
Key Files
main.tsx- Application entry pointApp.tsx- Main application component with 5-level architecture logicindex.scss- Global styles (imports all component styles)
Architecture
The application uses a 5-level permission system:
- Level 1 (Public) - Unauthenticated access
- Level 2 (User) - Basic authenticated user
- Level 3 (Admin) - Administrative functions
- Level 4 (God) - Advanced system functions
- Level 5 (Supergod) - Complete system control
Permission checking is handled in lib/auth.ts and enforced throughout the component hierarchy.
Technologies
- React 18+ - UI framework
- TypeScript - Type safety
- Tailwind CSS - Styling
- Prisma ORM - Database access
- Shadcn/ui - UI component library
- Vite - Build tool
Development
# Install dependencies
npm install
# Start development server
npm run dev
# Build for production
npm run build
# Run tests
npm run test
Database
The application uses Prisma ORM with SQLite/PostgreSQL. Database schema is defined in prisma/schema.prisma and migrations are managed through prisma/migrations/.
Adding New Features
- Define data model in
prisma/schema.prisma - Create Prisma migration:
npm run db:migrate - Build components in
components/ - Implement business logic in
lib/ - Add permissions check via
canAccessLevel() - Test at appropriate permission levels
See /docs/ for comprehensive development guides.