Day 63 of Learning MERN Stack

Hello Dev Community! 👋

It is officially Day 63 of my continuous daily sprint toward mastering full-stack MERN software engineering! Yesterday, I configured variable dynamic detail views. Today, I engineered a vital interaction layer within my dedicated project practice sprint: Implementing an 'Add to Favourites' workflow triggered straight from user card selections!

In real-world e-commerce or rental engines, managing personal collections requires setting up explicit backend relationships between primary records (like a listing or product) and tracking collections (like user favorites). Today, I linked those states cleanly!

🧠 What I Built & Handled on Day 63 (Cross-Model Linking)

Structuring an interactive wishlist toggle requires passing document references securely between separate model states:

1. Interactive UI Target Handlers

As shown inside my UI grid in "Screenshot (142)_2.jpg", each listing card renders an absolute-positioned heart icon layer. I mapped these assets to pass the corresponding document identifier string directly into my POST routing endpoints when clicked.

2. Post Routing & Cross-Reference Payloads

Inside my router layer, I registered a dedicated target endpoint to receive the favorite mutation commands. The controller grabs the specific target ID from the incoming body or path parameter string and initiates an update sequence.

3. Inserting State into the Favourite Model

I connected the logic with the compiled Favourite model. The controller checks if the item record isn't already added, and maps a fresh relational tracking document linking the user's context directly to the home identifier:

javascript
// A conceptual look at how I engineered the relational save loop today
exports.postAddFavourite = async (req, res, next) => {
    const { homeId } = req.body;

    try {
        // Engineering the relation entry using our model schemas
        const favouriteExists = await Favourite.findOne({ houseId: homeId });

        if (!favouriteExists) {
            const newFavourite = new Favourite({ houseId: homeId });
            await newFavourite.save();
        }

        res.redirect('/favourites'); // Instantly pushing to the Favourites dashboard layout
    } catch (err) {
        console.log("Error inserting item into favourites collection:", err);
    }
};