Earlier, I mentioned that I made two apps for my family. The first is Typing for Kids which I made for my two oldest children, the second is Repeat Todo which I made for my wife.

Today I want to briefly talk about how I went about creating these apps as a way to reiterate how awesome it is to build for the web these days.

Typing for Kids ⌨️

I'll start with Typing for Kids because it's a fair amount simpler. I built it because my kids often like to borrow my laptop to type like they see daddy doing. The problem is my keyboard's repeat rate is set really fast, so they have a hard time pressing the key fast enough to avoid the key repeating many times. So the experience isn't altogether awesome. So I built typing for kids to help them learn where the keys are on the keyboard and make it a more enjoyable experience for them.

First off, my kids love it. So it's a super success. Also, it's only 3 files. It doesn't use redux or even react-router. In fact, all the state lives in the top-level component. Here's the entire component tree:

You'll notice there are only 3 components. It's a ridiculously simple app. It depends on react, react-dom and animate.css. I have a component to make integrating with animate.css a little easier.

Another thing you'll find interesting is that I built the ENTIRE thing solely in CodeSandbox.io! I never downloaded the source code once. I used CodeSandbox's new GitHub integration feature to create the repository, then their GitHub import feature any time I wanted to start working on it again. This is pretty amazing I think!

To get it deployed, I used the amazing Netlify. They have super GitHub integration as well which meant I didn't need to download anything for that part either.

On top of that, because codesandbox's react template uses create-react-app, I could leverage the service worker that the react-scripts build creates for me so this thing works totally offline. I also added a manifest.json so when I pulled it up on my kids Chromebook I could add it directly to the desktop like an installed app! So cool!

Repeat Todo ✅

A while back I created repeat todo for my wife because she wanted an app where she could rotate chores/meals etc. Here's a quick demo of the new version of the app to get an idea of what it's useful for:

It was awesome, but pretty limited because it uses local storage which means you can only enter in the items on the device you'll use it on and if you get a new device all the data is totally lost.

For a while I've been meaning to make an authenticated version with Firebase as an authentication/storage provider to solve these problems, so I decided to do that for her Christmas present.

Amazingly, I was able to build this just like the Typing for Kids app. 100% in the browser without having to download anything.

This app is a little more complicated. Despite that it still doesn't use react-router or redux. It's a pretty simple app, and that's the beauty of it I think. I did make a few more components via glamorous to make things visually consistent and separate the styling components from the rest of the components. I also created a few render prop components for the firebase authentication and data stuff.

You can find most of the interesting stuff in the index.js file. I think the thing that made it the most complicated is that Firebase doesn't work super well with arrays and because order mattered (things will one day be resortable by the user, open issue, help wanted), I had to store it as an object and manually keep the order values correct.

All-in-all it was a pretty fun experience and because firebase works so well offline, this app can also leverage the service worker that react-scripts gives me and can be an installable PWA on Android phones which I think is pretty neat.

Conclusion

What I love about this is how our tools have leveled the playing field. All of these tools are 100% free so long as you have access to a computer with internet access. Even if that computer is not yours, you don't have to download anything, but you can still build amazing applications right in the browser and it's not a terrible experience. It's a wonderful experience. The reason I didn't download anything wasn't because I was trying to see if I could avoid it. It was because I couldn't think of a reason why I'd really want to.

Another thing that I think you can take away from this is that as I built these things, I learned stuff. I think that building things should be the way you decide what to learn. Constantly consuming content just because it's out there is fine, but it's hard to put it into context. If you're in the midst of building something, it'll be a lot more valuable to you and stick much better.

So try to identify a real (small) problem that you or your loved ones are facing and build something to solve that problem. You'll learn a bunch!

I hope this is helpful! Good luck!👍