NFT Studio provides a graphical interface for the my-nft-gen library, enabling artists and creators to design generative NFT collections with real-time visual feedback and professional-grade effects.
Key Features:
- Visual Effect Editor - Layer and configure effects with live preview
- Resolution Management - Auto-scaling across multiple resolutions (1K-8K)
- Project Persistence - Save/load
.nftprojectfiles - Undo/Redo System - Full command history with 50-action buffer
- Batch Rendering - Generate entire collections with progress tracking
- Color Scheme Library - Manage and favorite color palettes
# Clone the repository
git clone https://github.com/yourusername/nft-studio.git
cd nft-studio
# Install dependencies
npm install
# Start development build
npm run start:dev# Build for all platforms
npm run package
# Platform-specific builds
npm run package:mac # macOS (x64 + ARM64)
npm run package:win # Windows (x64 + x86)
npm run package:linux # Linux (AppImage, deb, snap)Tech Stack:
- Frontend: React 18 + Material UI + Radix UI
- Backend: Electron 30 with secure IPC bridge
- Build System: Webpack 5 + Babel 7
- Rendering Engine: my-nft-gen (Canvas + Sharp)
Design Patterns:
- Command Pattern - Undo/redo functionality
- Event Bus - Decoupled component communication
- Dependency Injection - Service layer architecture
- Single Source of Truth - Centralized state management via
ProjectState
# Run all tests
npm test
# Run specific test suites
npm run test:unit # Unit tests
npm run test:integration # Integration tests
npm run test:system # System tests
npm run test:services # Service layer testsTest Coverage: Comprehensive suite with unit, integration, and regression tests located in tests/ directory.
nft-studio/
├── src/
│ ├── components/ # React UI components
│ ├── services/ # Business logic layer
│ ├── commands/ # Command pattern implementations
│ ├── models/ # Data models (ProjectState, etc.)
│ ├── effects/ # Effect configurations
│ └── utils/ # Helper utilities
├── main.js # Electron main process
├── preload.js # Secure IPC bridge
├── render.js # React entry point
└── tests/ # Test suite
The animated cyberpunk icon features real-time CSS animations including a scanning line effect and Matrix-style digital rain. See ANIMATED_ICON_GUIDE.md for technical details.
MIT License - see LICENSE file for details.
This is a personal project, but feedback and suggestions are welcome. Please open an issue to discuss proposed changes.
Built with ❤️ for the NFT creator community