React JS+AdminLTE+Node JS+Express+MongoDB CRUD: MERN Stack development foundation

 Hello everyone, today we will learn how to develop a MERN stack web application that is a basic User Management Application using MongoDB, Express, React JS, Node JS, and AdminLTE.GitHub repository link is provided at the end of this tutorial. You can download the source code.


Technology


Back-End:

  • Node JS
  • Express JS
  • Mongo DB
Front-End:
  • React JS
  • AdminLTE
  • react-router-dom 5+
  • axios 0.19.2
  • bootstrap
Project Structure
Back-End:

Front-End:

After completing this tutorial what we will build?
1)We will build a MERN-stack web application that is a basic User Management 
Application with CRUD features: 
• Create User 
• List User 
• Update User 
• Delete User 
 AND
2)How to integrate Admin Template In ReactJS?
Following is the screenshot of our application -

MERN stack App development
We will build two projects: 
  1. Node JS+Express JS: Back End
  2. React JS+AdminLTE: Front End
Project 1:knf-BackEnd

package.json

{

"name": "knf-BackEnd",

"version": "0.1.0",

"private": true,

"keywords": [

"Express",

"RestAPI",

"MongoDB",

"Mongoose",

"Notes"

],

"author": "Sibin",

"license": "ISC",

"dependencies": {

"body-parser": "^1.19.0",

"cors": "^2.8.5",

"express": "^4.17.1",

"mongoose": "^5.8.10"

}}


server.js

const express = require('express');

const bodyParser = require('body-parser');

// create express app

const app = express();

// configure the app to use bodyParser()

app.use(bodyParser.urlencoded({

extended: true

}));

app.use(bodyParser.json());

var cors = require('cors')

app.use(cors())

// ... Your routes and methods here

// Configuring the database

const dbConfig = require('./config/database.config.js');

const mongoose = require('mongoose');

mongoose.Promise = global.Promise;

// Connecting to the database

mongoose.connect(dbConfig.url, {

useNewUrlParser: true

}).then(() => {

console.log("Successfully connected to the database");

}).catch(err => {

console.log('Could not connect to the database. Exiting now...', err);

process.exit();

});

require('./app/routes/user.routes.js')(app);

// listen for requests

app.listen(8081, () => {

console.log("Server is listening on port 8081");

});


database.config.js

module.exports = {

url: 'mongodb://localhost:27017/taletapro-dev'

}


user.controller.js

const User = require('../models/user.model.js');

// Create and Save a new User

exports.create = (req, res) => {

// Create a User

const note = new User({

firstName: req.body.firstName,

lastName:req.body.lastName,

emailId:req.body.emailId

});

// Save User in the database

note.save()

.then(data => {

res.send(data);

}).catch(err => {

res.status(500).send({

message: err.message || "Some error occurred while creating the User."

});

});

};

// Retrieve and return all Users from the database.

exports.findAll = (req, res) => {

User.find()

.then(notes => {

res.send(notes);

}).catch(err => {

res.status(500).send({

message: err.message || "Some error occurred while retrieving users."

});

});

};

// Find a single User with a id

exports.findOne = (req, res) => {

User.findById(req.params.id)

.then(note => {

if(!note) {

return res.status(404).send({

message: "Note not found with id " + req.params.id

});

}

res.send(note);

}).catch(err => {

if(err.kind === 'ObjectId') {

return res.status(404).send({

message: "Note not found with id " + req.params.id

});

}

return res.status(500).send({

message: "Error retrieving note with id " + req.params.id

});

});

};

// Update a User identified by the id in the request

exports.update = (req, res) => {

User.findByIdAndUpdate(req.params.id, req.body, { new: true })

.then((user) => {

if (!user) {

return res.status(404).send({

message: "no user found",

});

}

res.status(200).send(user);

})

.catch((err) => {

return res.status(404).send({

message: "error while updating the post",

});

});

};

// Delete a User with the specified id in the request

