https://github.com/5h1ngy/bl-electron-vite-typescript-react
An advanced Electron application with React and TypeScript. Ideal for developing robust and modern desktop applications with static typing and reactive UI components.
https://github.com/5h1ngy/bl-electron-vite-typescript-react
cross-platform data-export desktop-app electron local-storage offline-first react typescript vite
Last synced: 26 days ago
JSON representation
An advanced Electron application with React and TypeScript. Ideal for developing robust and modern desktop applications with static typing and reactive UI components.
- Host: GitHub
- URL: https://github.com/5h1ngy/bl-electron-vite-typescript-react
- Owner: 5h1ngy
- Created: 2025-04-01T02:43:37.000Z (26 days ago)
- Default Branch: main
- Last Pushed: 2025-04-01T03:09:07.000Z (26 days ago)
- Last Synced: 2025-04-01T04:21:22.837Z (26 days ago)
- Topics: cross-platform, data-export, desktop-app, electron, local-storage, offline-first, react, typescript, vite
- Language: TypeScript
- Homepage:
- Size: 166 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🚀 React-TS
An advanced Electron application with React and TypeScript. Ideal for developing robust and modern desktop applications with static typing and reactive UI components.
**Topics:** `electron` `react` `typescript` `vite` `cross-platform` `desktop-app` `offline-first` `local-storage` `data-export`
## 📋 Table of Contents
- [Features](#-features)
- [Project Structure](#-project-structure)
- [Recommended IDE Setup](#-recommended-ide-setup)
- [Project Setup](#-project-setup)
- [Package Managers](#-package-managers)
- [Resources](#-resources)
## ✨ Features
- ⚛️ React framework for UI components
- 📊 Support for dashboard and statistical visualizations
- 🗓️ Ability to implement timeline and calendar views
- 💾 Data storage in localStorage (100% offline)
- 📤 Import/export and backup functionality
- 🔄 Hot Module Replacement (HMR) during development
- ⚡ Ultra-fast build with Vite bundler
- 📦 Cross-platform packaging
- 🔒 Type safety with TypeScript
- 🧩 Native Node.js integration
- 🔍 TypeScript linting with ESLint
- 🎨 Code formatting with Prettier
- 🖌️ Component-based architecture
## 🗂️ Project Structure
```
bl-electron-vite-typescript-react/
├── build/ # Build resources and configuration
├── dist/ # Build output directory
├── out/ # Packaged application output
├── src/
│ ├── main/ # Main process code
│ │ └── index.ts # Main entry point
│ ├── preload/ # Preload scripts
│ │ └── index.ts # Preload entry point
│ └── renderer/ # Renderer process code (React)
│ ├── App.tsx # Root React component
│ ├── components/ # React components
│ ├── hooks/ # Custom React hooks
│ ├── utils/ # Utility functions
│ ├── index.html # HTML template
│ └── index.tsx # Renderer entry point
├── .eslintrc # ESLint configuration
├── electron-builder.yml # Electron builder configuration
├── package.json # Project dependencies and scripts
├── tsconfig.json # TypeScript configuration
└── vite.config.ts # Vite configuration
```
## 🛠️ Recommended IDE Setup
- [VSCode](https://code.visualstudio.com/) + [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) + [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
## 🚀 Project Setup
### 📥 Install
```bash
$ pnpm install
```
### 🔧 Development
```bash
$ pnpm dev
```
### 📦 Build
```bash
# For windows
$ pnpm build:win
# For macOS
$ pnpm build:mac
# For Linux
$ pnpm build:linux
```
## 📦 Package Managers
This project supports multiple package managers. Here's how to use each one:
### NPM
NPM is the default package manager for Node.js.
**Install NPM:**
```bash
# Included with Node.js installation
```
**Setup project with NPM:**
```bash
# Install dependencies
$ npm install
# Run development server
$ npm run dev
# Build application
$ npm run build:win
$ npm run build:mac
$ npm run build:linux
```
**Key features:**
- 📚 Vast package ecosystem
- 🔒 Hierarchical node_modules structure
- 📋 Package.json for dependency management
### Yarn
Yarn is a fast, reliable, and secure alternative to NPM.
**Install Yarn:**
```bash
# Install using NPM
$ npm install -g yarn
```
**Setup project with Yarn:**
```bash
# Install dependencies
$ yarn
# Run development server
$ yarn dev
# Build application
$ yarn build:win
$ yarn build:mac
$ yarn build:linux
```
**Key features:**
- ⚡ Faster installation speeds
- 📦 Offline caching
- 🔒 Better security with checksums
- 📋 yarn.lock for deterministic installations
### PNPM
PNPM is a disk-space efficient package manager.
**Install PNPM:**
```bash
# Install using NPM
$ npm install -g pnpm
```
**Setup project with PNPM:**
```bash
# Install dependencies
$ pnpm install
# Run development server
$ pnpm dev
# Build application
$ pnpm build:win
$ pnpm build:mac
$ pnpm build:linux
```
**Key features:**
- 💾 Disk space savings through symlinks
- 🚀 Fast installation speeds
- 🔄 Content-addressable storage
- 📋 pnpm-lock.yaml for dependency lock
### Comparison
| Feature | NPM | Yarn | PNPM |
|-----------------------|---------|---------|---------|
| Disk usage | High | High | Low |
| Installation speed | Slow | Fast | Fastest |
| Parallel installations| Limited | Yes | Yes |
| Workspace support | Limited | Good | Best |
| Offline mode | Limited | Good | Good |
| Security | Good | Better | Better |
## 📚 Resources
- [Electron Documentation](https://www.electronjs.org/docs)
- [React Documentation](https://reactjs.org/docs/getting-started.html)
- [TypeScript Documentation](https://www.typescriptlang.org/docs/)
- [Vite Documentation](https://vitejs.dev/guide/)
- [NPM Documentation](https://docs.npmjs.com/)
- [Yarn Documentation](https://yarnpkg.com/getting-started)
- [PNPM Documentation](https://pnpm.io/motivation)