Day 73 of Learning MERN Stack

#webdev #tailwindcss #node #ejs

Hello Dev Community! 👋

It is officially Day 73 of my 100-day full-stack engineering journey! After wrapping up an automated file-converter microservice yesterday, today I kicked off a brand new enterprise-grade application layout: MFLIX, a comprehensive Movie Streaming and Discovery Clone! 🎬

Today was all about setting up the project baseline, defining the styling configuration, and building out a highly immersive, production-ready landing interface.

🧠 Key Development Milestones on Day 73

As showcased in my interface output in "Screenshot (169).jpg", the homepage brings together custom server-side rendering and utility-first styling:

1. Unified Streaming Vibe via Tailwind CSS

I configured a deep charcoal/dark background base coupled with vibrant accent elements (like the signature crimson-red search and interactive triggers) to mimic a premium theater experience.

2. Semantic Movie Card Grids & Micro-Interactions

Using EJS data loops, the home page cleanly renders movie listing cards with essential metadata:

Floating Badges: Implemented absolute positioning to lay down contextual star ratings (e.g., ⭐ 7.8) cleanly over the asset poster.
Hover State Reveals: Programmed smooth CSS transition states so that hovering over a movie tile reveals an interactive structural utility button labeled View Details.
Year Stamp Tracking: Embedded subtle metadata positioning inside the card footers to showcase historical context (e.g., 1932, 1936) elegantly.

3. Dynamic Relational Routing Foundation

If you look closely at the active action paths in "Screenshot (169).jpg", every single tile points directly to its unique database mapping index (/moviedetails/:id). The structural layout is fully ready to communicate with MongoDB data layers!

🛠️ A Conceptual View of the EJS Render Loop

Here is how I structured the presentation layer inside the main home template using partial injection and Tailwind arrays:


html
<main class="grid grid-cols-1 md:grid-cols-3 gap-6 p-6 bg-slate-900 text-white">
    <% movies.forEach(movie => { %>
        <div class="relative group rounded-xl overflow-hidden bg-slate-800 shadow-lg">
            <!-- Absolute Floating Rating -->
            <span class="absolute top-3 left-3 bg-black/60 px-2 py-1 text-yellow-400 rounded text-sm">
                ★ <%= movie.rating %>
            </span>

            <img src="<%= movie.poster %>" alt="Poster" class="w-full h-96 object-cover">

            <!-- Hover View Details Overlay -->
            <div class="absolute inset-0 bg-black/80 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                <a href="/moviedetails/<%= movie._id %>" class="bg-red-600 text-white px-6 py-2 rounded-full font-semibold">
                    View Details
                </a>
            </div>
        </div>
    <% }) %>
</main>