exports.delete = (req, res) => {

User.findByIdAndRemove(req.params.id)

.then(note => {

// if(!note) {

//return res.status(404).send({

// message: "User not found with id " + req.params.id

//});

// }

res.send({message: "User deleted successfully!"});

}).catch(err => {

if(err.kind === 'ObjectId' || err.name === 'NotFound') {

return res.status(404).send({

message: "User not found with id " + req.params.id

});

}

return res.status(500).send({

message: "Could not delete User with id " + req.params.id

});

});

};


user.models.js

const mongoose = require('mongoose');

const UserSchema = mongoose.Schema({

id: String,

firstName: String,

lastName :String ,

emailId : String

}, {

timestamps: true

});

module.exports = mongoose.model('User', UserSchema);


user.routes.js

module.exports = (app) => {

const users = require('../controllers/user.controller.js');

app.post('/users', users.create);

app.get('/users', users.findAll);

app.get('/users/:id', users.findOne);

app.put('/users/:id', users.update);

app.delete('/users/:id', users.delete);

}


Project 2:knf-FrontEnd

package.json

{

"name": "knf-FrontEnd",

"version": "0.1.0",

"private": true,

"dependencies": {

"@testing-library/jest-dom": "^4.2.4",

"@testing-library/react": "^9.3.2",

"@testing-library/user-event": "^7.1.2",

"react": "^16.14.0",

"react-dom": "^16.14.0",

"react-scripts": "3.4.3",

"axios": "^0.19.2",

"react-router-dom": "^5.2.0"

},

"scripts": {

"start": "react-scripts start",

"build": "react-scripts build",

"test": "react-scripts test",

"eject": "react-scripts eject"

},

"eslintConfig": {

"extends": "react-app"

},

"browserslist": {

"production": [

">0.2%",

"not dead",

"not op_mini all"

],

"development": [

"last 1 chrome version",

"last 1 firefox version",

"last 1 safari version"

]}}


App.js

import React, { Component } from 'react'

import {BrowserRouter as Router, Route, Switch} from 'react-router-dom'

import Footer from './components/Footer'

import Header from './components/Header'

import Menu from './components/Menu'

import ListUserComponent from './components/ListUserComponent'

import CreateUserComponent from './components/CreateUserComponent'

import ViewUserComponent from './components/ViewUserComponent'

import UpdateUserComponent from './components/UpdateUserComponent'

export default class App extends Component {

render() {

return (

<div>

<Router>

<Header />

<Menu />

<Switch>

<Route path = "/" exact component = {ListUserComponent}></Route>

<Route path = "/users" component = {ListUserComponent}></Route>

<Route path = "/add-user/:_id" component = {CreateUserComponent}></Route>

<Route path = "/view-user/:_id" component = {ViewUserComponent}></Route>

<Route path = "/update-user/:_id" component = {UpdateUserComponent}></Route>

</Switch>

<Footer />

</Router>

</div>

)}}


CreateUserComponent.jsx

import React, { Component } from 'react'

import UserService from '../services/UserService';

