Crud_ops

CletsyMedia

Experience a seamless CRUD simulation with our project, leveraging a JSON server as the robust backend solution. With intuitive functionalities and efficient data manipulation capabilities, our project offers a user-friendly interface for performing Create, Read, Update, and Delete operations.

#json-server #reactjs #restful-api #tailwind

Download

React CRUD App with JSON Server

This is a simple CRUD (Create, Read, Update, Delete) application built with React for the frontend and JSON Server to simulate a backend REST API. The purpose of this application is to demonstrate how to perform CRUD operations using React components and interact with a simulated backend server using JSON Server.

Screenshot

Features

Create: Add new users to the system.
Read: View a list of users and their details.
Update: Modify user information.
Delete: Remove users from the system.

Prerequisites

Before you begin, ensure you have met the following requirements:

Node.js installed on your local machine.
Install your preferred code editor on your local machine e.g VS Code, Sublime, Atom
Basic understanding of React.js and REST APIs.

Installation

Clone the repository to your local machine:

git clone https://github.com/CletsyMedia/CRUD_OPS.git

Navigate into the project directory:
```
cd CRUD_OPS
```
Install dependencies using npm:
```
npm install
```

Usage

Start the JSON Server and target the json directory to simulate the backend:
```
json-server --watch src/components/DataBase/db.json
```
This will start the JSON Server with the data stored in db.json file.
Start the React application with vite command:
```
npm run dev
```
This will start the development server for the React application. The app will be accessible at http://localhost:3000.
You can now perform CRUD operations on the application:
- Create: Click on the "Add +" button, fill in the user details, and click "Add".
- Read/View: The list of users will be displayed on the homepage.
- Update: Click on the "Edit" button next to a user, make the necessary changes, and click "Update".
- Delete: Click on the "Delete" button next to a user to remove them from the system.

Contributing

Contributions are welcome! If you have any suggestions, improvements, or feature requests, please open an issue or create a pull request.

License

Unless stated otherwise, all code in this CRUD Operation projects are available under the MIT License. Feel free to use them as inspiration or reference for your own projects.

Acknowledgments

This project was inspired by the need to demonstrate CRUD operations in a React application.
Special thanks to JSON Server for providing a simple way to mock a REST API.

Top categories

tailwind daisyui resume portfolio email blog dashboard landing-page admin ecommerce