|
1 | | -# � Electron React Auth Updater |
2 | | - |
3 | | -A professional-grade, modular boilerplate for building secure and scalable cross-platform desktop applications using **Electron**, **React 19**, and **Tailwind CSS**. |
4 | | - |
5 | | ---- |
6 | | - |
7 | | -## 📋 Features |
8 | | - |
9 | | -### 🔐 Secure Authentication |
10 | | - |
11 | | -- **Integrated Auth Domain**: Robust authentication flow with a dedicated background process and window. |
12 | | -- **OAuth Providers**: Out-of-the-box support for **Google**, **Facebook**, and **GitHub**. |
13 | | -- **Context Bridge Security**: Strict IPC communication with sender validation and sanitized API exposure. |
14 | | - |
15 | | -### 🔄 Auto-Updates |
16 | | - |
17 | | -- **Cross-Platform**: Built-in update service optimized for both **Windows** and **macOS**. |
18 | | -- **Status Tracking**: Real-time update progress, download percentages, and status notifications in the UI. |
19 | | - |
20 | | -### 🎨 Modern UI & Styling |
21 | | - |
22 | | -- **React 19 & Tailwind CSS**: Leveraging the latest React features and utility-first styling for high performance. |
23 | | -- **Custom UI Kit**: A comprehensive library of reusable components (Buttons, Inputs, Popovers, Cards, etc.) with full **Light/Dark Mode** support. |
24 | | -- **Virtualization**: Efficient rendering of large datasets using `react-window` and `react-virtualized-auto-sizer`. |
25 | | -- **Lucide Icons**: Clean and lightweight icon set with `lucide-react`. |
26 | | - |
27 | | -### 🏗️ Architecture & DX |
28 | | - |
29 | | -- **Modular Main Process**: Clean separation of concerns with feature-based modules (auth, updater, user, etc.). |
30 | | -- **Subscription Pattern**: High-performance state management using `useSyncExternalStore` and a custom context pattern. |
31 | | -- **Robust Testing**: |
32 | | - - **Unit Testing**: Pre-configured with **Vitest** for both Main and Renderer processes. |
33 | | - - **E2E Testing**: Integrated **Playwright** for end-to-end application testing. |
34 | | -- **Logging & Storage**: Integrated `electron-log` for debugging and `electron-store` for persistent data storage. |
35 | | - |
36 | | ---- |
37 | | - |
38 | | -## 🛠️ Technologies Used |
39 | | - |
40 | | -- **Core**: Electron, React 19, TypeScript, Vite |
41 | | -- **Styling**: Tailwind CSS, clsx, tailwind-merge |
42 | | -- **State/Navigation**: React Router 7, useSyncExternalStore |
43 | | -- **Desktop Utils**: electron-updater, electron-store, electron-log |
44 | | -- **Network**: Axios, jsonwebtoken |
45 | | -- **Icons**: lucide-react |
46 | | -- **Testing**: Vitest, Playwright, Testing Library |
47 | | - |
48 | | ---- |
49 | | - |
50 | | -## 🚀 Getting Started |
51 | | - |
52 | | -### Prerequisites |
53 | | - |
54 | | -- Node.js (Latest LTS recommended) |
55 | | -- npm or yarn |
56 | | - |
57 | | -### Installation |
58 | | - |
59 | | -```bash |
60 | | -npm install |
61 | | -``` |
62 | | - |
63 | | -### Development |
64 | | - |
65 | | -Run the development environment (Main and Renderer in parallel): |
66 | | - |
67 | | -```bash |
68 | | -npm run dev |
69 | | -``` |
70 | | - |
71 | | -### Building & Packaging |
72 | | - |
73 | | -Build and package the application for your OS: |
74 | | - |
75 | | -```bash |
76 | | -# Windows |
77 | | -npm run build:win |
78 | | - |
79 | | -# macOS |
80 | | -npm run build:mac |
81 | | - |
82 | | -# Linux |
83 | | -npm run build:linux |
84 | | -``` |
85 | | - |
86 | | ---- |
87 | | - |
88 | | -## 📂 Project Structure |
89 | | - |
90 | | -- `src/main`: Main process logic (IPC, Windows, Services, Feature Modules). |
91 | | -- `src/renderer`: React application (Components, Hooks, Domains, Windows). |
92 | | -- `types`: Shared TypeScript definitions for IPC and domain objects. |
93 | | -- `docs`: Detailed architecture guides and coding instructions. |
0 commit comments