🕒 Work Faster – A Cute Pomodoro Timer App with React + Electron

Hi, I’m Su Lei! 👋
In this beginner-friendly tutorial, I’ll guide you step by step through building a cute and simple Pomodoro-style timer app using React. Then, we’ll wrap it with Electron.js so you can run it as a real desktop application! 🖥️

Don’t worry if you’re new to all this—we’ll take it slow and make it fun!

---

🚀 What You’ll Learn

• ✅ How to create a React app with TypeScript
• ✅ How to integrate Electron for a desktop experience
• ✅ How to test and build your app locally
• ✅ How to keep your project clean and organized

---

🧰 Prerequisites

• Node.js installed
  (It comes with npx, which we’ll use to create the project)

---

🛠️ Step-by-Step Guide

1. Create Your React App

Open your terminal and run:

npx create-react-app work-faster --template typescript

This creates a new folder called work-faster with a pre-configured React + TypeScript setup. Then move into your new project folder:

cd work-faster

2. Install Electron

Still inside the project folder, run:

npm install --save-dev electron

3. Test the React App

Before we wire up Electron, make sure React works:

npm run start

This should open the app in your browser at http://localhost:3000

🎉 If you see the React welcome screen, you're all set!