ReactJS TailwindCSS Vite Newsletter Sign-up

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

Reflecting on this project, I take pride in its outcome. I learned new concepts and reinforced my knowledge on various topics. What I found rewarding was the process of writing my README and reviewing my code. During this review, I discovered opportunities to refine and enhance my code which was great.

Next time, I would give myself more time to work through the form submission logic and code. It was more challenging than anticipated.

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

Throughout the development of this application, I gained valuable insights and learned several key concepts:

React Router Dom: This npm package uses dynamic routing in web applications, ideal for creating single-page applications (SPAs) where content is dynamically loaded based on the URL. Its benefits include enhanced speed and performance. The Router component acts as a container for all other components, while Routes define the navigation paths within an SPA. The Route component checks the current URL and renders the corresponding component, and Link is used for creating navigable links to different paths.

Email Validation: I implemented a validateEmail function that accepts an email address as its argument. This function uses validate.test(email), where validate is a regular expression that matches the basic structure of an email address, to determine if the provided email matches the expected pattern. It returns true if the match is successful, and false otherwise.

handleSubmit Function: This function is designed to process user input. It prevents the default page reload, validates the email address, and provides an appropriate response based on the input. If the validation checks are passed, it navigates the user to a thank you page.

Refactoring Code for Success Variable: During a review of my code, I noticed that I had included a success variable for conditional rendering, which ultimately was unnecessary. Initially, setting this variable to true would conditionally render a "Thank you for subscribing!" message. However, after integrating a dedicated thank you component page that appears upon submitting a valid email, I found the success variable and its associated code redundant. Removing this extraneous code streamlined the program's functionality.

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

For my buttons, I would love to create a gradient with the tomato color based on the design. Help would be appreciated!