📅 Date: June 27, 2026
🧠 Mood: The Publisher 🚀
🔥 Topic: Web Dev Day 22: UI Styling & Vercel Deployment
🌐 Going Live: CineMetrics Phase 1
Building a backend server and testing endpoints in Postman is satisfying, but nothing beats the feeling of a live URL. For the past three days, I have been locked into the terminal, establishing the architecture, writing MongoDB aggregation pipelines, and configuring the Fetch API. Today, I finally put a face on the data and shipped it to the web.
The goal for today was two-fold: First, transform the raw HTML structure into a clean, modern, dark-themed User Interface (UI). Second, deploy the frontend so anyone on the internet can interact with the analytics engine. Phase 1 of CineMetrics is officially complete and live.
🚀 Live Demo: cinemetrics-zeta.vercel.app
💻 Source Code: github.com/lamesahil/cinemetrics
🎨 CSS Architecture & UI Design
For the UI, I avoided heavy CSS frameworks like Tailwind or Bootstrap. I wanted to strengthen my raw CSS fundamentals. I focused heavily on CSS Variables (Custom Properties) to maintain a consistent dark mode theme and Flexbox for responsive layouts.
1. Mobile-First Responsiveness
Following SEO best practices, the UI is built with a Mobile-First approach. Using CSS Media Queries, the movie grid automatically reflows from a single column on mobile to three columns on desktop. A responsive design is non-negotiable for modern web applications.
2. Dynamic DOM Updates
The UI is entirely data-driven. When the Fetch API pulls the movie list and the aggregation data from the Node.js backend, JavaScript dynamically generates the HTML elements (Cards, Tags, and Analytics badges) and injects them into the DOM without requiring a page reload.
🚀 The Vercel Deployment Strategy
Localhost is safe, but production is where real engineering happens. I chose Vercel for the frontend deployment because of its seamless integration with GitHub.
- CI/CD Pipeline: Vercel automatically tracks the
mainbranch of my GitHub repository. Any time I execute agit push, Vercel detects the change, triggers a new build, and deploys the updated code instantly. - Environment Variables: The most critical step was updating the
API_URLin my frontend code. On localhost, it pointed tohttp://localhost:5000. I had to ensure the production build points to the live backend server.
🎯 The Road to Phase 2
Seeing my own backend data dynamically populate a live, beautifully styled UI on a public URL is a massive milestone. Phase 1 of CineMetrics is complete. The foundation is solid. Next week, we begin Phase 2: Implementing JWT Authentication and turning this personal tracker into a social network. Time to rest the brain and prepare for the next sprint.
No comments:
Post a Comment