Luciano Mammino 💛 Node.js
+ Your AuthorsArchive @loige I tweet about Cloud Web development, #Nodejs & #JavaScript. I am co-author of nodejsdp.link/buy & maintainer of fstack.link/ Oct. 16, 2020 3 min read

#MVPin7Days DAY 5

Today I finished the vertical slice that allows a user to create an affiliate link for an #Amazon product! 🙌

The UI is still crap and there are a bunch of edge cases that I am managing very poorly, but hey, releasing something is the FIRST STEP forward! 🥾

Speaking of "releasing", all my progress has been deployed at:

➡️  https://app.linkerflix.com  ⬅️

Feel more than welcome to play with it and break it! 🔨

I already said that the UX is terrible, so please don't complain without providing some constructive piece of feedback 😛

Before getting into the "technicalities", let's see a quick demo of what I today.

Let's go! 😎

As you can see from the video, now the "create link" flow is somewhat complete.

This allows a user to:

1. Input an Amazon product id (or a product URL)
2. Get a preview of the product
3. Be able to customize the targets (links for given countries)
4. Get a unique short URL

Step 3 is now hidden by default and can be expanded if needed. I expect most users wouldn't need to customize the targets, but I'll test this assumption with users at some point.

I still have to implement the URL redirect functionality, so the short URL DOES NOT WORK (YET!)

I won't commit my weekend full time, so the next 2 days of this experiment would be somewhat "best-effort".

If I will manage to spend some time on this project, I will try to implement the backend for the short URLs and present my updates here! 🤗

Now let's get into the technicalities! 👨‍💻

Most of my morning I struggled with testing the URL scraper for Amazon products. I did find and fix a bunch of edge cases... but there is still one that I intentionally left aside as it would require a significant amount of work!

Then, I implemented the database schema and the backend logic to be able to save a link after seeing the preview.

This wasn't hard and I was progressing quickly until I stepped into the rabbit hole of reading about all the different ways/libraries for generating short URL IDs😅

On this topic, I found this 😎AWESOME resource:  https://github.com/grantcarthew/awesome-unique-id 

In the end, I picked  https://github.com/lukeed/uid  because it seems a reasonable tradeoff between simple to use and performant (definitely way more than enough for my current scope!)

Once I got this done, I started adding the UI logic to my "new link page" and... It got messy very very quickly! 😵

The main component was doing too much and the code was getting more and more entangled.

At this point, it was time for some refactoring!

I didn't want to invest too much time on this (this is not production code after all), but at the same time, I wanted to get to something manageable so that I could complete the feature without going crazy... 🤷

I was tempted to introduce #Redux, because I was essentially struggling with keeping track of state and state changes.

Luckily, I realized that I could probably give the `useReducer` hook a try before going full-in redux!

 https://reactjs.org/docs/hooks-reference.html#usereducer 

UseReducer was very easy to set up for me and I was able to migrate incrementally without breaking the UI and without having to introduce a new dependency on the frontend.

So I am quite happy with this, probably the biggest learning of the day! 🤩

I haven't written any unit test (yet), but I feel that just by using `useReducer` this code is now much much easier to test, at least for what concerns the various state transitions!

And yes, state transitions are probably the bulk of the business logic here!

... and that's all for today, folks!

Again, I hope you are enjoying these updates.

I'll try to post something on Sunday to summarize any progress done during the weekend and any plan for the future!

STAY TUNED ✌️

🎧 SOUNDTRACK OF THE DAY:  https://open.spotify.com/playlist/37i9dQZF1E8MXjq3uAkAXm?si=Bwe8NIe5Qy2YgyBj8qw2FA 

compile


You can follow @loige.



Bookmark

____
Tip: mention @threader_app on a Twitter thread with the keyword “compile” to get a link to it.

Enjoy Threader? Sign up.

Since you’re here...

... we’re asking visitors like you to make a contribution to support this independent project. In these uncertain times, access to information is vital. Threader gets 1,000,000+ visits a month and our iOS Twitter client was featured as an App of the Day by Apple. Your financial support will help two developers to keep working on this app. Everyone’s contribution, big or small, is so valuable. Support Threader by becoming premium or by donating on PayPal. Thank you.


Follow Threader