{
  "$type": "site.standard.document",
  "bskyPostRef": {
    "cid": "bafyreiacy7yjnar6fa2enpl3m4wsv4i25324waeeyafrzo66evmoazuwfi",
    "uri": "at://did:plc:25rdn5elo5izoxrmtis34zuk/app.bsky.feed.post/3mouzdmbpxjd2"
  },
  "coverImage": {
    "$type": "blob",
    "ref": {
      "$link": "bafkreibmd5k6kvh3jzflazffxr7eutt55gblr2knemdepowsuucdle45ya"
    },
    "mimeType": "image/webp",
    "size": 47062
  },
  "path": "/ali_hamza_589ec7b3eb6688d/day-63-of-learning-mern-stack-44km",
  "publishedAt": "2026-06-22T13:21:19.000Z",
  "site": "https://dev.to",
  "tags": [
    "node",
    "express",
    "mongodb",
    "buildinpublic"
  ],
  "textContent": "Hello Dev Community! 👋\n\nIt 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!**\n\nIn 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!\n\n##  🧠 What I Built & Handled on Day 63 (Cross-Model Linking)\n\nStructuring an interactive wishlist toggle requires passing document references securely between separate model states:\n\n###  1. Interactive UI Target Handlers\n\nAs 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.\n\n###  2. Post Routing & Cross-Reference Payloads\n\nInside 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.\n\n###  3. Inserting State into the Favourite Model\n\nI 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:\n\n\n    javascript\n    // A conceptual look at how I engineered the relational save loop today\n    exports.postAddFavourite = async (req, res, next) => {\n        const { homeId } = req.body;\n\n        try {\n            // Engineering the relation entry using our model schemas\n            const favouriteExists = await Favourite.findOne({ houseId: homeId });\n\n            if (!favouriteExists) {\n                const newFavourite = new Favourite({ houseId: homeId });\n                await newFavourite.save();\n            }\n\n            res.redirect('/favourites'); // Instantly pushing to the Favourites dashboard layout\n        } catch (err) {\n            console.log(\"Error inserting item into favourites collection:\", err);\n        }\n    };\n",
  "title": "Day 63 of Learning MERN Stack"
}