📝 React Student Management System

A modern React application to manage student records.
Users can add, edit, delete, search, and filter students by name, semester, or department.
The project demonstrates React Hooks, dynamic table updates, localStorage persistence, and responsive UI design with Tailwind CSS.

---

🚀 Key Features

Student Management

• Add new students with roll number, name, semester, and department.
• Edit student details directly in table cells.
• Delete single or multiple selected students.
• Checkbox selection for all or individual rows.
• Persistent data saved in localStorage.

Search & Filter

• Filter students dynamically by Name, Semester, or Department.
• Select search field from dropdown for flexible filtering.

Responsive UI

• Clean, responsive design built with Tailwind CSS.
• Intuitive table layout and user-friendly form inputs.

---

🎨 Technology Stack

Category	Technology	Purpose
Frontend Framework	React.js (Hooks)	Component-based UI and state handling
Styling	Tailwind CSS	Responsive, modern design
Logic	JavaScript (ES6+)	Dynamic table updates, form handling
Storage	localStorage API	Persistent student data
UI Components	HTML5 & CSS3	Table layout, forms, buttons

---

📸 Screenshots

Main Table View

Add Student Form

Search & Filter

Delete Action

---

🛠 Installation

Clone Repository

git clone https://github.com/SaraSalah1/react-student-table.git

Navigate to Project Folder

cd react-student-table

Install Dependencies

# Using npm
npm install

# Using yarn
yarn install

Start Development Server

# Using npm
npm start

# Using yarn
yarn start

Open in Browser

http://localhost:3000

---

💻 Usage

Manage Students

1. Use input fields to enter student name, semester, and department.
2. Click Add Student to add a new record.
3. Select students using checkboxes to delete single or multiple rows.
4. Edit table cells directly for quick updates.
5. Data updates automatically saved in localStorage.

Search & Filter

1. Select a field (Name, Semester, Department) from the dropdown.
2. Type the search keyword in the input field.
3. Table dynamically filters results.

---

🧩 Code Snippets

Adding a New Student

const addRow = () => {
  if (!inputs.name) return;
  if (!inputs.semester) return;
  if (!inputs.department) return;

  let newRoll;
  do { newRoll = Math.floor(Math.random() * 10000); }
  while (rows.some((r) => r.roll === newRoll));

  setRows([...rows, { roll: newRoll, ...inputs }]);
  setInputs({ name: "", semester: "", department: "" });
};

Filtering Students

const filteredRows = rows.filter((r) =>
  r[searchBy].toLowerCase().includes(search.toLowerCase())
);

Delete Selected Students

const deleteSelected = () => {
  setRows(rows.filter((r) => !selectionModel.includes(r.roll)));
  setSelectionModel([]);
};

---

🤝 Contributing

1. Fork the repository.
2. Create a feature branch:

git checkout -b feature/YourFeature

3. Commit your changes:

git commit -m "Add some feature"

4. Push branch:

git push origin feature/YourFeature

5. Open a Pull Request.

---

👩‍💻 Author: Sara Salah
📦 Project Repository: react-student-table

---

📝 License

This project is licensed under the MIT License