Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/pedro-donoso/test

REACT CRUD: El usuario puede Crear, Leer, Actualizar y Borrar elementos de una base de datos en Postgresql, se visualizan los cambios en el FrontEnd en una tabla de Bootstrap y utilizo React
https://github.com/pedro-donoso/test

bootstrap cors crud express front-end frontend node nodejs nodemon pg react

Last synced: about 1 month ago
JSON representation

REACT CRUD: El usuario puede Crear, Leer, Actualizar y Borrar elementos de una base de datos en Postgresql, se visualizan los cambios en el FrontEnd en una tabla de Bootstrap y utilizo React

Awesome Lists containing this project

README

        

![vista](https://user-images.githubusercontent.com/68760595/156808903-8dc7ac80-2102-4f4f-bcb7-50148952b3cb.PNG)

### PostgreSQL access

![database](https://user-images.githubusercontent.com/68760595/156799078-2df75d40-6eee-4a10-abc5-c42a5de392a7.PNG)

## Steps

1. Download zip code

### In Terminal:

2. Install express

`npm i express`

3. Init server

`node index`

![node](https://user-images.githubusercontent.com/68760595/156791580-55d9b7b8-0f0a-450b-9d51-637d84abfb45.PNG)

### In other terminal

4. Access to folder client:

`cd client`

![terminal](https://user-images.githubusercontent.com/68760595/156791909-5d0be66f-33bc-4503-8469-1a9304493947.PNG)

5. Install React dependencies:

`npm install react-scripts --save`

![scripts](https://user-images.githubusercontent.com/68760595/156793417-ddeb2d1c-c072-45d2-b5e2-9fecce6bcdc7.PNG)

6. Init React project:

`npm start`

![npm](https://user-images.githubusercontent.com/68760595/156797938-8ed9ad88-596b-405d-869a-10b9e5183592.PNG)

7. Follow link:

![start](https://user-images.githubusercontent.com/68760595/156797678-b6d9e108-ea7d-470a-ad4e-d1f90bed4f33.PNG)

### In PSQL

8. Conection Postgres -> password: deve2024

![psql](https://user-images.githubusercontent.com/68760595/156810502-015616b3-ed09-4f44-a3ef-d14c4c3ac3e8.PNG)

9. Access to Database:

![acceso](https://user-images.githubusercontent.com/68760595/156811807-b96a4a5e-a2e9-4a8e-82dd-e8e45860aab8.PNG)

10. View table:

![tabla](https://user-images.githubusercontent.com/68760595/156812256-d8918575-1207-4f86-a3a9-4cd8ba498d1f.PNG)