HariDev | Full‑Stack Developer Portfolio logo
Selected work

Projects that connect product clarity with engineering execution.

A collection of systems, interfaces, and product experiments built with screenshots, source links, README notes, and live demos.

Fullstack

Build ownership

Production

Ready delivery

Demo + Code

Proof included

Showcase

Featured builds

Every card includes project screenshots, GitHub, README, live demo, stack, and the key product story.
Tool Mặt bằng

Tool Mặt bằng

A Payload-based floor-plan management tool that helps teams organize layout content and publish updates with a cleaner editorial workflow.

TypeScript

Problem

Teams needed a clearer way to present and manage floor-plan information without relying on scattered static assets and manual content updates.

Solution

Built a Payload-based tool that structures layout content, centralizes updates, and gives editors a faster workflow for publishing floor-plan related information.

Impact

Made floor-plan content easier to maintain, reduced manual update overhead, and created a more scalable base for future product and content expansion.

Realtime chat BE

Realtime chat BE

A NestJS backend for real-time chat features, focused on socket communication, room coordination, and scalable live message handling.

TypeScript

Problem

The chat product needed a backend that could handle real-time messaging, room coordination, and socket-based communication reliably as usage grew.

Solution

Implemented a NestJS backend with WebSocket support to manage live events, room state, and message delivery through a cleaner server-side architecture.

Impact

Created a stable real-time foundation for the chat experience and made it easier to extend features like rooms, presence, and live interactions.

Realtime Chat FE

Realtime Chat FE

A Next.js real-time chat interface built for fast messaging, live room updates, and a smoother communication experience.

TypeScript

Problem

Users needed a responsive chat interface that could feel instant, stay easy to use, and work smoothly with real-time events from the backend.

Solution

Built a Next.js front end connected to Socket.IO for live messaging, room updates, and a fast feedback loop across the core chat experience.

Impact

Delivered a more interactive user experience, reduced friction in real-time communication, and provided a practical base for shipping new chat features.

NhaphoHCM Backend

NhaphoHCM Backend

A backend platform for a real-estate product, built to manage listings, content workflows, and supporting APIs in one system.

TypeScript

Problem

The real-estate product needed a backend that could organize listings, content, and operational workflows in one maintainable system.

Solution

Developed a central backend and admin workflow to manage property data, content operations, and the APIs required by consumer-facing experiences.

Impact

Improved data consistency across the platform and gave the product a stronger backend foundation for scaling listing and content workflows.

Nhaphohcm Mobile App

Nhaphohcm Mobile App

An Expo-based mobile app for real-estate browsing, focused on helping users explore listings and property details on the go.

TypeScript

Problem

Property seekers needed a mobile experience that made it easier to browse listings, review details, and stay engaged on the go.

Solution

Built an Expo-based mobile app with modern navigation, reusable client-side architecture, and mobile-friendly flows for real-estate discovery.

Impact

Expanded the product to a mobile channel, improved accessibility for on-the-go users, and created a better foundation for iterative feature delivery.

BabyThree

BabyThree

A Payload-based commerce implementation tailored for an online store experience with structured product management and scalable storefront workflows.

TypeScript

Problem

The store needed an online shopping experience that could present products clearly and support a smoother purchase journey for customers.

Solution

Adapted a Payload commerce foundation into an e-commerce implementation with structured product management, storefront workflows, and scalable content control.

Impact

Provided a maintainable commerce base, improved how products are managed and presented, and made future storefront iteration easier.

Figma Clone

Figma Clone

A collaborative Figma-style editor with real-time cursors, comments, and canvas interactions built using Next.js, Liveblocks, and Fabric.js.

Next.jsTypeScriptLiveblocksFabric.js+2

Problem

Design collaboration tools are often too heavy for small teams that still need live editing, visual feedback, and shared canvas interactions.

Solution

Built a collaborative Figma-style editor with Next.js, Liveblocks, and Fabric.js to support real-time cursors, comments, reactions, and canvas editing.

Impact

Demonstrated a practical real-time collaboration workflow and proved out the technical foundation for richer browser-based design tooling.

Pax Packing project screenshot

Pax Packing

A Shopify e-commerce website for tapes, packaging, and household products.

LiquidShopifyCSSHTML+1

Problem

The brand needed an e-commerce storefront that could organize product categories and support customer purchases smoothly.

Solution

Built and optimized Shopify Liquid templates with responsive styling and clear product browsing flows.

Impact

Created a practical commerce site that supports product discovery and everyday store operations.

Outdoor Furniture project screenshot

Outdoor Furniture

A Shopify e-commerce website for furniture and household products.

LiquidShopifyCSSHTML+1

Problem

The store needed a polished commerce experience that could present products clearly and perform well for SEO.

Solution

Customized Shopify Liquid templates, responsive layouts, and front-end interactions for a clean shopping experience.

Impact

Delivered a maintainable storefront with clearer product presentation and stronger page performance foundations.

Tool SEO project screenshot

Tool SEO

Featured

A web application for SEO workflows including Google index checks, ranking checks, and page speed analysis.

Next.jsASP.NET CoreCSSLinux Ubuntu

Problem

SEO teams needed faster access to technical checks without jumping between multiple tools.

Solution

Built a focused SEO tooling interface with backend services for index, ranking, and performance checks.

Impact

Reduced manual SEO checking time and made technical audits easier to repeat.

Mazda CMS project screenshot

Mazda CMS

Featured

A CMS for managing mobile app and website content for Thaco Auto Company.

ReactASP.NET CoreMUITailwind CSS

Problem

The business needed a centralized content workflow for both mobile and web channels.

Solution

Developed a React-based CMS backed by ASP.NET Core APIs, with a clean management interface for content teams.

Impact

Centralized content operations and made multi-channel updates easier for internal teams.

Toyota Website project screenshot

Toyota Website

Featured

A modern Toyota product landing experience with product comparison, product details, and customer email workflows.

HTMLUmbraco CMSCSSASP.NET

Problem

Customers needed a clearer way to discover Toyota products and compare details before contacting the business.

Solution

Built a structured landing experience with product comparison, detailed product pages, and email touchpoints for customer follow-up.

Impact

Improved product discovery and created a smoother path from browsing to customer inquiry.

Philosophy

How I think about projects

A good project is not a pile of features. It is a set of decisions that make the product easier to use and easier to evolve.

01

From problem to scope

Define the outcome before choosing the stack or polishing the UI.

02

From UI to system

Treat interface, data model, and APIs as one connected product experience.

03

From launch to iteration

Ship in slices, observe real behavior, and improve the system deliberately.

Contact

Have a product idea or system to improve?

I can help turn unclear requirements into a clean, shippable product path.

Best for

Portfolio websites, CMS builds, product MVPs, and performance-focused frontends.

Working style

Async-friendly, structured, direct communication with visible progress.

Response

Usually within 24 hours for collaboration and freelance inquiries.