Building a Desktop App with Electron JS and React JS [ Timer Overlay ] | A Step-by-step Tutorial
Ғылым және технология
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 : electron-vite.org/guide/
ElectronJS Docs : www.electronjs.org/
#ElectronJS
#reactjs
#javascript
#nodejs
#DesktopAppDevelopment
#CodingTutorial
#WebDevelopment
#TailwindCSS
#ProgrammingTips
#SoftwareDevelopment
#GUI
Пікірлер: 27
I had so much fun creating this application and I hope it brings you so much joy! 🎉 I can't wait to hear your thoughts! 😊
@jcurbelob
2 ай бұрын
is hard to find updated tutorials with all this concepts bundled, please please please , keep it going! THANKS! PD: if you could please make a single tutorial for IPC communications , would be awesome. THANKS AGAIN
@PikoCanFly
2 ай бұрын
@@jcurbelob Thank you! I really love Electron and I intend to make more videos about it in the future 🙂. A video about IPC sounds like a good idea💡 I'll definitely think about making one.
@jcurbelob
2 ай бұрын
Thank you very much@@PikoCanFly !! Im a web developer trying to get immersed into Electron. Your content fits 100% for my purpose. 💯
Thank you so much! You saved lots of time for me. I was not familiar with Electron and my friend asked me to build a simple widget for him, now he is a happy user!
Amazing amazing amazing tutorial!!!!! Thank you so much for making this! Thanks to you I can now build apps with Electron! 😀
@PikoCanFly
3 ай бұрын
Thank you soo much for your lovely comment! 😊😊
Thank you for share your time/knowledge with us, God bless you
Thank you so much, your tutrials have helped me a lot creating my first Electron app, which was amazing becuase all other tutrials were really difficult to follow-up .. Keep up the great work :D
@PikoCanFly
3 ай бұрын
Thank you for your kind words! 😊
Thanks Piko, learned a lot about Electronjs while following this tutorial
@PikoCanFly
2 ай бұрын
Great to hear!
I saw and heard this beauty and forgot why I started watching the video. thanks anyway😵💫
@PikoCanFly
21 сағат бұрын
I hope you found the video useful. :)
your voice is amazing
Thanks for this original and unique project! Amazing tutorial! 👏
@PikoCanFly
2 ай бұрын
Glad you like it! 😃
I like it. I am trying to make one of these for myself and now I am definitely going to build in an Overlay mode. thank you.
@PikoCanFly
3 ай бұрын
Glad you like it! Happy coding! ☺
Thank you so much for sharing you skills on Electron JS. It is really helpful because there only few electron tutorials in youtube. Off-topic. I have a running local browser-app using react js. Can I transfer the components into electron js? Thanks!
@PikoCanFly
3 ай бұрын
Yes you absolutely can transfer the components into electron js just create the app like in the tutorial then instead of creating the components for the timer-app just copy your app's components. Hope that helps!
@codery01
3 ай бұрын
@@PikoCanFly Thank you so much for the reply. I like you voice too. Happy coding and thank you again for continuing to share you skills
@PikoCanFly
3 ай бұрын
@@codery01 You are very welcome! Good luck with you app! 😊
Will the timer work even if app is minmized
@PikoCanFly
Ай бұрын
Yes
Tauri >>>>>>>>
@kaiparado
Ай бұрын
Tauri is pretty good!