Luciano Mammino 💛 Node.js
+ Your AuthorsArchive @loige I tweet about Cloud Web development, #Nodejs & #JavaScript. I am co-author of & maintainer of Oct. 13, 2020 2 min read

#MVPin7Days DAY 2

Today I built the vertical slice that allows a user to specify and persist their affiliate tag for all the different Amazon stores.

For today, let's start with the video DEMO:

(Sorry for the small resolution/font size 😰)

What I am doing there is just updating some of the referral codes I have previously defined and adding new ones.

The Amazon stores are divided into 2 groups. Only the ones that currently support affiliate programs are visualized by default.

You can expand the list to see all the stores and add a referral code for those as well (this makes the system somewhat future-ready).

To prove I am actually persisting to the database I am updating some data from Postgres and refreshing the app. 😜

Setting all of this up was more time consuming than I anticipated and it required:

- Setting up a local Postgres with Docker
- Managing DB schemas and migrations (w Knex)
- Configuring the backend to connect to pg (using fastify-postgres)

The backend APIs do validations and serialization out of the box thanks to Fastify schemas.

The Auth0 token validation was done with `fastify-auth0-verify` which was super sleek to setup ✌️

The UI is built in React using hooks. I kinda forced myself to go through this path and had a bit of a bumpy road with some useEffect nuances, but in the end, I am happy with the result.

It was especially fun to deal with the state transitions between "clean", "changed", "valid/invalid", "saving" in the form. This is currently done only using `useState` and `useEffect`. No state management involved (yet!).

All the API calls are done using pure fetch and, in dev mode, I am using `fastify-cors` to add CORS support and be able to run Webpack dev server for the frontend on a different port than my Fastify server.

I didn't manage to deploy to AWS as I was hoping to do today, but I managed to dockerize the app (both frontend and backend run in 1 container). It should be feasible to move this to #AWS tomorrow (either #Fargate or a barebone EC2 w/ docker)

Other than that, I hope tomorrow I will be able to start the vertical slice that allows the user to create a referral link.

Stay tuned for the update tomorrow 🙌

Thanks for following my progress so far 😍

🎸 #SOUNDTRACK of the day 🎺 

You can follow @loige.


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