My learning from building a calculator in a day using ReactJS

So I built a tiny calculator this Saturday. Why a calculator? Why in a day?

Sadly I enjoy procrastinating and dragging my side projects to days when they can be completed in a day or two and so I thought of setting up a strict timeline and start with a small project. It's less pressure to build a small project and you can later on scale it.

I also wanted to use this project to learn something new and document it, hence this article.

Let's start with the design:

Here's what I wanted to achieve:

Screenshot from 2021-03-07 23-55-03.png

Here's what I achieved:

Screenshot from 2021-03-08 00-08-52.png

Also, the calculator works so yayyyy!

Now I am not here to talk about the code behind building this calculator. You can find the code here. I want to use this space to talk about the learning and mistakes I made while building it. So here it goes:

Learning

  • Hooks: Checked - I can finally make sense of Hooks, watched a few videos and implemented it. Gives me more confidence using it in bigger projects plus now I understand better how they offer an alternative to class based components.
  • Grids: Checked - I used grids for the first time in any of my projects. I was scared of using it at first since I am very comfortable with Flexbox but not anymore. Talk about getting out of comfort zones. Phew!
  • Set up tiny and specific goals - For this project, I added goals like "create buttons for numbers" and gave myself a realistic time of 30 mins. It worked! So I created 10 more teeny-tiny goals and chased them one after the other. By the time I was done with the goals, I had the calculator in front of me.
  • List down the bugs/issues - I found a lot of bugs while building the calculator. Duh! I should have listed them down in a notepad or on a piece of paper before I forgot about a few of them. Even better is tracking those issues in github issues. This way your project code and relevant issues would be in one place and easy to track.

Well that's about it. I am hoping to build several small projects like this.

My comment section is open to your feedback. If you want to chat over twitter, you can find me here.

Until Next time!