React-form

A React form integrated with ChakraUI and Firebase realtime database.

📜 Contents

• About the project
  • Built with
  • Website
• Getting Started
  • Requirements
  • Installation
• Features
  • Light / Dark Mode
  • Password Strength Meter
  • Pop-Up Message
• Contributions
• License
  

🔎 About the project

A registration form created with React and Typescript using React-Hook-Form library for form validation. It's integrated with ChakraUI and with Realtime Database from Firebase. The form has responsive web design, custom pop-ups messages for each action(create/delete user) and a light/dark mode.

Video	Website

Light-theme	Dark-theme

Built with

🔥 Getting started

To start using this React form follow the instructions below.

Requirements

• npm (^9.5.0)
• react(^18.2.0)
• vite
• chakraUI
• react-hook-form
• react-password-strength-bar
• uid

Browsers Support

Chrome	Edge	Firefox	Safari	Opera
✅	✅	✅	✅	✅
last version	last version	last version	last version	last version

Installation

1. Clone the repository
   git clone https://github.com/gabrielpenteado/react-form

2. Access the project folder in the terminal

3. Install all packages dependencies
   npm install

4. Add Firebase SDK
   Rename firebase_sample.tsx to firebase.tsx and
   replace the firebase configuration.

   firebaseConfig {
   ..."your app's Firebase project configuration"
   };
   

Note: You can run the following command to install latest SDK : npm install firebase

5. Start testing
   npm run dev
   

💫 Features

Light / Dark mode

• The user can choose between a light or dark theme.

Password strength meter

• A password's strength is measured according to predefined rules and is displayed using a horizontal scale next to the input field.

Pop-up messages

• Custom pop-up messages are displayed for each action.

🤝 Contributions

The foundation of the open source community are the contributions, them inspire us to learn and create. Any contributions are greatly appreciated.

📄 License

This project is licensed under the MIT License. See the LICENSE.md file for details.

Gabriel Penteado

Full Stack Developer