Introduction

Welcome to Yapper: Yet Another Pet Project En Route! This book is a collection of pet project ideas. If you've ever found yourself staring at an empty GitHub repository, unsure of what to build next, this book is for you.

Why Work on Pet Projects?

Pet projects are the playgrounds of developers. They offer a low-pressure environment to experiment, learn, and create without deadlines, code reviews, or business constraints. Whether you're sharpening your skills, testing new concepts, or just having fun, pet projects are one of the best ways to grow as a programmer.

Here's why they matter:

• Learning by doing: Reading about a technology is one thing; using it in a real project is another. Pet projects bridge that gap.
• Building a portfolio: Employers and clients love to see what you can build. A strong GitHub history filled with interesting projects speaks louder than a resume.
• Exploring new ideas: Sometimes, the best way to test an idea is to build it. A small project might evolve into something bigger.
• Enjoying the process: Programming should be fun. Working on your own ideas, at your own pace, can be incredibly rewarding.

Each project comes with an explanation of the problem and key considerations. You're encouraged to modify and extend the ideas, making them truly your own.

So, let's start building!

About the book

Yapper is a collection of pet project ideas. It's for those moments when you want to build something but can't think of what.

Each project is self-contained and can be finished in a few hours to a few days, depending on your experience. The ideas range from simple CLI tools to small web apps. Pick one that sounds interesting, use whatever language or framework you like, and start building.

This isn't a tutorial. There's no step-by-step guide. Just ideas and some context to get you started.

About the author

Hi, I'm Vince Varga. I'm a software engineer with over 10 years of experience. By day, I build mobile apps with Flutter. In my free time, I tinker with Rust.

I enjoy learning new tools, exploring different programming languages, and working on small projects that help me understand how things work. This book is a collection of project ideas I've gathered over time, perfect for when you want to build something but don't know what.

You can find more about me at vincevarga.dev.

TodoMVC

What is it?

A todo list app. You add tasks, mark them as done, and delete them when you're finished. Simple.

TodoMVC is a classic in the web development world. The TodoMVC project has been around for over a decade, offering the same todo app implemented in dozens of JavaScript frameworks. It's used to compare frameworks, appears in browser benchmarks, and has become the "hello world" of frontend development.

If you're learning a new framework or language, this is often the first real project people recommend. And for good reason: it's small enough to finish in a day, but complex enough to touch most of the basics.

Why build this?

• You'll learn how to manage state (a list of items that changes over time)
• You'll practice handling user input (adding, editing, deleting)
• You'll work with the DOM or your framework's way of rendering UI
• You'll think about data persistence (where do the todos go when you refresh?)

Core features

Here's what a basic TodoMVC app should do:

1. Add a todo by typing in an input field and pressing Enter
2. Mark a todo as complete by clicking a checkbox
3. Delete a todo by clicking a remove button
4. Edit a todo by double-clicking on it
5. Filter todos by status: All, Active, Completed
6. Clear all completed todos with a single button
7. Show the count of remaining items

Things to think about

• Where do you store the todos? In memory? LocalStorage? A database?
• What happens when you refresh the page?
• How do you handle empty states (no todos yet, no completed todos)?
• Can you add keyboard shortcuts?

Take it further

Once you have the basics working, here are some ways to extend the project:

Reference

The official TodoMVC project has implementations in React, Vue, Angular, Svelte, and many more. Check out todomvc.com if you want to see how others have solved this problem, or use their app spec as a reference.

Your Life in Weeks

This project visualizes a human lifespan as a grid of weeks. The idea comes from the concept that an average human life (assuming 80 years) consists of about 4,160 weeks. By representing each week as a small square, we create a visual reminder of how much time has passed and how much remains. This can be a great motivational tool for setting goals and reflecting on life's priorities.

Calculator

StarButts

Cross-Platform Calculator

TodoMVC

What is it?

A todo list app. You add tasks, mark them as done, and delete them when you're finished. Simple.

TodoMVC is a classic in the web development world. The TodoMVC project has been around for over a decade, offering the same todo app implemented in dozens of JavaScript frameworks. It's used to compare frameworks, appears in browser benchmarks, and has become the "hello world" of frontend development.

If you're learning a new framework or language, this is often the first real project people recommend. And for good reason: it's small enough to finish in a day, but complex enough to touch most of the basics.

Why build this?

• You'll learn how to manage state (a list of items that changes over time)
• You'll practice handling user input (adding, editing, deleting)
• You'll work with the DOM or your framework's way of rendering UI
• You'll think about data persistence (where do the todos go when you refresh?)

Core features

Here's what a basic TodoMVC app should do:

1. Add a todo by typing in an input field and pressing Enter
2. Mark a todo as complete by clicking a checkbox
3. Delete a todo by clicking a remove button
4. Edit a todo by double-clicking on it
5. Filter todos by status: All, Active, Completed
6. Clear all completed todos with a single button
7. Show the count of remaining items

Things to think about

• Where do you store the todos? In memory? LocalStorage? A database?
• What happens when you refresh the page?
• How do you handle empty states (no todos yet, no completed todos)?
• Can you add keyboard shortcuts?

Take it further

Once you have the basics working, here are some ways to extend the project:

Reference

The official TodoMVC project has implementations in React, Vue, Angular, Svelte, and many more. Check out todomvc.com if you want to see how others have solved this problem, or use their app spec as a reference.