North South Roadlines

Stack: NextJS, TypeScript, React, Supabase

For this one, I went through the following roadblocks:

• Avoid use of the `Image` component in NextJS. Their component surrounds the image tag in spans which makes life difficult for people who like to make granular styling changes. I am one of those people and so, I am going to steer away from this. I'll be using the image tag with a wrapper of a `Picture` tag. Here are a couple of links that can help understand this problem: https://www.peterlunch.com/snippets/next-image-styling and https://nextjs.org/docs/basic-features/image-optimization
• Use of the wbr tag: Had to break the word 'roadlines' in two parts to be able to render it properly on mobile screens. Different solutions like `word-break` and `word-wrap`, etc. are available but the best one in this case was `wbr`. Something that just simply works! Also, need to remember to make it a self-closing tag.
• Using global modular classes or utility classes is simple. Simply use them like this: <tagName className="hindiText"> I was banging my head trying to make it work using `styles.hindiText` but this was defined in global css file and all I had to do was reference it just like that since my _app.ts file already imported it. This was awesome: https://www.smashingmagazine.com/2021/07/global-local-styling-nextjs/
• FontAwesome caused this error: `Argument of type IconPack is not assignable to parameter of type IconDefinitionOrPack`. I used this comment here to https://github.com/FortAwesome/angular-fontawesome/issues/125#issuecomment-538398777 resolve the issue. I have added fontawesome common types to package-lock.json. I should stop using both npm and yarn to build things.