DEV Community: Alfredo Narváez Docimo

Here's how Next.js helped me build and deploy an MVP in a week

Alfredo Narváez Docimo — Fri, 05 Jun 2020 12:39:48 +0000

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

Git commit

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

Git commit

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

Git commit

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!

👉 Contributing

👉 Repo

Stay awesome 💜

Unit testing & integration explained with math functions

Alfredo Narváez Docimo — Sat, 16 May 2020 20:31:41 +0000

In this quick post, I hope to explain with some common math abstraction how I perceive Unit testing and Integration testing.

Disclaimer: This is post is only meant to provide the notions behind testing, is not meant to be an in-depth testing explanation 😛

Okay, you must be asking yourself, why? I mean, not all coding is created equal, and let's be honest - you don't really need to understand math to code. However, I do believe that - and this comes from someone who flunked calculus and algebra numerous times in college - math is fascinating and a great tool to explain concepts in a simple manner.

First of all - what is a function? 📦

A function is a process or a relation that associates each element x of a set X, the domain of the function, to a single element y of another set Y

I can't find a better definition than to look at it as a black box. A function is a black box that, when given a value, will return something else.

Reference: Wikipedia

Okay, cool - that's as much math as you need to know for what's next!

So here's the thing, we want to test functions. We want to make sure they return the correct value each time they're called. We have this first function f(x) which returns the given number x plus one. Then, we have g(x, y) which does a bit more, it returns the sum of x plus the result of f(y).

What's going on here? we have one function f(x) that we can test by itself as it has no dependency on another function. This is what we can consider something that can be tested as a unit.

Then, there's another function g(x, y) which implements f(x). It needs f(x) to produce a value. It is directly dependant and therefore needs this other function to live. Nothing like a math love story. 💙

Coding the functions 💻

So in order to actually test this, we would have to, you know, code these functions. You can use your language of choice but as the JavaScript fan I am, I highly encourage you to use js 💛

So for both functions, we will end up having something like this:

Getting into the tests 🧪️

Now that we have coded our functions, we want to test this first function f(x) and make sure that it returns the correct value for x = 1

We also want to test that g(x, y) returns a correct value for x = 2 ; y = 1

I will be using Jest for these examples, if you still don't know about Jest, give it a shot, it's an amazing testing framework for js!

So for the following test suite We will be expecting that when we call these functions with the params described above, they should actually return what we expect.

One thing to highlight here is that by testing g(x, y) we are implicitly testing f(x).

Mocking 🃏

Can we test g(x, y) as a unit? Up until now we now that g(x, y) depends on f(x), so its result will be bound to the result of f(x).

...or will it? 🤔

Mock is a very interesting concept when it comes to testing. For some controversial, for some a helpful tool. I am not here to discuss this, but rather give you the notion of what mocking is, and how we could use it to test g(x, y) without any dependencies.

With mocking you can override, substitute, manage things that should be out of your control. In this example, because of how g(x, y) is built, we should not be able to look inside our black box and replace f(x) with something else.

This is where mocking comes in. In an uncontrolled environment, it allows you to open up the black box and substitute parts of how the system behaves to your will.

It would be the equivalent to doing something like this:

Now, because we have tampered with g(x, y)'s black box, it will produce a new output.

Compare that to the example above, in which we don't have access to the black box

These are not equal scenarios, hence why researching how to mock properly is something worth investing some time in!

So then - can we test g(x, y) in isolation? as a unit?

Yes! - Jest offers a lot of functionality for mocking

⚠️ Should you test g(x, y) in isolation?

It depends - are you testing edge cases? is f(x) an external dependency out of your control? There are a lot of things to keep in mind before mocking.

So that's it! A basic introduction to testing explained with math functions.

Hope you liked this post - keep hacking! 🔥

DEV Community: Alfredo Narváez Docimo

Here's how Next.js helped me build and deploy an MVP in a week

What if... we could have kudos... as a service?

Day 1

API implementation

UI implementation

UI and API integration

Day 2

Day 3

Google Analytics Integration

Interaction

Day 4

Day 5

Unit testing & integration explained with math functions

First of all - what is a function? 📦

Coding the functions 💻

Getting into the tests 🧪️

Mocking 🃏