Chahal Pahal Tea
Stack: NextJS, TypeScript, React, Supabase
For this one, I picked up the following concepts:
- Styled Components
- Global Styles in NextJS
- For adding functional components, I could have created an interface for the type, but I am not reusing it, so it seemed weird. I have inlined the type declaration. This eliminates naming the prop types. This makes it looks repetitive. This tip comes from https://github.com/typescript-cheatsheets/react#reacttypescript-cheatsheets
- I could have made image a block element to cover that weird whitespace below it. Instead, to cover these descendors spacing, (the descendors are y, q, and other letters), I have made img vertical-align:bottom as stated here: https://stackoverflow.com/questions/7774814/remove-white-space-below-image
- Faced with "It looks like you're trying to use TypeScript but do not have the required package(s) installed.", I installed @types/node by running ` yarn add --dev @types/node`. Random error! Everything had worked till now, but suddenly, it stopped working today.
- 20-01-2022: Multiple TS errors! Most of them were type errors which resolved after matching correct types with the requirements. A big deployment error was "Error: supabaseUrl is required". I didn't remember that GitHub will not have my `.env.local` so the value will not be propagated to my vercel deployment. I had to manually copy the environment variables to vercel.
- 20-01-2022: Faced an interesting problem. Some data in the form was not being sent across with other data. Example, if the phone number was added, and the email was added too, the submit would result in a 404 error. The logs weren't helpful. This error cropped up in some part of the console: NS_BINDING_ABORTED. I checked with these articles: (a) https://stackoverflow.com/questions/704561/ns-binding-aborted-shown-in-firefox-with-httpfox and (b) https://stackoverflow.com/questions/932653/how-to-prevent-buttons-from-submitting-forms. After this, I switched the input type submit to input type button and the form started submitting properly.
State on 19th November 2021:
Deployment