https://github.com/pintu544/student-list

Student List with table
https://github.com/pintu544/student-list

Last synced: 6 days ago
JSON representation

Student List with table

• Host: GitHub
• URL: https://github.com/pintu544/student-list
• Owner: pintu544
• License: other
• Created: 2023-10-07T08:11:36.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2023-10-07T14:28:13.000Z (about 1 year ago)
• Last Synced: 2024-04-13T23:09:58.421Z (8 months ago)
• Language: JavaScript
• Homepage: https://student-list-phi.vercel.app
• Size: 518 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Student Management System

This web application allows users to manage a list of students. Users can view the list of added students, search for specific students, and add new students through a modal form.

### Features

- Display a list of students with columns: Student Name, Email Id, Phone Number, Father Name, Gender, Action (Delete option), and a dummy user image.

- Implement a search functionality with debounce for filtering students based on their names.

- Add new students through a modal form with the following input fields and validations:

  1. Student Name: Required.

  2. Date Of Birth: Required, student must be greater than 3 years old.

  3. Gender: Required.

  4. Father Name: Required.

  5. Mother Name: Required.

  6. Email Id: Required, Valid Email format (e.g., [email protected]).

  7. Phone Number: Required, 10-digit valid phone number.

  8. Address: Required.

- Close the modal and display the student details in the table list upon clicking the Submit button in the Add Student Modal.

## Technologies Used

- React.js (Function components and hooks)

- [Library for modal and UI components]

- [Library for debounce functionality]

## Installation

1. Clone the repository: `git clone (https://github.com/pintu544/Student-List)`

2. Navigate to the project directory: `cd student-list`

3. Install dependencies: `npm install`

## Usage

1. Start the development server: `npm start`

2. Open the application in your browser: `http://localhost:3000`

## Screenshots

![Student List](https://www.linkpicture.com/q/localhost_3000_crud-app.png)

*Screenshot of the Student List page*

![Add Student Modal](https://www.linkpicture.com/q/localhost_3000_crud-app-1_1.png)

*Screenshot of the Add Student Modal*

## Contributing

Feel free to contribute to this project by opening issues or submitting pull requests. Your feedback and suggestions are welcome!