Hey, making a game with Next Js was pretty fun, and the best part is I struggled less. I was wandering around with some Ruby On Rails project, and suddenly my brother appeared with his extraordinary idea.
He is a 14 years old kid, who plays Minecraft, and he loves doing it. I was just traveling towards his room and I got to know he wants a feature to be added to a web app he uses to increase his Minecraft PVP skills.
Yes, I developed an already existing idea but with two additional features. You may call it copying, but I call it modification.
After knowing the rough idea about the web app, I asked myself, can I do it with Vanilla Javascript? and the answer was ‘yes’!Again I asked myself, can I develop this app within three days with Vanilla Javascript? and the answer was ‘umm, probably not!’
Finally, I thought ‘I can develop this in three days with Next Js’, and I stayed firm with it.
Before starting to develop, I searched for the a relating domain name for the idea, and fortunately, it was available which got me super excited. And that excitement forced me to develop the idea.
I thought of using Next Js along with Tailwind CSS, plain CSS, FontAwesome, and some custom SVG icons.
I started a NextJs project. As I have said I can’t live with React JS nowadays and lemme be honest, that came to be true.
The Idea
The idea was to build a web app that can count clicking speed, and the CPS of the player. CPS [click per second] is a quantity to measure the click strokes of mouse or keyboard keys done by the user.
Hooray, development is finished
So, after three days I developed the web app, and it still had some glitches, because I was using setInterval, and the states changes were annoyingly executing the setInterval. Finally, I fixed it using a custom hook called useInterval
Finally, the deployment
For deployment, I have used AWS Lightsail for my previous full-stack NextJs web apps, but this time the situation is different. The web app was slight full-stack in a technical sense that it uses dynamic rendering, and getServerSideProps, but in a functional sense, it was just a frontend-only web app.
So, I decided to use AWS Amplify; I linked my GitHub with Amplify, attached the repo with it, and it was on the web with a domain called speedclicking.com
The best thing about Amplify is you just have to test your web app in your local environment and do the git pushcommand, and after the pushing, it automatically deploys the web app.
And same is the worst thing, it costs money(0.01$ / build) on each deployment. So, I suggest you to create two git branches, one called main [for amplify] and another called development for the developing stage of the web app.
Happy Ending
The conclusion is that you can develop apps with NextJs and Tailwind CSS pretty fast. You should learn it, ’cause it’s a good skill that might put some bread in your mouth or some dopamine in your brain.
Have a great day!
Top comments (0)