Skip to content

ARCHITECTURE.md

Latest commit

 

History

History
256 lines (181 loc) · 5.89 KB

ARCHITECTURE.md

File metadata and controls

256 lines (181 loc) · 5.89 KB
Raw

Table Generator Project Architecture

🏗 Architecture Overview

Table Generator is built on modern React application architecture using Redux Toolkit for state management. The project follows component architecture principles and separation of concerns.

📁 Project Structure

src/
├── components/          # React components
│   ├── CreateTableForm/ # Table creation form
│   ├── EditableCell/   # Editable cells
│   ├── TableComponent/ # Main table component
│   ├── TableGenerator/ # Application container
│   └── TablesGrid/     # Grid for table placement
├── store/              # Redux store and slices
│   ├── slices/         # Redux slices
│   └── index.ts        # Store configuration
├── types/              # TypeScript types and interfaces
├── utils/              # Utilities and helpers
└── test/               # Test utilities

🧩 Component Architecture

Design Principles

  1. Single Responsibility: Each component is responsible for one specific function
  2. Reusability: Components are designed for maximum reusability
  3. Props Down, Events Up: Data is passed through props, events through callbacks
  4. Controlled Components: All components are controlled by external state

Component Hierarchy

App
└── TableGenerator (container)
    ├── CreateTableForm (creation form)
    └── TablesGrid (tables grid)
        └── TableComponent (individual table)
            ├── TableHeader (header)
            └── TableBody (table body)
                └── EditableCell (editable cells)

🔄 State Management

Redux Store Structure

interface RootState {
  tables: TablesState;  // Table state
  ui: UIState;          // UI state
}

Tables Slice

Manages all data related to tables:

  • items: array of all tables
  • nextId: counter for ID generation
  • selectedTableId: ID of selected table

Actions:

  • addTable - creating new table
  • copyTable - copying existing table
  • updateCell - updating cell content
  • reorderTables - reordering tables

UI Slice

Manages user interface state:

  • showForm: visibility of table creation form
  • selectedTableId: ID of selected table

Actions:

  • toggleForm - show/hide form
  • selectTable - select table

🎨 Styling System

CSS Modules

The project uses CSS Modules for style isolation:

  • Each component has its own CSS file
  • Styles are automatically isolated from other components
  • Support for dynamic classes and states

Responsive Design

  • Mobile First approach
  • CSS Grid for adaptive grid
  • Media queries for various screen sizes
  • Flexbox for internal component layout

🔧 Utilities and Helpers

grid.utils.ts

Contains logic for working with CSS Grid:

  • calculateGridPosition() - calculating table position in grid
  • Automatic table placement (1, 2, 3 per row)
  • Width adjustment considering gaps

id.utils.ts

Utilities for generating identifiers:

  • generateId() - creating UUID v4 for unique IDs
  • Used for tables, rows, columns

📱 Drag & Drop System

Implementation

  • Uses HTML5 Drag & Drop API
  • Integrated with Redux for state updates
  • Visual feedback during dragging
  • Automatic position recalculation

Event Handling

  1. dragstart: start of dragging
  2. dragover: dragging over target area
  3. drop: completion of dragging
  4. dragend: state cleanup

🧪 Testing

Testing Strategy

  • Unit tests: for Redux reducers and utilities
  • Component tests: for React components
  • Integration tests: for user scenarios
  • Coverage: minimum 80% coverage

Tools

  • Vitest: for running tests
  • React Testing Library: for testing components
  • MSW: for API mocking (if needed)

🔒 Security

Principles

  • Validation of all user input data
  • HTML sanitization to prevent XSS
  • Type checking at TypeScript level
  • Access restriction to critical operations

Data Validation

  • Column type checking (text, number, select)
  • Table and column name validation
  • Numeric value correctness checking
  • Text field length limitation

🚀 Performance

Optimizations

  • React.memo: to prevent unnecessary re-renders
  • useCallback: for function memoization
  • useMemo: for computation caching
  • Lazy loading: for components (if needed)

Monitoring

  • React DevTools profiling
  • Render time measurement
  • Bundle size analysis
  • Performance testing

🔄 Data Lifecycle

Table Creation

  1. User fills out form
  2. Client-side data validation
  3. Creating table object with unique IDs
  4. Adding to Redux store
  5. Automatic placement in grid

Cell Editing

  1. Click on cell
  2. Activating edit mode
  3. Entering new value
  4. Data validation
  5. Updating Redux store
  6. Component re-render

Table Copying

  1. Click on "Copy" button
  2. Creating deep copy with new IDs
  3. Updating name (adding "(copy)")
  4. Placement in grid after original

🌐 Integrations

External Dependencies

  • React 18: main UI library
  • Redux Toolkit: state management
  • TypeScript: typing
  • Vite: build and development
  • UUID: unique ID generation

Possible Extensions

  • Local Storage: for data persistence
  • IndexedDB: for large data volumes
  • WebSocket: for real-time collaboration
  • PWA: for offline work

📊 Monitoring and Logging

Logging

  • User action logging
  • Error tracking
  • Performance metrics
  • Usage analytics

Debugging

  • Redux DevTools for state debugging
  • React DevTools for components
  • Console logs for development
  • Source maps for debugging

🔮 Future Improvements

Planned Features

  • Export to CSV/Excel
  • Data import
  • Table templates
  • Dark theme
  • Localization
  • Undo/Redo system

Architectural Improvements

  • Micro-frontends
  • Service Workers
  • Web Workers for heavy computations
  • Bundle optimization
  • Code splitting