https://github.com/monamobeen/cards

📊A React-based web app for submitting and managing form data with interactive card 🔄and table views, gender/department filters, and data persistence using localStorage.
https://github.com/monamobeen/cards

bootstrap5 hooks reactjs

Last synced: 3 months ago
JSON representation

📊A React-based web app for submitting and managing form data with interactive card 🔄and table views, gender/department filters, and data persistence using localStorage.

• Host: GitHub
• URL: https://github.com/monamobeen/cards
• Owner: MonaMobeen
• Created: 2024-12-20T08:17:40.000Z (7 months ago)
• Default Branch: main
• Last Pushed: 2024-12-20T09:25:39.000Z (7 months ago)
• Last Synced: 2025-03-24T17:14:44.737Z (4 months ago)
• Topics: bootstrap5, hooks, reactjs
• Language: JavaScript
• Homepage:
• Size: 352 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
 

React Form Cards
 


This project is a React-based web application that allows users to submit and manage form data. Users can input details such as name, gender, department, and age, and view the data in either a card layout with flip animations or a table format. The application includes filtering options and persists data using localStorage.


 


Features:




	
User-friendly form for submitting data.

	
Data persistence using localStorage.

	
Interactive display modes: Card view with 3D flip animations and Table view.

	
Filters for gender and department to refine displayed data.

	
Bootstrap-based responsive design with custom CSS styling.



 


Example 1:



Input: User enters the following:

{

  "name": "Mona",

  "gender": "Female",

  "department": "MERN dept",

  "age": "19"

}


Output (Card View):

Front:

Name: Mona

Gender: Female

Back:

Department: MERN dept

Age: 19



 


Example 2:



Input: User applies the filter: Gender = "Female".


Output (Table View):

| Name  | Gender | Department  | Age |

|-------|--------|-------------|-----|

| Mona  | Female | MERN dept   | 19  |



 


Constraints:




	
Users must provide a valid name, gender, department, and age in the form.

	
Filters are optional and can be used to refine the displayed data.

	
The app is designed for use on modern web browsers with localStorage support.



 


Installation:



Step 1: Clone the repository.

git clone https://github.com/MonaMobeen/react-form-cards.git


Step 2: Navigate to the project directory.

cd react-form-cards

Step 3: Install dependencies.

npm install

Step 4: Start the development server.

npm start



 


Technologies Used:




	


React: For building the user interface.

	


Bootstrap 5: For responsive design and styling.

	


CSS: For custom animations and styles.

	


localStorage: For persisting user data across sessions.



 


---