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. 15, 2020 2 min read

#MVPin7Days DAY 4

Today I implemented about 70% of the create link feature.

This feature will allow a user to create a custom #referral link for a product from #amazon stores.

Let's start with a quick demo of what I have implemented so far:

1, 2, 3... CLAP! 🎬

What happens here is that a user can enter an #Amazon ASIN (product ID) or a product URL from any Amazon store (in this case the ASIN will be automatically extracted from the URL).

Once the user clicks the save button, this will trigger a backend call.

On the backend, the API starts a scraper that searches for that ASIN in all the #Amazon stores.

If the ASIN does not exist in any store the user journey stops here.

If the ASIN exists in at least one store the user sees a preview of the product

For every #Amazon store, a link is shown to the User.

If the product exists in that store, the URL is the product page (exact match). Otherwise, it's a link to a search page for similar products.

Also, every link will have the user custom referral tag, of course! 💰

What I have left to implement is the ability to customize the generated targets, save the configuration and associate it to a unique short URL that can be shared by the user to monetize product recommendations on the web.

Completing this flow will be my focus for tomorrow. 💪

There is also work to do in terms of UI/UX.

For instance, I will probably make the target customisation step optional and hidden by default.

... And in terms of stability! Some products page will make the crawler crash right now... ooops! 😅

Some interesting easter eggs 🥚 I discovered about Amazon while working on this feature today:

- 404 pages show "random" dogs 🐕  https://blog.aboutamazon.com/working-at-amazon/how-much-does-amazon-love-dogs-just-ask-one-of-the-6-000-pups-that-work-here 

- Every #Amazon page has a little rubber duck hidden in the page #HTML 🦆

- There are some quite absurd products if you try "predictable" ASINs like 0123456789, AAAAAAAAAA or 0000000000

In terms of technical challenges, I haven't bumped into anything major today.

Except that crawling websites is always fun! It takes a lot of iterations to figure out how URLs, IDs & the HTML markup are structured.

You always end up bumping in a hell of a lot of edge cases! 🤯

One interesting trick, which may be obvious for more seasoned UI developers, is about managing state in cases like this where there is "slow" user feedback between multiple steps.

I was initially waiting for a full reload between changes on the UI.

Eventually, I figured out that I could speed up the design of the markup by saving a snapshot of the final state of the flow.

Then while designing the UI, I set that final state as the initial state of the page.

This trick allowed me to design the entire page without going through the full user flow and having to trigger the crawler over and over. 👨‍🎨

When I was happy with the design I just reset the initial state!

This is all for today! 🐣

I hope you are enjoying these posts and please do let me know if there is something you would like me to add or change in this format ✌️

⚡️ SOUNDTRACK OF THE DAY:  https://open.spotify.com/playlist/37i9dQZF1E8Eu4lXIOMJOu?si=aqxnZ5u8TfCs4jpl88eqjQ 


You can follow @loige.



Bookmark

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

Threader is an independent, ad-free project created by two developers. Our iOS Twitter client was featured as an App of the Day by Apple. Sign up today to compile, bookmark and archive your favorite threads.

Follow Threader