A modern, feature-rich Electron application boilerplate with React, TypeScript, ShadcnUI, and Tailwind CSS integration. This project provides a solid foundation for building cross-platform desktop applications with comprehensive testing, 100% jest coverage and development workflows.
project integrates llama.cpp with options to download llama3.2 or upload your own llmGGUF.
- Electron React Boilerplate
- Electron - Cross-platform desktop app framework
- React 19 - Modern React with latest features
- TypeScript - Type-safe development
- ShadcnUI - Beautiful, accessible component library
- Tailwind CSS - Utility-first CSS framework
- Vite - Fast build tool and development server
- Jest - Comprehensive testing framework
- i18next - Internationalization support
- React Router - Client-side routing
- Lucide Icons - Beautiful icon library
# Clone the repository
git clone https://github.com/trev-z-dev/electron-boilerplate.git
cd electron-boilerplate
# Install dependencies
npm install# Start both Vite dev server and Electron in development mode
npm run dev
# Or start individually:
npm run dev:vite # Start Vite dev server only
npm run dev:electron # Start Electron only (requires Vite server running)| Command | Description |
|---|---|
npm start |
Start Electron using Electron Forge |
npm run dev |
Start development environment (Vite + Electron) |
npm run build |
Build the React application for production |
npm run preview |
Preview the production build |
npm test |
Run all tests |
npm run test:watch |
Run tests in watch mode |
npm run test:coverage |
Run tests with coverage report |
npm run package |
Package the application |
npm run make |
Create distribution packages |
npm run publish |
Publish the application |
src/
├── electron/ # Electron main process files
│ ├── main.js # Main Electron process
│ └── preload.js # Preload script
└── react/ # React application
├── components/ # React components
│ ├── common/ # Shared components
│ ├── game/ # Game components (TicTacToe, lineDestroyer)
│ ├── layout/ # Layout components
│ └── ui/ # ShadcnUI components
├── lib/ # Utility libraries
├── locales/ # i18n translation files
├── styles/ # Global styles
├── __mocks__/ # Jest mocks
├── App.tsx # Main App component
├── routes.tsx # Route definitions
└── index.tsx # React entry point
This boilerplate includes two fully-featured games to demonstrate the capabilities:
- Complete lineDestroyer implementation with scoring, levels, and line clearing
- Comprehensive test coverage (99%+)
- Documented architecture in
lineDestroyer.doc.md - Keyboard controls: Arrow keys for movement, Space for hard drop, P for pause
- Classic 3x3 grid game
- Player vs Player gameplay
- Win detection and game reset functionality
The project maintains high test coverage standards:
- Coverage Target: 99%+
- Testing Strategy: Unit tests, integration tests, and mocked component tests
- Framework: Jest with React Testing Library
When coverage targets cannot be achieved through traditional testing:
- Refactor complex logic into helper functions
- Helper functions achieve 100% coverage easily
- Focus on separation of concerns
- Prefer unit testing of helpers over complex component mocking
# Run all tests
npm test
# Run tests in watch mode
npm run test:watch
# Generate coverage report
npm run test:coverageThis section provides comprehensive guides for extending the application with new functionality. Each guide includes implementation patterns, best practices, and testing strategies to maintain code quality and consistency.
| Guide | Description | Focus Areas |
|---|---|---|
| Routes and Pages | Complete guide for adding new routes and pages | Type-safe routing, component organization, navigation integration, i18n support |
| Backend Architecture | Comprehensive backend development guide | Database layer, service architecture, controllers, preload scripts, IPC communication |
| Testing Strategies | Advanced testing techniques for 100% coverage | Helper function extraction, edge case testing, mocking strategies, coverage analysis |
| Release Compilation | Complete build and distribution guide | Production builds, cross-platform packaging, release automation, security hardening |
- Plan the Feature: Review relevant documentation guides above
- Define Routes: Follow Routes and Pages Guide for frontend navigation
- Implement Backend: Use Backend Architecture Guide for data layer and IPC
- Achieve Coverage: Apply Testing Strategies Guide for comprehensive testing
- Build and Release: Follow Release Compilation Guide for production deployment
- Validate: Run
npm run test:coverageto ensure 100% coverage maintenance
- New Page Component: Extract complex logic to helpers for testability
- Database Operations: Use service layer with Prisma ORM and automatic initialization
- IPC Communication: Implement secure controller-preload-component patterns
- Testing: Target 100% coverage through helper function extraction and edge case testing
- Release Builds: Use
npm run build && npm run package && npm run makefor distribution - Internationalization: Add i18n keys for all user-facing text
The application supports multiple languages using i18next:
- English (default)
- French
- Automatic language detection
- Easy to add new languages in
src/react/locales/
- Windows - Squirrel installer
- macOS - ZIP package
- Linux - DEB and RPM packages
# Package the application
npm run package
# Create distribution packages for all platforms
npm run make- Electron 38 - Desktop app framework
- React 19 - UI library
- TypeScript 5 - Programming language
- Vite 7 - Build tool
- ShadcnUI - Component library
- Tailwind CSS 4 - CSS framework
- Radix UI - Accessible primitives
- Lucide React - Icon library
- Jest 30 - Testing framework
- React Testing Library - Component testing
- Electron Forge - Packaging and distribution
- Concurrently - Parallel script execution
package.json- Project metadata and scriptsvite.config.js- Vite configurationjest.config.js- Jest testing configurationtailwind.config.js- Tailwind CSS configurationtsconfig.json- TypeScript configurationCLAUDE.md- Project-specific development rules
- Fork the repository
- Create a feature branch
- Make your changes
- Add tests for new functionality
- Ensure all tests pass and maintain coverage targets
- Submit a pull request
MIT License - see LICENSE file for details
- trev-z-dev
- GitHub: @trev-z-dev