I created my first React app at age 17.
Here’s how… and why.
My name is Jackson Hayes. A little about myself: I’m a 17 year old high school student in a little town called Flagstaff, Arizona. I’m best known as a photographer and cinematographer. I have my own YouTube channel, where I regularly post videos covering tech.
But when I’m not shooting video or taking photos, I’m… coding. I know, I know, it’s a weird hobby for a cinematographer, but for some reason, I really enjoy it. Being able to have an idea for an app and turn it into a real product with code really excites me. I began programming back when I was 11, but I began to more seriously pursue it at age 16. I built a bunch of websites then, most notably XDA Labs, Action Launcher, and 5217 Web (by Francisco Franco).
But most of those websites (with the exception of XDA Labs) were primarily built with pure HTML, CSS, and JS. I had heard about front-end frameworks, such as React, Vue, or Angular, but I had never quite understood what they were used for or how they worked. So, I decided to pick one up and learn it. I chose React, as it is highly valued in the frontend industry, and I knew it could aid me in landing a job someday. Codecademy was an awesome resource for learning React, as they had a very understandable course that guided me in learning the basics of the framework.
From there, I decided to build a notes app (how original!). As it turns out, that’s quite difficult, what with trying to support images, special formatting, etc. So, I put that project to the side for the time being and turned my attention to something more approachable.
And I built Simplicity.
What is Simplicity, and why did I build it?
The idea for Simplicity came when I got a summer job, and I began to receive my paycheck bi-weekly. I use an awesome app called YNAB which allows me to keep track of where my money is and budget properly. One neat feature of YNAB is that you can split transactions.
For example, you can split your paycheck up into different categories, such as Savings, Tithing, and Spending, etc. However, the calculation has to be manual, it (currently) isn’t possible to automatically allocate 10% to the Savings category, for example. And while I could punch the calculator to get these numbers, I didn’t want to… and I realized that this was the perfect first app to build using my newfound React skills.
The idea was straightforward. It would take a sum, and then split up that amount into little categories, each of which would be completely customizable. There wasn’t any complicated logic that I might have trouble with. Thus, it felt like the perfect app to build.
How did I build it?
Warning, this gets a tad technical 😇
First, I designed the UI. While I know that perfecting the UI isn’t necessarily a first-step task, I’m a very visual person: I love good UI. So, I opened Figma and got to work. I decided to take a very trendy design approach to the product, and in about an hour I came up with something that I felt quite happy with.
The time had come to roll up my sleeves and get to work.
To get started, I created the new project using
create-react-app. Because I had (kinda) built the notes app a little while ago, I had a good idea for how the app would be structured. The core data would be stored in the
state of the top-most component, and it would hand down data in the form of
props to the various child components as needed. Some of those child components (the cards, for instance) would pass data back up to the managing component when necessary (such as the user-entered percentages).
Styling the components was extremely easy thanks to Figma’s auto-generated CSS. Thus, a lot of the styling was simply a cut-and-paste job, although there was still plenty that needed to be tweaked. Making the interface responsive was a whole different beast, however.
One feature that I knew would be necessary was the persistence of the budget category cards. It would be a real pain if every time the website reloaded, the user had to recreate all the categories again. So, I used
localStorage (yes, not the greatest or performant API, but this app isn't being deployed in any serious fashion, so I didn't worry about it). The app is also a PWA, so the entire app, including the category data, persists offline & from refresh to refresh!
The app was pretty much done… until I tried loading it on Safari, and my gosh what a pain that browser is. In Chrome and Firefox, Simplicity looked fine, but Safari’s default CSS stylesheet screws everything up so much, it’s ridiculous. Plus, different things are broken depending on if you’re looking at iOS’s variant of Safari or macOS’s Safari. That said, I was able to fix all the issues.
In order to make it easier for me, I decided to implement a CI build system, Travis-CI, to automatically create a production build whenever I tag a new release.
Building all of this took me a while, as I was still putting most of my energy towards my YouTube channel, but I’m happy to say that Simplicity is finally ready for it’s v1.0 release!
As I was writing this article, I realized that I still didn’t have an icon, which was a serious problem. However, after I posted on Twitter about my predicament, a talented designer named Janina Espiritu stepped up and designed a fantastic icon for Simplicity. Huge thanks to her, as without her icon Simplicity would have been pretty boring.
And this, ladies and gentlemen, is the finished product:
How to use Simplicity
Using the app is fairly straightforward. Simply edit the total budget amount at the top of the app, and then create categories as needed with the little “plus” button. You can easily copy the calculated amounts (to paste in another app, such as YNAB) by clicking on them.
There’s still a few things about the app that I’d like to improve, such as adding the ability to delete category cards, but that will have to wait until the next version. That said, I’m quite happy with how the app turned out for v1.0.
Personally, I’m going to keep learning and keep growing my skills as a web developer. I hope to get an internship as a front-end developer sometime this year, although that may be a bit optimistic. Yes, I’m a cinematographer and photographer, but I still love the process of web development, and I’m going to continue to pursue it.
If you’re a company looking for a junior front-end developer intern, feel free to reach out to me at
jackson h visuals (at) gmail dot com.
Thanks for reading!