https://github.com/gabrielpenteado/react-firebase-form
A registration form with realtime database and light/dark interface. | React | Typescript | ChakraUI | Firebase
https://github.com/gabrielpenteado/react-firebase-form
chakra-ui firebase-database react typescript vite
Last synced: about 2 months ago
JSON representation
A registration form with realtime database and light/dark interface. | React | Typescript | ChakraUI | Firebase
- Host: GitHub
- URL: https://github.com/gabrielpenteado/react-firebase-form
- Owner: gabrielpenteado
- License: mit
- Created: 2023-02-28T19:37:18.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-10-31T04:23:25.000Z (7 months ago)
- Last Synced: 2025-03-25T22:21:57.842Z (2 months ago)
- Topics: chakra-ui, firebase-database, react, typescript, vite
- Language: TypeScript
- Homepage: https://react-firebase-form.vercel.app
- Size: 2.12 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
React-Firebase-form
A React form integrated with ChakraUI and Firebase realtime database.
## 📜 Contents
- [About the project](#-about-the-project)
- Built with
- Website
- [Getting Started](#-getting-started)
- Requirements
- Installation
- [Features](#-features)
- Light / Dark Mode
- Password Strength Meter
- Pop-Up Message
- [Contributions](#-contributions)
- [License](#-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
### Built with
## 🔥 Getting started
To start using this React form follow the instructions below.
### Requirements
- npm (^9.5.0)
- react(^18.2.0)
- [vite](https://vitejs.dev/guide/)
- [chakraUI](https://chakra-ui.com/getting-started/vite-guide)
- [react-hook-form](https://react-hook-form.com/get-started)
- [react-password-strength-bar](https://www.npmjs.com/package/react-password-strength-bar)
- [uid](https://www.npmjs.com/package/uid)
### Browsers Support
| [
](https://www.google.com/intl/en/chrome/)
Chrome | [
](https://www.microsoft.com/en-us/edge)
Edge | [
](https://www.mozilla.org/en-US/firefox/new/)
Firefox | [
](https://www.apple.com/br/safari/)
Safari | [
](https://www.opera.com)
Opera |
| :--------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------: |
| ✅ | ✅ | ✅ | ✅ | ✅ |
| last version | last version | last version | last version | last version |
### Installation
1. Clone the repository
`git clone https://github.com/gabrielpenteado/react-firebase-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
[](http://makeapullrequest.com)
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](https://github.com/gabrielpenteado/react-firebase-form/blob/main/LICENSE.md) file for details.
Gabriel Penteado
Full Stack Developer
[](https://www.linkedin.com/in/gabriel-penteado)
[](https://github.com/gabrielpenteado)
[](mailto:[email protected])
