Phase 1: Project Foundation & Setup

[coderabbitai]

🎯 Objective

Set up the foundational project structure, development environment, and core dependencies for the OmniBlocks Screen Recorder.

📋 Tasks

1.1 Initialize Project Structure

• Create base directory structure:
  • electron/ - Main Electron process files
  • electron/recorder/ - Recording engine modules
  • src/ - React application source
  • src/components/ - React UI components
  • src/hooks/ - Custom React hooks
  • src/contexts/ - React context providers
  • postprocessor/ - Post-recording effects processing
  • assets/ - Static assets and resources
• Create core files:
  • electron/main.js - Electron main process entry point
  • electron/preload.js - IPC bridge between main/renderer
  • electron/recorder/screenCapture.js - Desktop Duplication API wrapper
  • electron/recorder/cursorTracking.js - Cursor position tracking
  • electron/recorder/videoEncoder.js - Video encoding pipeline
  • src/App.jsx - Main React application component

1.2 Setup Dependencies

• Initialize npm project with npm init
• Install Electron (latest stable version)
• Install React and ReactDOM
• Install node-addon-api for native Windows API bindings
• Research and select FFmpeg integration approach
• Install electron-builder for packaging
• Install development dependencies:
  • Webpack or Vite for bundling
  • TypeScript (recommended)
  • ESLint and Prettier for code quality

1.3 Create Build Configuration

• Set up bundler configuration (Webpack/Vite)
  • Configure React JSX transformation
  • Set up development and production modes
  • Configure hot module replacement for development
• Configure electron-builder
  • Set Windows as target platform
  • Configure app metadata (name, description, author)
  • Set up icon and assets
• Set up TypeScript configuration (if using TS)
  • Create tsconfig.json
  • Configure paths and module resolution
• Create npm scripts:
  • dev - Run in development mode
  • build - Build for production
  • pack - Package as distributable

1.4 Basic Electron + React Integration

• Create basic Electron main process that launches a window
• Set up React app that renders in Electron window
• Establish IPC communication between main and renderer process
• Verify hot reload works in development
• Test production build

🎯 Success Criteria

• Project compiles without errors
• Electron window opens with React app rendered
• Development mode with hot reload works
• Can build production-ready package

📚 Resources

• Electron Documentation
• React + Electron Guide
• electron-builder Documentation

🔗 Related

• Original feature request: make screen recorder #1

Estimated Duration: Week 1

[traycerai]

Warning

Rate limit exceeded. Please try after 518154 seconds.