Building a Desktop App with Electron JS and React JS [ Timer Overlay ] | A Step-by-step Tutorial
5.5 هزار بار بازدید -
5 ماه پیش
-
In this tutorial we will
In this tutorial we will build a timer-overlay desktop application from scratch using Electron.js and React.js. Our app will display a timer overlay on our screen, allowing us to track time while working on other tasks. We’ll also implement an overlay mode that can be toggled with keyboard shortcuts. To make our app visually appealing, we’ll style it using Tailwind CSS.
⏰ Chapters:
00:00 - Introduction: What We’ll Make
00:30 - App Demo
01:12 - Create Project Directory
01:31 - Prerequisites: Check Node.js and npm Installation
02:17 - Set Up Project Scaffolding with Electron-vite
03:43 - Keep Electron App Window Always on Top
04:44 - Install Tailwind CSS and Configure .postcssrc
07:57 - Remove Title Bar by Disabling Electron’s Browser Window Frame
08:32 - Create Custom Title Bar (Top Bar)
10:01 - Make Custom Title Bar Draggable with CSS
10:47 - Implement Minimize and Close Buttons
12:47 - Inter-Process Communication (IPC) to Close and Minimize Window
16:55 - Make Application Window Transparent
18:54 - Create Timer Component and InputField Component
30:25 - Format Timer Display as a Digital Clock
34:47 - Design Timer Buttons
38:32 - Add Timer Logic (useEffect Hook + setInterval)
44:00 - Validate User Input to Prevent Negative Values
45:39 - Play Audio Sample When Timer Reaches 00:00
48:12 - Enable Overlay Mode
49:05 - Register Hotkey in Main Process and Set Overlay Mode
49:55 - Implement IPC from Main Process to Renderer
52:04 - Hide Top Bar in Overlay Mode
53:41 - Hide Button Elements in Overlay Mode
54:54 - Add Hover Effect to Buttons
55:25 - Build the Application and Create a Distributable Installer
🔗Important Links:
Electron-Vite Docs : https://electron-vite.org/guide/
ElectronJS Docs : https://www.electronjs.org/
#ElectronJS
#reactjs
#javascript
#nodejs
#DesktopAppDevelopment
#CodingTutorial
#WebDevelopment
#TailwindCSS
#ProgrammingTips
#SoftwareDevelopment
#GUI
⏰ Chapters:
00:00 - Introduction: What We’ll Make
00:30 - App Demo
01:12 - Create Project Directory
01:31 - Prerequisites: Check Node.js and npm Installation
02:17 - Set Up Project Scaffolding with Electron-vite
03:43 - Keep Electron App Window Always on Top
04:44 - Install Tailwind CSS and Configure .postcssrc
07:57 - Remove Title Bar by Disabling Electron’s Browser Window Frame
08:32 - Create Custom Title Bar (Top Bar)
10:01 - Make Custom Title Bar Draggable with CSS
10:47 - Implement Minimize and Close Buttons
12:47 - Inter-Process Communication (IPC) to Close and Minimize Window
16:55 - Make Application Window Transparent
18:54 - Create Timer Component and InputField Component
30:25 - Format Timer Display as a Digital Clock
34:47 - Design Timer Buttons
38:32 - Add Timer Logic (useEffect Hook + setInterval)
44:00 - Validate User Input to Prevent Negative Values
45:39 - Play Audio Sample When Timer Reaches 00:00
48:12 - Enable Overlay Mode
49:05 - Register Hotkey in Main Process and Set Overlay Mode
49:55 - Implement IPC from Main Process to Renderer
52:04 - Hide Top Bar in Overlay Mode
53:41 - Hide Button Elements in Overlay Mode
54:54 - Add Hover Effect to Buttons
55:25 - Build the Application and Create a Distributable Installer
🔗Important Links:
Electron-Vite Docs : https://electron-vite.org/guide/
ElectronJS Docs : https://www.electronjs.org/
#ElectronJS
#reactjs
#javascript
#nodejs
#DesktopAppDevelopment
#CodingTutorial
#WebDevelopment
#TailwindCSS
#ProgrammingTips
#SoftwareDevelopment
#GUI
5 ماه پیش
در تاریخ 1402/12/22 منتشر شده
است.
5,538
بـار بازدید شده