Newsletter Sign Up with React Typescript and Tailwindcss

What are you most proud of, and what would you do differently next time?

Able to use react typescript and tailwindcss for this challenge.

What challenges did you encounter, and how did you overcome them?

For this challenge i decided to use react with typescript and tailwindcss solely because i want to start learning those stacks.

Challenges:

1. Setting up project:
   • I learnt you can use tools like vite to generate a project starter.
   • Learnt about tsconfig and quite a bit about its properties.
   • Learn a bit about vite config and how you can create aliases.
   • Learn a few things about tailwindcss setup with postcss and few extensions for vscode to make your development with tailwind more pleasant.
   • Since we are dealing with form, i come across react-hook-form and zod for handling form and validation.
   • Learnt about project structures.
2. Learn about typescript type, interface and type narrowing.
3. Learn a bit about how to use react router for routing your pages.
4. Learn about seperating your code into smaller piece of code by moving a few components (button and input) to be its own module.
5. Learn a lot about react hooks.
6. Learn about providers on react.

What specific areas of your project would you like help with?

1. I struggle about z-index when creating shadow for a button. I learnt about an element will create stacking context if it has position other than static and z-index other than auto or 0. I set the button position to relative and z-index to 1 and before pseudo-element position to absolute and z-index of -1. But it only move the before pseudo-element below button text and stil on top of button background color.