An open API service indexing awesome lists of open source software.

https://github.com/emersonramos3lt/register-form-nodejs

A registration form built with React and node.js and integrated with the MongoDB database.
https://github.com/emersonramos3lt/register-form-nodejs

backend css css-flexbox frontend html html-css javascript nodejs react reactjs responsive

Last synced: 3 months ago
JSON representation

A registration form built with React and node.js and integrated with the MongoDB database.

Awesome Lists containing this project

README

          

# **📋 User Registration Form with Backend Integration**

This project features a **user registration form** that integrates **React** on the frontend with a **Node.js backend**, storing user data in a **MongoDB** database. The frontend fetches and displays a list of existing users stored in the database, and allows for new user registrations. When a new user enters their name, age, and email in the input fields, the form dynamically updates the list of users, showcasing real-time data interaction.

I utilized **React hooks** such as **useState, useEffect, and useRef** to manage state, fetch data from the backend, and handle form inputs efficiently. The project demonstrates seamless integration between frontend and backend technologies, ensuring a smooth user experience with dynamic updates and a **responsive design**.

# **🛠️ Main Features**
- **React for building the user interface**
- **Node.js for backend integration**
- **MongoDB for user data storage**
- **useState for managing form state**
- **useEffect for data fetching**
- **useRef for input handling**
- **Real-time updates on the user list with new entries**

# **🔧 How to Start the Server**

To get the server up and running and display the list of users, navigate to the folder where your server.js file is located. Then, in the Visual Studio Code terminal, run the following command:
```bash
node server.js
```

Alternatively, if you'd like the server to update automatically whenever you make changes to the code without having to restart it manually, use the following command:
```bash
node --watch server.js
```
This will ensure that the server is restarted and updated in real-time as you make changes to your code.

📷 Screenshot

![Screenshot](./screenshot/img1.png)