React.js + TypeScript + Custom Hook + SCSS Newsletter Sign-up Form

Summary:

a) Upon submit, the form is checked by a custom hook which vefifies value provided in the input.

b) If an email is successfully submitted, it's saved within the Local Storage.

c) Users will receive an appropriate error message in the following scenarios:

• The input is empty.
• Provided value is not a valid email address.
• The email has already been provided and it's present in the Local Storage.

d) The validity check is slighly delayed using a setTimeout() method which imitates sending a request to an external server and allows users to see a loading modal.

e) Loading modal is rendered in a separate div using React Portal.

f) Application state is managed by React Context.

g) Users can view the optimal layout for the interface depending on their device's screen size as well as see hover and focus states for all interactive elements on the page.

No questions from my side, however I will be grateful for any feedback.

Happy coding! 🎃