class CreateUserComponent extends Component {

constructor(props) {

super(props)

this.state = {

// step 2

_id: this.props.match.params._id,

firstName: '',

lastName: '',

emailId: ''

}

this.changeFirstNameHandler = this.changeFirstNameHandler.bind(this);

this.changeLastNameHandler = this.changeLastNameHandler.bind(this);

this.saveOrUpdateUser = this.saveOrUpdateUser.bind(this);

}

// step 3

componentDidMount(){

// step 4

if(this.state._id === '_add'){

return

}else{

UserService.getUserById(this.state._id).then( (res) =>{

let user = res.data;

this.setState({firstName: user.firstName,

lastName: user.lastName,

emailId : user.emailId

});

});

}

}

saveOrUpdateUser = (e) => {

e.preventDefault();

let user = {firstName: this.state.firstName, lastName: this.state.lastName, emailId: this.state.emailId};

console.log('user => ' + JSON.stringify(user));

// step 5

if(this.state._id === '_add'){

UserService.createUser(user).then(res =>{

this.props.history.push('/users');

});

}else{

UserService.updateUser(user, this.state._id).then( res => {

this.props.history.push('/users');

});

}

}

changeFirstNameHandler= (event) => {

this.setState({firstName: event.target.value});

}

changeLastNameHandler= (event) => {

this.setState({lastName: event.target.value});

}

changeEmailHandler= (event) => {

this.setState({emailId: event.target.value});

}

cancel(){

this.props.history.push('/users');

}

getTitle(){

if(this.state._id === '_add'){

return <h3 className="text-center">Add User</h3>

}else{

return <h3 className="text-center">Update User</h3>

}

}

render() {

return (

<div>

<br></br>

<div className="content-wrapper">

<div className = "row">

<div className = "card col-md-6 offset-md-3 offset-md-3">

{

this.getTitle()

}

<div className = "card-body">

<form>

<div className = "form-group">

<label> First Name: </label>

<input placeholder="First Name" name="firstName" className="form-control"

value={this.state.firstName} onChange={this.changeFirstNameHandler}/>

</div>

<div className = "form-group">

<label> Last Name: </label>

<input placeholder="Last Name" name="lastName" className="form-control"

value={this.state.lastName} onChange={this.changeLastNameHandler}/>

</div>

<div className = "form-group">

<label> Email Id: </label>

<input placeholder="Email Address" name="emailId" className="form-control"

value={this.state.emailId} onChange={this.changeEmailHandler}/>

</div>

<button className="btn btn-success" onClick={this.saveOrUpdateUser}>Save</button>

<button className="btn btn-danger" onClick={this.cancel.bind(this)} style={{marginLeft: "10px"}}>Cancel</button>

</form>

</div>

</div>

</div>


</div>

</div>

)

}

}

export default CreateUserComponent


ListUserComponent.jsx

import React, { Component } from 'react'

import UserService from '../services/UserService';

class ListUserComponent extends Component {

constructor(props) {

super(props)

this.state = {

users: []

}

this.addUser = this.addUser.bind(this);

this.editUser = this.editUser.bind(this);

this.deleteUser = this.deleteUser.bind(this);

}

deleteUser(_id){

UserService.deleteUser(_id).then( res => {

this.setState({users: this.state.users.filter(user => user._id !== _id)});

});

}

viewUser(_id){

this.props.history.push(`/view-user/${_id}`);

}

editUser(_id){

this.props.history.push(`/add-user/${_id}`);

}

componentDidMount(){

UserService.getUsers().then((res) => {

this.setState({ users: res.data});

});

}

addUser(){

this.props.history.push('/add-user/_add');

}

render() {

return (

<div>

<div className="content-wrapper">

<h2 className="text-center">Users List</h2>

<div className = "row">

<button className="btn btn-primary" onClick={this.addUser}> Add User</button>

</div>

<br></br>

<div className = "row">

<table className = "table table-striped table-bordered">

<thead>

<tr>

<th> User First Name</th>

<th> User Last Name</th>

<th> User Email Id</th>

<th> Actions</th>

</tr>

</thead>

<tbody>

{

this.state.users.map(

user =>

<tr key = {user._id}>

<td> { user.firstName} </td>

<td> {user.lastName}</td>

<td> {user.emailId}</td>

<td>

<button onClick={ () => this.editUser(user._id)} className="btn btn-info">Update </button>

<button style={{marginLeft: "10px"}} onClick={ () => this.deleteUser(user._id)} className="btn btn-danger">Delete </button>

<button style={{marginLeft: "10px"}} onClick={ () => this.viewUser(user._id)} className="btn btn-info">View </button>

</td>

</tr>)

}</tbody>

</table>

</div>

</div>

</div>

)

}

}

export default ListUserComponent


UpdateUserComponent.jsx

import React, { Component } from 'react'

import UserService from '../services/UserService';

