Designing our application

It's very difficult to build a project when you're not sure precisely what you're building in the first place, right? When we talk about how to design, build, and plan an application, we need to talk about the problem we're ultimately trying to solve in the first place. With that in mind, let's talk about the theoretical vision for our application.

First off, we're going to build out a mixture between a pomodoro tracker and a to-do list. This will give us the functionality of a plain old to-do list, but also allow us to track time spent on each item as we go through the list. We'll keep the overall design of this application pretty simple; there's no reason to dive into a giant application. A relatively small and simple application will teach you all you need to get started quickly with Create React App.

This chapter is also going to be the only chapter that's really only focused on the React side of things and less on Create React App. Being able to get started with any tool is essentially useless if you don't know how to build something after you get up and moving, so that is what this chapter is designed to help you solve.

Our application will have a simple to-do interface with a Mark As Done button for each. For each item, you'll be able to mark the item as complete after you add it and it will change the display of that item to let you know it's done. There's not really anything particularly fancy going on, just a very simple application design. Let's take a look at what the design for this might look like (at a very high level):