Welcome to the Timer App Tutorial, where you'll build a simple yet powerful time-tracking app inspired by tools like Toggl. You'll use React, Redux Toolkit, and modern JavaScript to manage timers, track elapsed time, and enhance your frontend skills.
By the end, you'll have:
- ⏳ A working timer system
- 🎛️ Redux-managed state for timer control
- 🎨 Styled UI components
- 🧠 Knowledge of React patterns, Redux slices, and time-based logic
Each lesson is structured to focus on a single concept or implementation step. You'll find clear examples, AI prompts, and stretch goals to deepen your understanding.
| Step | Title | Description |
|---|---|---|
| P00 | Introduction | Overview of what you'll build and learn |
| P01 | Getting Started | Set up your React project |
| P02 | Timer Object | Define how timers are structured |
| P03 | Setup Redux Toolkit | Add Redux Toolkit to manage state |
| P04 | Setup Redux Provider | Wrap your app in Redux <Provider> |
| P05 | Create New Timers | Build functionality to start a timer |
| P06 | List Timers | Display a list of active timers |
| P07 | Timer View | Build a reusable Timer component |
| P08 | Keeping Time | Handle real-time updates with intervals |
| P09 | Adding Styles | Improve the look and feel of the app |
| P10 | Stretch Goals | Bonus challenges and extensions |
| P11 | Final Thoughts | Reflect and go beyond |
Throughout this tutorial you'll find:
- 💡 AI Prompts – Suggestions to help you ask the right questions
- ✅ Code Checkpoints – Validate that you're on track
- 🔧 Stretch Goals – Ideas to deepen your learning
Begin with P00 - Introduction and follow each step at your own pace. You can build the entire app or skip around based on what you need to practice.
Happy coding! 🎉