A modern desktop application boilerplate combining Electron, React (with TypeScript), shadcn/ui, and a Python FastAPI backend.

• ⚛️ React 18 with TypeScript
• 🎨 shadcn/ui components with Tailwind CSS
• ⚡ Vite for fast development
• 🖥️ Electron for desktop app
• 🐍 Python FastAPI backend
• 🔄 Hot reload for both frontend and backend

electron-react-python-app/
├── src/
│   ├── frontend/              # React frontend
│   │   ├── components/
│   │   │   └── ui/           # shadcn/ui components
│   │   ├── lib/
│   │   ├── types/
│   │   ├── App.tsx
│   │   ├── main.tsx
│   │   └── index.css
│   ├── backend/              # Python backend
│   │   ├── main.py
│   │   └── requirements.txt
│   ├── main.js               # Electron main process
│   └── preload.js            # Electron preload script
├── public/                   # Static assets
├── dist/                     # Build output
├── index.html
├── package.json
├── vite.config.ts
├── tsconfig.json
└── tailwind.config.js

• Node.js (v18 or higher)
• Python (v3.8 or higher)
• npm or yarn

npm install

pip install -r src/backend/requirements.txt

Or using a virtual environment (recommended):

python -m venv venv
source venv/bin/activate  # On Windows: venv\Scripts\activate
pip install -r src/backend/requirements.txt

Run all services concurrently:

npm run dev

This will start:

• Python backend on http://localhost:8000
• Vite dev server on http://localhost:5173
• Electron app

Python Backend:

npm run dev:python
# or
python src/backend/main.py

Vite Dev Server:

npm run dev:vite

Electron:

npm run dev:electron

npm run build

npm run build:electron

This will create distributable packages in the dist folder.

This boilerplate includes Button and Card components. To add more shadcn/ui components:

1. Visit ui.shadcn.com
2. Copy the component code
3. Add to src/frontend/components/ui/
4. Import and use in your app

Example components already included:

• Button
• Card

The Python backend provides these example endpoints:

• GET /ping - Health check
• GET /api/data - Sample data endpoint

Add more endpoints in src/backend/main.py.

const response = await fetch('http://localhost:8000/api/data');
const data = await response.json();

const result = await window.electron.pingPython();

Edit tailwind.config.js and src/frontend/index.css to customize colors and styling.

Modify src/main.js to change window size, behavior, and settings.

Edit src/backend/main.py to add routes, database connections, or business logic.

MIT