Newsletter Sign-Up Form – React, Styled-Components

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

I’m most proud of successfully implementing a responsive and accessible Newsletter Sign-Up Form using React, Vite, and Styled-Components. The project effectively handles user interactions such as focusing the input, triggering errors, and providing helpful feedback messages. Additionally, deploying the project to GitHub Pages was a great learning experience, especially figuring out how to use import.meta.env.BASE_URL to handle dynamic paths.

Next time, I would focus on enhancing the user experience by adding subtle animations and refining the form validation logic with a dedicated library like yup or react-hook-form. Additionally, I would consider using TypeScript for better type safety and a more robust development experience.

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

The biggest challenges I faced were: 1. Handling file paths for images and fonts when deploying to GitHub Pages. • Solution: Learning to use import.meta.env.BASE_URL and properly structuring my project by moving static assets to the public/ folder. 2. Managing focus and blur states for the input field to provide a smooth user experience. • Solution: Using React useRef and useEffect to handle click events, keyboard accessibility, and input focus/blur management. 3. Displaying images within styled-components using dynamic paths. • Solution: Moving assets to the public/ folder and referencing them correctly for both development and production modes.

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

1. Accessibility improvements: Making sure the form is fully accessible via keyboard and screen readers. 2. Animation techniques: Adding shake animations or subtle transitions to improve user feedback. The gradient background did not allow me to transition the way I wanted