The App
Recently I found a website that offers random challenges so you can upskill your frontend game. The challenge that I wanted to do is the Tip Calculator.
The logic behind it is pretty simple, enter some inputs to calculate the amount and tip each person has to pay.
Click here to see the code.
Weapons of choice
- Next JS - After building some applications with Gatsby, I wanted to give this a go as it's highly rated and constantly being worked on
- Redux - Good way to manage state, don't have to worry much about prop passing
- Tailwind CSS - Utility based CSS framework, makes it super easy to try many different properties as the design is just a jpg
- Vercel - After using Netlify, I wanted to try it out to see the deployment process
What I learnt
Next JS is absolutely brilliant. As soon as I would make a change, it would instantly update. While Gatsby is good, I would often get frustrated as it's much slower and would randomly stop working.
I did run into a few issues like the client and server mismatches and window is undefined but that's because Next JS renders the app both on the server and client levels. I don't think it matters too much as it's more of a local issue rather than production.
Just getting to use Next JS was the main goal for me and now I'll be creating more applications using it in the near future.
Vercel was incredibly easy to use, it took me less than 3 minutes to deploy the app! Also has a nice user experience.
Challenges
The only challenges I ran into were extending the application. The challenge is just copy this design but I also wanted to add more like validation, length checking and local storage. Adding the redux-localstorage-simple became an issue as it simply didn't work. But this was because the redux debugger was overwriting it. Through trial and error I was able to overcome this.