MERN Stack CRUD Application

Cadastro: A basic MERN CRUD Full Stack Application using VITE and external MongoDB

---

STATUS:

STATUS: 🔔 React VITE 🚀 App: Finished ... 🎯

                        ==========================================

---

Table of Contents

• Intro
• Feature
• Technologies
• How To Use
• Author

Intro

This project was developed:

• With Client-Server Architecture implemented using the MVC pattern
• 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"""

 

Feature

• CRUD (POST GET PUT & DELETE);
• Responsive interface with the Bootstrap front-end framework;
• Navigation between pages using React Router;
• RESTful API in the backend to perform CRUD operations on user data;
• Validation: to delete a user, confirmation is requested before actually deleting the user;
• Validation: email, declared with type in html5 input field.

 

Technologies

This project was developed using the following technologies:

• JavaScript Full Stack;
• Node.js;
• React for building the GUI;
• Vite.js as a development server;
• Express.js Framework used to build API;
• MongoDB DBaaS (DataBase as a Service);
• Mongoose used to model data for MongoDB;
• React Router library for navigation between pages;
• Axios library used for requests and communication with the API.

Built With

 

Requirements

You need a account in MongoDB Atlas

You can Try Free account in this url: https://www.mongodb.com/atlas/database

And you need Create a Database named crud and a Collection named users

How-To-Use

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

$ install the dependencies of this front-end

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.

 

Run locally the app

$ cd folder-name-project (vite-project)

$ npm install

Access client folder

$ cd client

install vite in client folder

$ npm run dev

$ use the Local link provided by VITE to access the server

open server folder

$ cd server

$ install the dependencies of this server

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", },

MongoDB Account:

If you don't already have a MongoDB Atlas account

1) Create an account on MongoDB Atlas, at:

https://account.mongodb.com/account/login

Or access MongoDB Atlas with your Github or Google account

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

Once you have a MongoDB Atlas account; access the index.js file from the server folder, and...

3.1) replace the term your-password in the variable yourPassw, with your MongoDB Atlas password

3.2) and replace the @cluster...majority term in yourConnectionString variable with your MongoDB Atlas connection string

save these changes

run the server

$ npm start

Verify id Users.jsx file contain a correct port in useEffect, in line: axios.get( ), in CreateUser.jsx file in line axios.post

Enjoyed and if this is useful to you, give me a star 🌟

 

Author

👤 Almir

• Github: @Almir-git-hub