https://github.com/themiu/mongo-crud

Simple CRUD operations test with MongoDB, using React Frontend and Express Backend
https://github.com/themiu/mongo-crud

axios-react express-js mongodb mongodb-atlas mongoose

Last synced: 3 months ago
JSON representation

Simple CRUD operations test with MongoDB, using React Frontend and Express Backend

• Host: GitHub
• URL: https://github.com/themiu/mongo-crud
• Owner: TheMIU
• Created: 2024-01-13T03:34:32.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-01-14T11:43:59.000Z (over 1 year ago)
• Last Synced: 2025-02-01T20:30:03.434Z (8 months ago)
• Topics: axios-react, express-js, mongodb, mongodb-atlas, mongoose
• Language: JavaScript
• Homepage:
• Size: 383 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: Readme.md

Awesome Lists containing this project

README

          
## MongoDB CRUD Operations with React

Simple CRUD operations test with MongoDB, using React Frontend and Express Backend



## Setup MongoDB 

### Backend

* `npx express-generator`

* `npm install`

* `npm install nodemon`

* `"dev":"nodemon ./bin/www"` add to scripts




* `npm install dotenv`

* create .env   (my .env file is added to gitignore, so create a new .env file in backend with your MONGODB_URL)


`PORT=4000 

MONGODB_URL=mongodb+srv://:@.auajvjv.mongodb.net/?retryWrites=true&w=majority` 

*  .env config 




* `npm install mongoose`

*  mongo db connect 




*  setup for perform CRUD operations (add customer) 

* check using Postman 


Post request URL : http://localhost:4000/customer/add  


Sample data : 

    

    {

        "id": "1",

        "name": "John",

        "address": "New York"

    }


* Others requests are similar to that.  

 customer.js , 

 CustomerController.js 

### Access Backend from Frontend

* create React app +  tailwind css 

* `npm install cors` (backend)

*  Enable CORS  (backend)

* `npm install axios` (frontend) 

* Create frontend to manipulate the data.