- Mongo Express React Node (MERN) full-stack app, integrates React frontend with Node.js backend.
- Tutorial code - see 👏 Inspiration below but with customisations - particularly the mongoose connection script is more detailed and react frontend table has proper Bootstrap buttons to avoid error messages with edit & delete links.
- Note: to open web links in a new window use: ctrl+click on link
- MongoDB Atlas used as the backend database - requires mongodb to be running (or use Mongoose and Heroku mLab to access)
- Mongoose models used to interact with the database
- Postman used to test the backend, although the tutorial uses Insomnia, a similar REST API
- Note: I used 'my ip address' as the whitelist network access in MongoDB.Atlas but this required daily updating when my ip address changed - otherwise with a non-matching ip address the backend simply did not work. Better to use the localhost address to avoid this problem but may be less secure.
- Node.js routes used with controller functions
- React frontend includes a very simple Bootstrap navbar with just 3 links: home (the complete list of users/exercises), Add Exercise & Add User
- Main content is a React table with 5 columns - see screenshots for details
- MongoDB Community Server v4
- Mongoose v5 object modelling for Node.js
- npm mongodb v3 official MongoDB driver for Node.js
- Express.js middleware v4
- Node.js v12
- React framework v17
- Bootstrap v4 component library
- React datepicker v3
- Axios v0.21.1 promise-based http client
- Change to
/backend
directory - Install dependencies using
npm i
- Install nodemon globally if you don't already have it
- Register with MongoDB Atlas, create & configure a database cluster and add cluster connection string to .env file
- Run
nodemon server
for a dev server - Navigate to
http://localhost:5000/
. The server will automatically reload if you change any of the source files
- From top-level directory
mern-stack-tracker
runnpm start
. Frontend will open athttp://localhost:3000/
- Extract from
server.js
- connects to database using mongoose
const uri = process.env.ATLAS_URI;
const options = {
useNewUrlParser: true,
useCreateIndex: true,
useUnifiedTopology: true
}
mongoose
.connect(uri, options)
.catch(error => console.log(error));
const connection = mongoose.connection;
connection.once('open', () => {
console.log("MongoDB database connection established successfully");
});
mongoose.connection.on('error', err => {
logError('mongoose connection error', err);
});
- Extract from
exercise-list.js
- using lifecycle methodcomponentDidMount()
to get list of exercises from backend database using Axios http client, after component output has been rendered to the DOM
componentDidMount() {
axios.get('http://localhost:5000/exercises/')
.then(response => {
this.setState({ exercises: response.data })
})
.catch((error) => {
console.log(error);
})
}
- All data stored in collections in a mongoDB Atlas database that costs nothing to use in the free tier option. Data can be edited from the mongoDB.Atlas collection or from within the React frontend
- Uses the React componentDidMount() method
- Status: Working full-stack app
- To-Do: Nothing
- The Best React JS by Beau Carnes: Learn the MERN Stack Full Tutorial MongoDB, Express, React, Node js
- React documentation
- N/A.
- Repo created by ABateman, email: gomezbateman@yahoo.com