/signup-form

Registration form component with React and Firestore

Primary LanguageJavaScriptMIT LicenseMIT

📋 Table of contents

🎫 Sign Up Form Component

This is a solution to the Intro component with sign up form challenge on Frontend Mentor.

🔍 Overview

🎯 Challenge

Users should be able to:

  • View the optimal layout for the site depending on their device's screen size
  • See hover states for all interactive elements on the page
  • Receive an error message when the form is submitted if:
    • Any input field is empty. The message for this error should say "[Field Name] cannot be empty"
    • The email address is not formatted correctly (i.e. a correct email address should have this structure: name@host.tld). The message for this error should say "Looks like this is not an email"

📸 Screenshot

Screenshot

🔗 Links

🚂 My process

🧰 Built With

  • React.js - to create UI and dynamic components
  • Firebase - to store registration data

💡 What I learned

In this project, I learned:

  • How to add Firebase to a React app
  • How to use Firestore as a database for storing docs
  • Using Regex to validate input values
  • Improving UX with conditional class and components

🔭 Future features

  • Display list of registered users
  • Loading and popup message
  • Use this component in a real app

💎 Useful resources

📧 Connect wit me

I am always looking for ways to improve my project. If you have any suggestions or ideas, I would love to hear from you.

🤝 Contributing

I welcome any and all contributions to my website! If you have an idea for a new feature or have found a bug, please open an issue or submit a pull request.

Feel free to check the issues page.

💖 Show your support

If you like this project, please consider giving it a ⭐.

📜 License

This project is MIT licensed.