https://github.com/venkateshramkumarg/forms

The React Form Project is a web application built with React and Tailwind CSS for managing user information. It features a form for collecting and validating user details, local storage for data persistence, and a data display page for viewing, editing, and deleting entries. Integrated with the country-state-city library.
https://github.com/venkateshramkumarg/forms

nodejs reactjs tailwindcss

Last synced: 16 days ago
JSON representation

The React Form Project is a web application built with React and Tailwind CSS for managing user information. It features a form for collecting and validating user details, local storage for data persistence, and a data display page for viewing, editing, and deleting entries. Integrated with the country-state-city library.

• Host: GitHub
• URL: https://github.com/venkateshramkumarg/forms
• Owner: venkateshramkumarg
• Created: 2024-09-07T06:49:08.000Z (4 months ago)
• Default Branch: main
• Last Pushed: 2024-09-07T07:03:33.000Z (4 months ago)
• Last Synced: 2024-11-05T22:35:29.279Z (2 months ago)
• Topics: nodejs, reactjs, tailwindcss
• Language: JavaScript
• Homepage: https://forms-lac-three.vercel.app
• Size: 187 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        
# React Form Project Documentation

## Overview

This project is a React application that manages user information through forms. It uses React for the frontend and Tailwind CSS for styling. The application consists of two main components: a form for user input and a page to display submitted user details.

## Technologies Used

- React

- React Router

- Tailwind CSS

- country-state-city library

## Project Structure

The project has the following main components:

1. `App.js`: The main component that sets up routing

2. `Form.js`: Handles user input and form submission

3. `Data.js`: Displays submitted user details

## Features

### Form Component (`Form.js`)

- Collects user information including:

  - Username

  - Email

  - Message

  - Phone number

  - Date of birth

  - Password

  - Gender

  - Address (including country, state, and city)

- Performs form validation

- Uses local storage to save form data

- Allows editing of existing entries

### Data Component (`Data.js`)

- Displays submitted user details

- Allows deletion of entries

- Provides an option to edit existing entries

## Routing

The application uses React Router for navigation:

- `/`: Displays the form for user input

- `/details`: Shows the list of submitted user details

## Styling

Tailwind CSS is used for styling the components. The application features:

- Responsive design

- Form input styling

- Error message display

- Button styling

## Data Management

- Form data is stored in the browser's local storage

- The application can read, write, and delete data from local storage

## Form Validation

The form includes validation for various fields:

- Email format checking

- Username length validation

- Password complexity requirements

- Date of birth validation

## Country, State, and City Selection

The project uses the `country-state-city` library to populate dropdown menus for:

- Countries

- States (based on selected country)

- Cities (based on selected state)

## How to Use

1. Open the application

2. Fill out the form on the home page

3. Submit the form to save the data

4. Navigate to the '/details' page to view submitted entries

5. Edit or delete entries as needed

## Future Improvements

Potential areas for enhancement include:

- Adding user authentication

- Implementing a backend database for data storage

- Improving form accessibility

- Adding more complex validation rules

This documentation provides an overview of the React Form project, its main features, and how to use it. Feel free to expand on any section or add more details as needed.