How to add watchlist/wishlist item to mongoDb using nodejs and react js?

Backend Development
1

Am trying to learn full-stack development using the MERN approach. I have a situation where when a user adds the item to its watchlist, which has the following filed

movie id
movie poster(an image)
movie name 
released date

I want to store this to MongoDB Atlast using mongoose query and node.js

and such that when a user clicks on remove button on front-end it gets deleted.

However I know I have to use get, post, put, patch, delete APIs respectively. But my concern is, how is this possible or can be achieved when you have image type in your schema?

In short, how can I store the data which has an image for example below card?

img

Thanks for your help and your advice. Please see the Schema code below which am trying please do correct me where am wrong also advice me on related tutorial,

//on watchlistSchema.js
import { express } from "express";
import { mongoose } from "mongoose";

const watchlistSchema = mongoose.Schema({
    name: {
        type: String,
    },
    image: {
        type: Buffer,
    },
});

const watchlistItem = mongoose.model("newWatchlist", newWatchlistSchema);
module.exports = watchlistItem;

//on route.js
const watchlistItem = require("../model/watchlistSchema");
router.post("/watchlistitem", (req, res) => {
    res.send("hi ");
    console.log("watchlist item is here");
});

Trying to test on POSTMAN

img2

javascriptnode.jsreactjsmongodbexpress

2

Its possible in a few ways, using something like gridfs, which is recommended in the mongodb docs can help you “save” large binary data in your mongodb database.

However, this usually isn’t the optimal way to save this kind of data due to 2 factors.

It’s usually up to another storage system to save binary data, like images, videos and other types of files. Mongodb can handle these large binary data-types, but it isn’t optimized for them. Saving the images in the file-system itself, or a dedicated “bucket” and then having a reference to that image/asset within mongodb will scale dramatically better.

It’s not recommended to save the same information multiple times, especially if saving it multiple times increases your database size dramatically. So for example if 5 people put Encanto on their watch list, you save Encanto’s movie poster 5 times. This might not be a big deal, but last I checked this movie is still on repeat within multiple homes. As such it might not be 5 times it might be more like 50 million times! That’s a lot of data that could actually be saved once somewhere, either within the mongodb database, or within an external store, and then you just save a reference to that single entity.

Finally it looks like you’re missing most of the express related code to get the actual request into mongodb via mongoose. So I suggest that you focus on one aspect of the stack first, you want to setup express + postman so you can correctly call the end-point.

In the mean-time, I’d read-up on some database design, as that would be the “next step” after you get express setup correctly.

I’d also keep in mind that saving the image itself directly might not be needed if you have another reference to the image, like its name or url. That way you can bypass saving the image in its entirety.

Good luck, keep building, keep learning :+1:

1 Like
3

Hi @bradtaniguchi

Thanks a million for such a brilliant explanation, now my actually worry and concepts are more clear when and where to use the database, however, I just want to know the last thing you said we can bypass a URL of the image which sounds like a solution to me as well… But could you please let me know how is that possible I mean any code snippet or steps could be really helpful?

Thanks once again for all your help and valuable guidance sir.

4

There are multiple ways to do it, but what I would do is save the watchlist model as:

const watchlistSchema = mongoose.Schema({
    id: {
        type: mongoose.Schema.Types.ObjectID, 
        ref: "Movies"
    },
    image: {
        type: Buffer,
    },
});

Whenever you want to access the information, in the watchlist controller you can use

WatchlistModel.find(id).populate('id')

I’m nopt a 100% sure about the syntax but the idea should be right