DEV Community

Cover image for Day 67 of Learning MERN Stack
Ali Hamza
Ali Hamza

Posted on

Day 67 of Learning MERN Stack

#node #express #mongodb #hostpage

Hello Dev Community! 👋

It is officially Day 67 of my continuous daily sprint toward mastering the full-stack MERN ecosystem! After wiring up dynamic booking checkouts on the client side, today I flipped the script and kicked off development on the supply-tier of our application: Engineering the Host Management Engine and a Reusable Dynamic Listing Form!

In top-tier software deployment, writing separate files for "Adding" a record and "Editing" a record is a huge anti-pattern that creates redundant, unmaintainable code blocks. Today, I engineered a highly flexible polymorphic form layout that manages both transitions independently within a single view layer!

🧠 What I Built on Day 67 (Polymorphic Views & Multipart Stream Prep)

As evidenced inside my workspace tracking blueprints across image_d41dcb.jpg and Screenshot (157).png, the host layer integrates high-end engineering configurations:

1. Template Polymorphism (edit-homes.ejs)

Instead of duplicating input code wrappers, I centralized my interface inside a single view file. By leveraging conditional EJS evaluations, the server dynamically tracks state:

  • Creation Mode: Renders clean layout blocks titled "Add New HOME".
  • Mutation/Edit Mode: Detects existing data objects, populates inputs with current database fields, updates action targets dynamically, and shifts labels to "Edit Home".

2. Multi-Part Binary Ingestion Config (enctype)

Because our listing needs physical imagery to attract conversions, I configured the inbound tag block using enctype="multipart/form-data". This primes the request routes to cleanly pass raw file streams (Main Banner and Cover Photo sets) straight into the custom Multer middleware arrays I fine-tuned earlier on Day 60.

3. Hyper-Local UX Polish

As showcased on the front-facing layout browser matrix, the inputs contain clean placeholder guidelines (such as e.g. Gulberg III, Lahore for positioning lookups and localized Price tracking metrics marked explicitly in PKR).

🛠️ View Layer Configuration Look

Here is a snippet of how the data fields are structured inside the code structure to maintain absolute input predictability:


html
<!-- Excerpt from edit-homes.ejs tracking dynamic form bindings -->
<form action="/host/<%= editing ? 'edit-home' : 'addhome' %>" method="POST" enctype="multipart/form-data">
  <input type="hidden" name="_id" value="<%= editing ? home._id : '' %>">

  <div class="input-group">
    <label>House Name</label>
    <input type="text" name="housename" placeholder="e.g. Royal Azure Villa" value="<%= editing ? home.housename : '' %>">
  </div>

  <!-- File stream target fields -->
  <input type="file" name="mainimage" accept="image/*">
</form>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)