Project-Based Learning: a MERN stack application

The MERN stack (MongoDB, Express.js, React, and Node.js) is popular for building web applications. In this article, I will be documenting a camping site application that allows users to leave comments on campsites and favorite their favorite campsites.

First, we will set up the backend of our application using MongoDB, Express.js, and Node.js. MongoDB will be used as our database, Express.js will be used to create our API, and Node.js will be used to run the server.

We will create a new project and install the necessary packages, and will use the express-generator package to set up our Express.js application quickly:

npx express-generator nucampsite
cd nucampsite
npm install

Next, we will install MongoDB and connect it to our application. We will be using the mongoose package to interact with our MongoDB database:

npm install mongoose

Once we have MongoDB and mongoose set up, we can create our campsite model and schema. This will store information about each campsite, such as its name and location:

const mongoose = require('mongoose');
const Schema = mongoose.Schema;

const campsiteSchema = new Schema({
  name: String,
  location: String,
  comments: [{
    type: Schema.Types.ObjectId,
    ref: 'Comment'
  }],
  favorite: {
    type: Boolean,
    default: false
  }
});
const Campsite = mongoose.model('Campsite', campsiteSchema);

We also create a comment schema and model:

const commentSchema = new Schema({
  text: String,
  author: String
});

const Comment = mongoose.model('Comment', commentSchema);

Now that we have our campsite model, we can create routes for our API. We will create routes for adding a new campsite, getting a list of all campsites, getting a specific campsite, and leaving a comment on a campsite:

const express = require('express');
const router = express.Router();

router.route('/campsites')
  .get((req, res) => {
    Campsite.find()
      .then(campsites => res.json(campsites))
      .catch(err => res.status(400).json('Error: ' + err));
  })
  .post((req, res) => {
    const name = req.body.name;
    const location = req.body.location;
    const newCampsite = new Campsite({ name, location });
    newCampsite.save()
      .then(() => res.json('Campsite added!'))
      .catch(err => res.status(400).json('Error: ' + err));
  });
router.route('/campsites/:id')
  .get((req, res) => {
    Campsite.findById(req.params.id)
      .then(campsite => res.json(campsite))
      .catch(err => res.

The next steps for the project would be to complete the routes for the campsite and comments. This would include adding routes for updating and deleting campsites, as well as adding and deleting comments on a campsite.

The next step would be to create the application's front end using React.js. We would create a component for displaying a list of campsites, a component for displaying a single campsite, a component for adding a new campsite, and a component for leaving a comment on a campsite. We would also create a component for displaying the favorite campsites.

We would also need to connect the application's front and back ends by making API calls to the routes we created in the backend. This would allow the user to interact with the application and view, add, and modify data in the database.

Lastly, we would need to test and deploy the application. This would include testing the application on a local development server and then deploying it to a live server, such as Heroku or AWS.

Overall, the project is not complicated but requires a solid understanding of the MERN stack and its components and some practice in building web applications.