Learn the MERN Stack - Full Tutorial (MongoDB, Express, React, Node.js)

What people said

Recommends ousecTic · 2020-01 · Stack Overflow · on “How to fire mongodb inside react and node app”

I also notice that you are working with a MERN (mongo, express, react, node) stack so watch this video to build full stack application => [this video]

Cites Omer Mustafa · 2019-10 · Stack Overflow · on “Import of Mongoose schema in Node js app not working properly”

I'm getting an error message whenever i try to import in my basic exercise app Exercise-Tracker-MERN\backend\models\exercise.model.js:1 (function (exports, require, module, __filename, __dirname) { import Schema from "mongoose"; import Schema from "mongoose"; const mongoose = require("mongoose"); const exercise = new Schema( { username: { type: String, required: true }, description: { type: String, required: true }, duration: { type: Number, required: true }, date: { type: Date, required: true } }, { timestamps: true } ); const Exercise = mongoose.model("Exercise", userSchema); module.exports = Exercise; I'm following tutorial: [this video]

Cites Andrew Shearer · 2019-10 · Stack Overflow · on “Error: MongoError: not authorized on admin to execute command”

So, I am following along with Beau in this [this video] tutorial over on the freeCodeCamp YouTube learning to build a simple app using the MERN Stack. While using Postman however, I am getting this error message when trying to send a POST request to localhost:5000/users/add : "Error: MongoError: not authorized on admin to execute command { insert: \"users\", documents: [[{_id ObjectIdHex(\"5d96cd3f31092833b8253260\")} {username Andrew} {createdAt 2019-10-04 04:40:31.321 +0000 UTC} {updatedAt 2019-10-04 04:40:31.321 +0000 UTC} {__v 0}]], ordered: true, writeConcern: { w: \"majority\" }, lsid: { id: {4 [40 157 203 39 59 227 66 72 188 54 104 29 179 241 37 148]} }, txnNumber: 2.000000, $clusterTime:

Cites user12609637 · 2020-01 · Stack Overflow · on “App won't store anything on MongoDB local database”

I followed this tutorial to build an exercise tracker [this video] I tried to use MongoDB Atlas, and I even copied their code word for word but kept getting this error when I typed nodemon server into my terminal: (node:17960) UnhandledPromiseRejectionWarning: MongooseTimeoutError: Server selection timed out after 30000 ms at new MongooseTimeoutError (C:\Users\bushr\mern-exshr\mern-exercise-tracker\backendercise-tracker\backend\node_modules\mongoose\lib\error\timeout.js:22:11) at NativeConnection.Connection.openUri (C:\Users\bushr\mern-exercise-tracker\backend\node_modules\mongoose\lib\connection.js:763:19) at Mongoose.connect (C:\Users\bushr\mern-exercise-tracker\backend\node_modules\mongoose\li

Cites Mario Garcia · 2020-03 · Stack Overflow · on “UnhandledPromiseRejectionWarning: MongooseServerSelectionError”

I am following these tutorials as I wanted to start with MongoDB and the MERN stack: [LINK] [this video] Everything was fine until my connection with the database failed. I checked the username/password million times, I copied and pasted the original in case I had some syntax error. This is the error: (node:10156) UnhandledPromiseRejectionWarning: MongooseServerSelectionError: connection <monitor> to 34.249.129.6:27017 closed at new MongooseServerSelectionError (C:\Users\Mario\Desktop\ReactProject\MongoDB\mern-tracker\node_modules\mongoose\lib\error\serverSelection.js:22:11) at NativeConnection.Connection.openUri (C:\Users\Mario\Desktop\ReactProject\MongoDB\mern-tracker\node_modules\mongoose\lib\

Cites demiculus · 2020-05 · Stack Overflow · on “Failed to connect to localhost 5000”

I'm also going through the same tutorial: [this video] The problem is with app.use(express.json()); Comment that out and it'll work fine. But then you won't be able to parse JSON data when you're doing post requests. I'm not sure why express.json() doesn't work. But either way you can use Body-Parser to solve that problem. First user npm i body-parser to install it to your package manager in your backend folder. Then copy the below code to your index.js const bodyParser = require('body-parser') app.use(bodyParser.urlencoded({extended: true})) app.use(bodyParser.json()) add this code and you'll be fine. This answer gives a detailed explanation of express.json & body-parser. express.json() is a met

Cites Gideon · 2020-10 · Stack Overflow · on “Trying to use react for the first time with Javascript and Node and am getting an error that I can't use an import statement outside a module”

I have an index.js file with the following code: import React from 'react';import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root') ); I have imported react into my src folder in my app's library with npm install --save Not sure why I get this issue. I also have an App.js file with the following code: import React from 'react'; import {BrowserRouter as Router, Route} from "react-router-dom"; import "bootstrap/dist.css.bootstrap.min.css"; import Navbar from "./components/navbar.component"; import ExercisesList from "./components/exercises-list.component"; import EditExercises from "./components/

Cites mod10aser · 2021-12 · Stack Overflow · on “Localhost/172.. connection timeout”

I am new to MERN and following the following tutorial [this video] When I try to access localhost the connection times out even though the back end is running (server running on port 5000) as well as the front end (when I run npm run start it starts up and says I can run the project on [LINK] or [LINK] ) This is the app.js file import logo from './logo.svg'; import './App.css'; function App() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p> Edit <code>src/App.js</code> and save to reload. </p> <a className="App-link" href=" [LINK] " target="_blank" rel="noopener noreferrer" > Learn React </a> </header> </div> ); } export defau

Cites mod10aser · 2021-12 · Stack Overflow · on “Web page is blank (Problem with react-router)”

I am trying to learn MERN mainly react by following a tutorial ( [this video] ) and I have followed the code exactly but when I run the server and open the web page it is blank. I know the problem is with the four React route paths because if I remove them the web page displays the navbar. I also get no errors when running the server. this is the app.js file code: import React from 'react'; import "bootstrap/dist/css/bootstrap.min.css"; import { BrowserRouter as Router, Route,} from "react-router-dom"; import Navbar from "./components/navbar.component" import ExercisesList from "./components/exercises-list.component"; import EditExercise from "./components/edit-exercise.component"; import CreateE

Cites MYTH · 2022-03 · Stack Overflow · on “Change this react class component into react hooks”

I am watching a tutorial of MERN Stack here in this video MERN [this video] . At the part of 1:41:16 - 1:47:01 I am trying to convert everything into react hooks and everything went well not until for the part of exercise-list component So here is my code when I converted it into react-hook component. import React, { useEffect, useState } from 'react' import { Link } from 'react-router-dom' import axios from 'axios' const Exercise = item => { <tr> <td>{item.exercise.username} </td> <td>{item.exercise.description} </td> <td>{item.exercise.duration} </td> <td>{item.exercise.date.substring(0,10)} </td> <td><Link to={"/edit/" + item.exercise._id}> Edit</Link> | <a href="#" onClick={e => {item.handled