An open API service indexing awesome lists of open source software.

https://github.com/surajkumar4-source/crud-app

This React CRUD (Create, Read, Update, Delete) App is a simple web application for managing user data. It provides functionalities to create, read, update, and delete user entries using a mock API.
https://github.com/surajkumar4-source/crud-app

api axios react reactrouterdom

Last synced: about 1 month ago
JSON representation

This React CRUD (Create, Read, Update, Delete) App is a simple web application for managing user data. It provides functionalities to create, read, update, and delete user entries using a mock API.

Awesome Lists containing this project

README

          

# React CRUD App

## Overview
This React CRUD (Create, Read, Update, Delete) App is a simple web application for managing user data. It provides functionalities to create, read, update, and delete user entries using a mock API.

## Features:

### Create:
Add new user entries with name and email.

### Read:
Display a table of existing user data with options to edit and delete entries.

### Update:
Modify existing user information through a user-friendly update form.

### Delete:
Remove user entries from the dataset.

## Code Structure:

- **`App.js`**: Main application component that sets up the routing using React Router.
- **`components/Create.js`**: Component for adding new user entries with validation checks.`
- **`componentsRead.js`**: Component displaying a table of existing user data with options for editing and deleting.`
- **`components/Update.js`**: Component providing a form to update existing user information.

## Clone and Installation

1. **Clone the repository:**

```bash
git clone https://github.com/Surajkumar4-source/react-crud-app.git

2. **Navigate to the project directory:**

```bash
cd react-crud-app

3. **Install dependencies::**

```bash
npm install

4. **Run the application:**

```bash
npm start

Visit http://localhost:3000 in your web browser.

## Usage

### Create:
- Access the "Create" page to add new user entries.
- Input a name and email, and click "Submit" after validation.
- Feel free to explore and manage user data efficiently with this React CRUD App!

### Read:
- Visit the "Read" page to view existing user data in a table.
- Toggle a dark mode for the table with the switch at the top.
- Edit or delete entries directly from the table.

### Update:
- Navigate to the "Update" page to modify the details of a selected user.
- Changes are instantly reflected in the dataset after updating.

---

Feel free to reach out for suggestions, improvements, or collaboration opportunities!