class UpdateUserComponent extends Component {

constructor(props) {

super(props)

this.state = {

_id: this.props.match.params._id,

firstName: '',

lastName: '',

emailId: ''

}

this.changeFirstNameHandler = this.changeFirstNameHandler.bind(this);

this.changeLastNameHandler = this.changeLastNameHandler.bind(this);

this.updateUser = this.updateUser.bind(this);

}

componentDidMount(){

UserService.getUserById(this.state._id).then( (res) =>{

let user = res.data;

this.setState({firstName: user.firstName,

lastName: user.lastName,

emailId : user.emailId

});

});

}

updateUser = (e) => {

e.preventDefault();

let user = {firstName: this.state.firstName, lastName: this.state.lastName, emailId: this.state.emailId};

console.log('user => ' + JSON.stringify(user));

console.log('_id => ' + JSON.stringify(this.state._id));

UserService.updateUser(user, this.state._id).then( res => {

this.props.history.push('/users');

});

}

changeFirstNameHandler= (event) => {

this.setState({firstName: event.target.value});

}

changeLastNameHandler= (event) => {

this.setState({lastName: event.target.value});

}

changeEmailHandler= (event) => {

this.setState({emailId: event.target.value});

}

cancel(){

this.props.history.push('/users');

}

render() {

return (

<div>

<br></br>

<div className="content-wrapper">

<div className = "row">

<div className = "card col-md-6 offset-md-3 offset-md-3">

<h3 className="text-center">Update User</h3>

<div className = "card-body">

<form>

<div className = "form-group">

<label> First Name: </label>

<input placeholder="First Name" name="firstName" className="form-control"

value={this.state.firstName} onChange={this.changeFirstNameHandler}/>

</div>

<div className = "form-group">

<label> Last Name: </label>

<input placeholder="Last Name" name="lastName" className="form-control"

value={this.state.lastName} onChange={this.changeLastNameHandler}/>

</div>

<div className = "form-group">

<label> Email Id: </label>

<input placeholder="Email Address" name="emailId" className="form-control"

value={this.state.emailId} onChange={this.changeEmailHandler}/>

</div>

<button className="btn btn-success" onClick={this.updateUser}>Save</button>

<button className="btn btn-danger" onClick={this.cancel.bind(this)} style={{marginLeft: "10px"}}>Cancel</button>

</form>

</div>

</div>

</div>

</div>

</div>

)

}

}

export default UpdateUserComponent


ViewUserComponent.jsx

import React, { Component } from 'react'

import UserService from '../services/UserService';

class ViewUserComponent extends Component {

constructor(props) {

super(props)

this.state = {

_id: this.props.match.params._id,

user: {}

}

}

componentDidMount(){

UserService.getUserById(this.state._id).then( res => {

this.setState({user: res.data});

})

}

render() {

return (

<div>

<br></br><div className="content-wrapper">

<div className = "card col-md-6 offset-md-3">

<h3 className = "text-center"> View User Details</h3>

<div className = "card-body">

<div className = "row">

<label> User First Name: </label>

<div> { this.state.user.firstName }</div>

</div>

<div className = "row">

<label> User Last Name: </label>

<div> { this.state.user.lastName }</div>

</div>

<div className = "row">

<label> User Email ID: </label>

<div> { this.state.user.emailId }</div>

</div>

</div>

</div>

</div></div>

)

}

}

export default ViewUserComponent


UserService.js

import axios from 'axios';

const USER_API_BASE_URL = "http://localhost:8081/users";

class UserService {

getUsers(){

return axios.get(USER_API_BASE_URL);

}

createUser(user){

return axios.post(USER_API_BASE_URL, user);

}

getUserById(userId){

return axios.get(USER_API_BASE_URL + '/' + userId);

}

updateUser(user, userId){

return axios.put(USER_API_BASE_URL + '/' + userId, user);

}

deleteUser(userId){

return axios.delete(USER_API_BASE_URL + '/' + userId);

}

}

export default new UserService()


Download complete source code from GitHub:

https://github.com/knowledgefactory4u/MERNstack-dev.git

then,

npm install

npm start

by, Sibin

Web solution consultant for startups

+91-8075866854
Happy coding

Comments