Gratitude is a beautiful thing. Specially when it comes from someone who means a lot to you. I had this idea of having a way to put a smile on somebody's face in only two clicks. It shouldn't take a lot of time to say things like "great work on this!" and, to be honest, we can always use pick-me-ups for motivation to keep us moving forward.
One day, I was looking for open API's to mess around with and I stumbled upon an API to tell someone off, which was fun. But then it clicked - instead of telling someone off -
What if... we could have kudos... as a service?
And thus, https://kuaas.com/ was born.
The idea got stuck on my head - and it was there for weeks. I decided to create a github repository just to look at it and remind myself to come back to it and actually implement it.
A good friend of mine introduced me to Next.js a week prior to this. I was skeptical at first. I heard good things about it, but I had other way of doing things. Me, being a javascript enthusiast and a react advocate - decided to give it a try, and boy I can say that this was a turning point for me 🚀
In around 30 minutes I was up and running. And this is because of how amazingly well documented it is.
Okay, let's break down the days:
Day 1
Ready, set, go! 🏃♀️🏃♂️
I was very excited to actually start. Even though I work fulltime as a SE I still had enough motivation to keep me pushing through and work on this project during the week. First thing I did was to set up a new Notion page with all the things I wanted the app to have. From those - I actually just prioritized enough to have this working as an MVP. After filling the board with tasks and ideas - and my mug with some coffee - I decided it was time to actually work on some visual prototype. Since this was all about experimentation I decided to go with something new for CSS. I ended up picking Tailwind as it had everything I was looking for to setup things quickly and start building my UI.
This is a screenshot from what that initial design looked like:
From this moment on - I was full on coding 💻
I knew that I didn't just want to have this working as a web app, I also wanted to expose an API. And Nextjs had just the thing for that: SWR.
API implementation
So for a v1 or MVP I wanted to keep it very simple. You send in a name, and a subject to give kudos about. The service will then map your subject to a random message add in the name, and send it back.
But hey, heres a little secret. I love gifs
Then it hit me. Let's integrate this with the GIPHY API! I set up for a dev account and got my API key. Tried a couple methods and then realized that they actually had a random method. I 👏 got 👏 so 👏 happy. This is just what I wanted. See, the idea behind the app is not to include a custom curated message (which I actually later implemented) but the fact that in two clicks you could send a random message along with a Gif to someone. And randomness actually helps on this. It takes out the time you dedicate to select the perfect gif and the perfect message. Okay, back to the API. So now I had this GIPHY integration and I was able to send back a random kudos message based on a subject along with a gif. Yay! but hey - I thought - maybe you do want to customize the message a bit and also select what filter to use to retrieve the gif you want. So I went ahead and implemented a way to send a custom message and also send in a filter for the gif.
UI implementation
I decided to stay true to my original "design" (I'm sorry to all the designers reading/looking at this. I did my best, I don't know how you guys make things look so good - here's to you 🍷) and just base all the app on this one centered card. This was pretty straight forward - I just looked up the Tailwind docs and started playing around with utility classes until my UI looked someone acceptable.
UI and API integration
Remember about SWR? Well this is the part where I implemented it that. And, no joke - it worked on the first try. This was amazing. I was able to fetch remotely the API I had defined.
And thus - concludes day 1.
Day 2
Building upon the MVP.
Okay - I already had a UI, my API and the GIPHY integration, so this day I was pretty chill. I actually just did some minor refactoring, and some UI tweaks here and there. I also added a footer in there. Git commit
That was actually it for day 2. I decided to get some sleep and tackle other things tomorrow.
Day 3
This day was pretty interesting! I was very inspired and decided to actually do something most people begin with. Buy a domain! 😅
Turns out Vercel allows you to buy a domain through their platform. And then you just assign it to a project and that's it! You now have your project deployed on your domain.
Now, I had some things in mind for today since by the end of the day I was actually gonna be sending this to friends to try it. So we can count this as the "last day"
Google Analytics Integration
Since I added a domain, I actually wanted to get some analytics in there also. So I integrated GA in there Git commit
After playing around with NordVPN I realized it was working properly. Yay!
Interaction
I felt like something was lacking. Something like:
👉 A go back button/link
👉 A copy url to clipboard button/link
👉 Share on social media buttons/links
The first two were actually pretty straight forward to implement. Its the third one where I was a bit lost and really struck gold when I found react-share
And this was it. I had a fully functional MVP that I was happy with 😊
Last thing I did was add some basic docs on how to consume /api/v1 from an external service.
Finally deployed that through Vercel, and saw my app live. It was pretty amazing seeing people actually go in there and send each other URLs with kudos messages.
Day 4
Went out for drinks with friends to celebrate! 🍻
disclaimer: COVID-19 Lockdown is being lifted in Spain. Stay safe, please!
Day 5
Write a dev.to post on how excited you are about actually concluding this intense but rewarding week.
Thank you so much for taking the time to read. Every bit of feedback helps! 🙏
Also, if you feel like contributing and/or opening issues you're more than welcome!
👉 Repo
Stay awesome 💜
Top comments (0)