Senior Data Analyst Portfolio & Custom CMS
A high-performance, professional portfolio platform with a custom-built 'Digital Command Center' (CMS). It empowers a Senior Data Analyst to manage complex case studies, publish blogs, and handle client inquiries with absolute freedom—no coding required.
The Problem
The client, a Senior Data Analyst, needed a professional digital presence to showcase resumes, detailed project case studies, and insights via a blog. They already owned a domain and email on Hostinger, but faced a major roadblock: deploying a modern, dynamic application there would require purchasing an expensive Virtual Private Server (VPS). They needed a cost-effective solution that didn't sacrifice speed or professionalism. Furthermore, they required complete autonomy to update content dynamically without relying on a developer for every change.
The Solution
I engineered a hybrid cloud architecture to solve the cost challenge. We kept the domain on Hostinger but rerouted web traffic to **Vercel** (a high-speed, free global hosting network), eliminating expensive VPS costs entirely. I then developed a secure, bespoke Admin Panel. By integrating the **TipTap Editor** (providing an 'MS Word-like' writing experience) and **Cloudinary** (for automated image handling), I created a seamless interface where the client can manage their entire digital footprint effortlessly.
Key Features
Professional Resume Hub
The public site features a dedicated section where visitors can either view the client's professional resume directly in the browser or download it as a PDF with a single click.
MS Word-like Content Editor (TipTap)
For creating Blogs and Case Studies, I integrated the **TipTap** editor into the admin panel. This gives the client a familiar interface to write text, format headings, align paragraphs, and structure their deep-dive content exactly how they want it without knowing HTML.
Smart Draft System
The admin panel includes a 'Draft Mode' capability. The client can write blog posts or case studies and save them as drafts to edit later, ensuring only polished, final content is published to the live site.
One-Click Newsletter Broadcast
I built a powerful notification system. Whenever a new blog is published, the admin can click a single button to trigger the **Resend API**, instantly sending a beautifully formatted email notification to all subscribed users.
Intelligent Image Management (Cloudinary)
The client can upload images directly within the blog/project editor. I used **Cloudinary** to automatically store, optimize, and resize these images in the cloud. The client also has controls to align images (top, center, bottom) within their text posts easily.
High-Speed Triple-Action Contact Form
When a visitor submits the contact form, three actions happen simultaneously and instantly, thanks to the **Resend API** (a fast HTTP email service): 1) The message is saved to **MongoDB** (the database). 2) The admin receives an immediate notification email. 3) The visitor receives a polite auto-confirmation email.
Admin Message Tracking Dashboard
Inside the secure admin panel, the client can view a list of all received contact messages. I implemented a feature allowing them to mark messages as 'Read' or 'Unread', ensuring they never lose track of a potential lead or inquiry.
Bank-Grade Security (Hashed OTPs)
Security was paramount. Login requires a password plus a 2FA One-Time Password (OTP). Crucially, these OTPs are stored in the database in a 'hashed' (scrambled) state and automatically delete after 5 minutes. Even if the database were compromised, the login codes would be useless to an attacker.
Development Process
Strategic Architecture & Cost Saving
Devised the plan to leverage the client's existing Hostinger assets for domain/email while using Vercel for free, high-performance application hosting.
Security-First Backend
Implemented the **NextAuth** system immediately, ensuring that password hashing and the complex Hashed OTP logic with 5-minute expiration timers were working correctly before building UI.
Modern UI/UX Design
Utilized **shadcn/ui** component blocks for a clean, professional look and **Framer Motion** to add smooth, subtle animations to page transitions and interactive elements.
CMS Integration
Connected the **TipTap** rich text editor and **Cloudinary** image uploader into the admin forms, bridging the gap between user input and database storage.
Challenges & Solutions
Slow Email Delivery with SMTP
Initially, I used a traditional tool called NodeMailer. It uses an 'SMTP handshake' method which takes several seconds to connect to a server, making the contact form feel slow and clunky.
Ensuring OTP Security
Storing temporary login codes (OTPs) in plain text in a database is a security risk. If the database is leaked, valid login codes are exposed.
Complex Image Alignment for Non-Coders
The client needed the ability to align images (left, center, right) within a blog post without knowing CSS code.
Results & Impact
Monthly Hosting Cost
$0 (vs VPS cost)
Client Autonomy
100% No-Code Management
Security Level
Hashed 2FA Enabled
Key Learnings
- •Combining **Hostinger** DNS with **Vercel** hosting is an incredibly powerful strategy for delivering dynamic, low-cost solutions to freelance clients.
- •For modern web apps, HTTP-based email APIs like **Resend** are vastly superior in speed and reliability compared to traditional SMTP transports like NodeMailer.
- •Implementing 'Hashed OTPs with TTL' is a gold standard for secure authentication flows that should be used in serious applications.
Future Enhancements
- •User Interaction System: Adding a 'Like' and 'Comment' feature to every blog post to build a community and increase reader engagement.