Building a Desktop App with Electron JS and React JS [ Timer Overlay ] | A Step-by-step Tutorial

⏰ Chapters:

00:00 - Introduction: What We’ll Make
00:30 - App Demo
01:12 - Create Project Directory
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:

#ElectronJS
#reactjs
#javascript
#nodejs
#DesktopAppDevelopment
#CodingTutorial
#WebDevelopment
#TailwindCSS
#ProgrammingTips
#SoftwareDevelopment
#GUI

[PikoCanFly]

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! 😊

[friendlyalien-joys]

Amazing amazing amazing Thank you so much for making this! Thanks to you I can now build apps with Electron! 😀

[serhiikichuk]

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!

[mohammed.haydar]

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

[Shauryacious]

just completed the whole video, was watching it in 2x, abd its so good, thanks <3

[kokomugi]

Thanks Piko, learned a lot about Electronjs while following this tutorial

[kaiparado]

Thank you for share your time/knowledge with us, God bless you

[HAverroes]

Thanks for this original and unique project! Amazing tutorial! 👏

[ihaddox]

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.

[trustn]

I saw and heard this beauty and forgot why I started watching the video. thanks anyway😵‍💫

[HaiTran-vgbj]

Can you share the repo link so we can refer to it, thanks

[emperorgaming]

i have a white screend app after installation can anyone help me please

[codery]

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!

[cfnbdod]

Will the timer work even if app is minmized

[Shauryacious]

hey there, really loved the tutorial, i want to create a electron app myself, but on the internet there is no source what so ever, it was really helpful, is there any way i can contact you personally?