Cadastro: A basic MERN CRUD Full Stack Application using MongoDB and VITE
STATUS:
==========================================
This project was developed:
- used MongoDB Atlas
- implemented confirmation feature on the Delete button
- added clearly demarcated Exits cancel buttons, on the 'Add User' and 'Update User' screens, to return to the homepage.
These were the differences, in relation to the original project, previously developed with MongoDB Compass Community by 'Code With Yousaf', found on Youtube with the title """MERN Stack CRUD Operations | Full Stack CRUD Operations | React, Node, Express & MongoDB"""
- CRUD
- persistence in MongoDB
In youtube's video this project was developed with MongoDB Comunnity local, however, in my devepoment -used React, Express, Node.js, MongoDB,Bootstrap,
You can Try Free account in this url: https://www.mongodb.com/atlas/database
To clone and run this application, you'll need Git, Node.js v16.15 or higher + npm (used version 8.19.2) installed on your computer from your command line:
## Clone this repository
### $ `git clone https://github.com/Almir-git-unifc/mern_crud-app_vite_peoples_mongo.git`
## Install project vite
### $ `npm create vite@latest`
## choose name project, framework and variant
### $ `choose (your project named) vite-project `
### $ `(framework) React`
### $ `(variant) JavaScript`
$ Copy content project, was download of this Github repository, inside folder vite-project created before
npm install bootstrap axios react-router-dom
And you will need to update the index.js file in the server folder with the data from your connectionString in yourConnectionString variabel and tpour password in yourPassw variable.
npm install express mongoose cors nodemon body-parser
update the main and script items of the package.json file in the server folder; this way: "main": "index.js", "scripts": { "start": "nodemon index.js", "test": "echo "Error: no specified" && exit 1", },
2) In MongoDB Atlas, create a DataBase with the desired name, and within it create a Collection with the name CRUD, or whatever name you prefer
3.2) and replace the @cluster...majority term in yourConnectionString variable with your MongoDB Atlas connection string
Verify id Users.jsx file contain a correct port in useEffect, in line: axios.get( ), in CreateUser.jsx file in line axios.post
👤 Almir
- Github: @Almir-git-hub