This is a simple CRUD (Create, Read, Update, Delete) application built with React and JSON Server. It manages student records with operations for adding, editing, viewing, and deleting students.

• Add New Student: Create a new student record.
• Edit Student: Modify existing student details.
• View Student: Display details of a student.
• Delete Student: Remove a student from the database.

git clone https://github.com/AmanKumarSinhaGitHub/React-CRUD-with-API-Integration.git cd react crud

Navigate to the project directory and install the required dependencies:

npm install

To start the development server:

npm run dev

JSON Server is used to simulate a backend API. Install it globally:

npm install -g json-server

Run the JSON Server with the provided db.json file:

json-server --watch db.json --port 8000

Open your browser and navigate to:

http://localhost:5173 

Ensure the JSON server is running at http://localhost:8000 for API requests.

The db.json file contains the initial data for the students:

{ "students": [ { "id": "1", "name": "Rohan", "place": "Delhi", "phone": "9876543210" }, { "id": "2", "name": "Sohna", "place": "Mysore", "phone": "9876543231" }, { "id": "3", "name": "Mohan", "place": "Gujarat", "phone": "9878767521" } ] }

• src/App.js: Main component handling routes.
• src/StudentTable.jsx: Displays the list of students.
• src/CreateStudent.jsx: Form to add a new student.
• src/EditStudent.jsx: Form to edit an existing student.
• src/ViewDetails.jsx: Displays details of a specific student.

• /: List all students.
• /student/create: Create a new student.
• /student/edit/:studentid: Edit a student by ID.
• /student/view/:studentid: View student details by ID.

• React: Frontend framework.
• JSON Server: Simulated REST API.
• React Router: For navigation.

A special thanks to Udemy Instructor Khaiser Khanam for this course. I have learned a lot from this course.

Course Link