https://github.com/e-candeloro/react-crud-client-app
A simple React App for C.R.U.D. operations on data from an external REST API
https://github.com/e-candeloro/react-crud-client-app
bulma-css create-react-app crud crud-application javascript react react-router reacthookform reactjs rest-client template yup-validation
Last synced: 2 months ago
JSON representation
A simple React App for C.R.U.D. operations on data from an external REST API
- Host: GitHub
- URL: https://github.com/e-candeloro/react-crud-client-app
- Owner: e-candeloro
- License: mit
- Created: 2023-01-04T18:30:17.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T09:55:23.000Z (over 3 years ago)
- Last Synced: 2025-05-16T05:37:02.348Z (about 1 year ago)
- Topics: bulma-css, create-react-app, crud, crud-application, javascript, react, react-router, reacthookform, reactjs, rest-client, template, yup-validation
- Language: JavaScript
- Homepage:
- Size: 326 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React CRUD API Client App
    
A simple React App for C.R.U.D. operations on data from an external REST API.
## Preview
## Packages Used
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
This App uses mainly the following npm packages:
- React DOM Router
- React Hook Form
- Yup validator
- Bulma CSS
## Setup
Node.js and Node Package Manager (NPM) are required to run and build this project.
To setup the app, while inside the project folder, execute the following commands:
```Shell
npm install
npm start
```
This will install all the dependencies and run a server in development mode on [http://localhost:3000](http://localhost:3000).
## Usage
In the `App.jsx` inside the src folder, various arguments are used and passed to the app elements as props.
In particular the base url, with the various urls parameters are used to make fetch calls to an API.
## API Endpoints
In this case the value used are an example and fetch the data to a localhost Django web-server that serves an API with the following endpoints.
### **{base_url}/elements**
- GET: list of elements is returned
- POST: a new element is added
### **{base_url}/elements/{element_id}**
- PUT: modifies the element data, selecting it by his element_id
- DELETE: deletes the element with id of element_id
## App Pages
The default pages for the app are mapped with the following urls:
### **{app_base_url}/**
Shows the home page, with the API base url displayed and a link to the element list.
### **{app_base_url}/elements**
Shows the element list fetched with a GET API call.
### **{app_base_url}/edit/element_id**
Shows a page to edit the element with element_id, via a PUT call to the API.
### **{app_base_url}/add**
Shows a page to add a new element via a POST call to the API.
## Customization
Altough the components are made to be flexible enough without editing a lot of code, some of them needs to be fixed/modified, especially the `Form.jsx` that has all the Yup validators and forms element specifically made for the data used for the example API.
An example of the JSON data fetched by example the API is:
```JSON
{
"id": 56,
"name": "Kiwi",
"description": "A beautiful 🥝",
"element_type": "C"
}
```
And the yup validation Schema is the following:
```JavaScript
const schema = yup
.object({
name: yup.string().required(),
description: yup.string().required(),
element_type: yup.mixed().oneOf(["A", "B", "C", "D"]),
})
.required();
```
An example of the form (in this case the element name) is:
```JavaScript
{errors.name?.message}
```
The register string passed,the placeholder attribute and other small tweaks are necessary to adapt to your data.
## Improvements to Make
- [x] Reduce props passed for urls
- [ ] Add code comments and improve documentation
- [ ] Use better React patterns to reduce passed props and reduce written code
- [ ] Edit Form.jsx to generalize fetched JSON data from the API (avoid hardcoding)
- [ ] Add a way to setting up the form validation more easily
- [ ] Add visual feedbacks when editing/adding/deleting data
- [ ] Improve app navigation and layout