/newsletter-sign-up-main

A frontend mentor challenge for building a newsletter sign up page with form validation.

Primary LanguageTypeScript

Frontend Mentor - Newsletter sign-up form with success message solution

This is a solution to the Newsletter sign-up form with success message challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

Overview

The challenge

Users should be able to:

  • Add their email and submit the form
  • See a success message with their email after successfully submitting the form
  • See form validation messages if:
    • The field is left empty
    • The email address is not formatted correctly
  • View the optimal layout for the interface depending on their device's screen size
  • See hover and focus states for all interactive elements on the page

Links

My process

After I analyzed the project's requirements, I wrote down a list of potential challenges I need to consider so I can start the project with a good idea of what tools and technologies are required.

I also set up the project with Vite to get everything running as quickly as possible.

Here's a list of steps I followed to get the process up and running:

  1. Initialized a repo in Github.
  2. Installed necessary dependancies such as Sass, react-router.
  3. Created a folder structure for the components and sass files.
  4. Created the component files starting with parent components.
  5. Tested the project in the browser to make sure that everything's working properly.

Built with

  • Semantic HTML5 markup
  • Flexbox
  • Mobile-first workflow
  • React - JS library
  • [TypeScript]

What I learned

I learned that you don't particularly have to set up 'private routing'. Once the project is deployed, you won't be able to access other routes unless they're navigated through the app.

Continued development

I'm still not comfortable with naming big components and dividing responsibilities. I wish I could've organized the Sass files well and avoided running into conflicts. I need to look more into CSS frameworks to avoid having to deal with these issues.

Author