Web Developer

Ruel Miguel Diaz

Selected Work

Projects & Work

A curated collection of projects spanning web development, software engineering, and UI/UX design.

ProjectHealthcare WebsiteGhost Client

MyEdessa

A modern, premium, conversion-focused telehealth website for MyEdessa — physician-guided GLP-1 weight loss treatment. The platform connects patients with licensed healthcare professionals for virtual consultations, tailored treatment programs, and continuous progress monitoring, simplifying the patient journey from initial intake to ongoing care while giving practitioners tools to track outcomes and adjust plans in real time. Design direction was inspired by Amble, Trimi, and Cora, adapted to MyEdessa's warm, natural branding, with a strong focus on accessibility and trust so first-time telehealth users can navigate complex medical information with confidence.

ProjectWebsiteFront-End

FARMURA Website

A community-driven digital platform built to serve agricultural stakeholders, featuring dedicated sections for services, partnership opportunities, and coverage areas. The site was engineered with a component-based architecture for fast load times and smooth navigation across devices, and structured to make it easy for farmers, cooperatives, and partner organizations to find relevant information quickly. This is a modified, self-directed version of the concept and is not the official FARMURA website.

ProjectEvent Decoration WebsiteFront-End

JB's Creation

A creative gallery-style website built for an event decoration business, designed to showcase past events, curated packages, and the overall client experience through rich visual storytelling. The layout emphasizes large, immersive imagery and an intuitive browsing flow so prospective clients can quickly explore services and get in touch. Developed end-to-end on the frontend using React, TypeScript, Tailwind CSS, and Vite for a fast, responsive experience.

WorkFull-Stack Web Application

LGU Client Satisfaction Measurement (CSM)

A web-based feedback collection and analytics platform developed for the Local Government Unit of Tubod to monitor and continuously improve the quality of public service delivery. The system enables citizens to submit structured feedback after transacting with government offices, while giving administrators real-time dashboards and reports to track service performance over time. Built to comply with Anti-Red Tape Authority (ARTA) mandates, it streamlines what was previously a manual, paper-based survey process into a fully digital, auditable workflow.

ProjectE-commerce WebsiteFront-End

DERU

A production-ready e-commerce storefront built around a minimalist shirt collection, designed to deliver a polished, conversion-focused shopping experience from browsing to checkout. The interface pairs sophisticated visual design with practical UX patterns — product filtering, detailed product views, and a streamlined cart flow — to reduce friction for the customer. Built on Next.js, TypeScript, and Tailwind CSS for strong performance, SEO readiness, and long-term maintainability.

ProjectConstruction WebsiteFront-End

Migeru Build Engineers

A premium corporate website built for a construction and engineering firm, designed to establish credibility and showcase completed projects to prospective clients. The design incorporates Philippine market localization — relevant terminology, imagery, and contact conventions — alongside a clean, professional visual identity that reflects the industry's emphasis on precision and reliability. Built with React, TypeScript, and Tailwind CSS for a fast, maintainable, and fully responsive experience across devices.

ProjectE-commerce WebsiteFront-End

Maison (AI-Inspired)

A modern, scalable e-commerce frontend inspired by AI-driven retail experiences, built to demonstrate how thoughtful design and clean architecture can elevate an online shopping platform. The build includes a product showcase, feature highlights, and contact touchpoints, all developed with reusable, well-structured components to support future scaling. Implemented using React.js, TypeScript, and Tailwind CSS to ensure type safety, performance, and design consistency throughout.

ProjectAdmin DashboardFront-End

FARMURA Admin

An administrative dashboard frontend built to support the operational backbone of the FARMURA platform, giving internal staff tools to manage logistics such as transport bookings (pasakay) and delivery requests (pasugo). The dashboard was designed with clarity and efficiency in mind, presenting operational data through organized views so administrators can act quickly on day-to-day tasks. Developed using React.js, TypeScript, and Tailwind CSS, with a dedicated authentication flow to secure access to internal tools.

ProjectFull-Stack Web Application

Journal of Science

A full-stack web system built to support digital journal publication, managing the complete editorial workflow from article submission and review to final publication and public access. The platform includes structured content management, user role handling, and an article browsing experience designed for researchers and readers alike. Built on CodeIgniter and MySQL for a robust, reliable backend, with Tailwind CSS powering a clean, modern presentation layer.

Capstone ProjectFull-Stack Web Application

Web-Based Appointment & Management System

A capstone full-stack system designed and deployed to streamline day-to-day clinic operations, covering patient scheduling, medical records management, and appointment tracking in a single unified platform. The system was built to reduce administrative overhead for clinic staff while giving patients a straightforward way to book and manage appointments online. Developed using Laravel and MySQL, with a focus on data integrity and reliable, real-world operational use.

WorkWeb ApplicationOJT

Image Editor

A browser-based image editing application developed during an on-the-job training engagement, featuring advanced selection and retouching tools including lasso, poly-lasso, and brush-based editing for precise, real-time image manipulation. The tool was built to give users professional-grade editing capabilities directly in the browser, without relying on heavyweight desktop software. Implemented with Vue.js on the frontend and MySQL for persistent data storage, styled with Tailwind CSS.

ProjectFull-Stack Web Application

Boarding House Management System

A tenant and billing management platform engineered to automate the operational workload of running a boarding house, including tenant records, rent collection, payment tracking, and report generation. The system was designed to eliminate manual bookkeeping errors and give landlords a clear, real-time view of occupancy and financials. Built with ASP.NET and MySQL, paired with a Bootstrap-based interface for a clean and accessible user experience.

ProjectFull-Stack Web Application

Document Management System

A secure document management platform built to centralize file storage and streamline retrieval for organizations handling large volumes of records. The system implements role-based access control to ensure sensitive documents are only visible to authorized users, alongside fast search and organized categorization to minimize retrieval time. Developed with ASP.NET and MySQL, prioritizing data security and long-term system reliability.

ProjectDesktop Application

Hotel Reservation System

A desktop-based hotel reservation system designed to automate the full booking lifecycle, from room availability checks and reservations to payment processing and record-keeping. The application was built to reduce front-desk workload and minimize double-bookings through real-time room status tracking. Developed with VB.NET and a MySQL backend for dependable, offline-capable operation suited to on-premise hotel environments.

ProjectDesktop Application

POS and Inventory System

A point-of-sale and inventory management desktop application built to optimize retail operations, covering sales transactions, stock level tracking, and real-time report generation. The system was designed to give business owners immediate visibility into sales performance and inventory health, helping prevent stockouts and reconcile discrepancies quickly. Built using VB.NET with a MySQL database for stable, transaction-safe performance.

ProjectUI Design

Epione App

Epione is a mobile app concept designed to provide students with a safe, anonymous, and accessible space to seek emotional support, guidance, and mental health resources. The design covers the full user journey — onboarding, chat-based support, curated resource libraries, and a community space — all crafted with a calming visual language appropriate for a sensitive, wellness-focused audience. Designed entirely in Figma with a strong emphasis on accessibility, trust, and reducing the stigma around seeking help.

WorkUX DesignWireframe

LGU Client Satisfaction Measurement — Wireframe

A complete UX wireframe set mapping out the citizen feedback journey for a local government service platform, from office and service selection to citizen's charter reference and final feedback submission. The wireframes prioritize accessibility and trust, ensuring the flow is intuitive for citizens of varying digital literacy levels while capturing the structured data local government units need for service quality reporting. Designed in Figma as the foundational UX blueprint that shaped the eventual full-stack CSM application.

ProjectUI Design

Epione Landing Page — Mental Health Service

A dedicated landing page UI designed for Epione, a mental health service platform, built to communicate the brand's mission and convert first-time visitors into engaged users. The layout balances an inviting hero section, clearly structured service explanations, authentic testimonials, and a well-organized footer, all with an emphasis on approachability and emotional safety. Designed in Figma with careful attention to typography, color psychology, and accessibility for a wellness-focused audience.

WorkUI/UX Design

FARMURA — Super App

A comprehensive UI/UX design system for FARMURA's super app, built to serve agricultural stakeholders with a single platform covering authentication, service discovery, and digital wallet functionality. The design work centered on accessibility, trust, and user-centered experiences for a user base that spans varying levels of digital familiarity, ensuring the interface remains intuitive without oversimplifying critical financial and service features. Delivered entirely in Figma, from login and signup flows through to the home dashboard and wallet interface.

ProjectUI Design

Wanderly

A landing page UI concept designed for Wanderly, a travel discovery app, crafted to evoke a sense of adventure while presenting destination content in a clean, digestible layout. The design explores how strong imagery, typography, and section pacing can guide a visitor from initial curiosity toward exploring the app further. Designed in Figma with a focus on visual storytelling appropriate for the travel and lifestyle space.

WorkUI/UX Design

Wine Price Edge Solutions

A mobile-first UI/UX concept created for a wine price comparison platform, designed to help users search, upload data, and interpret pricing analytics with minimal friction. The design emphasizes automation and clarity, translating what could be a data-heavy experience into clean visual flows — including a CSV upload feature and annotation-driven analytics views — that remain approachable for non-technical users. Delivered in Figma with a strong focus on clean design and effective data visualization.

ProjectUI/UX Design

DM Resto

A full interface redesign of a restaurant POS system, reimagined in Figma to improve usability, transaction speed, and overall operator efficiency during high-pressure service hours. The redesign covers the login experience, landing screen, operational dashboard, and menu management, all restructured around clearer visual hierarchy and fewer clicks per task. The result is a system built to reduce training time for new staff while speeding up order processing at the counter.

ProjectUI/UX Design

DateDash App

A mobile-first UI/UX design for DateDash, a dating app concept built around intuitive matching and location-based discovery flows. The design work spanned the full user journey — signup, browsing profiles, matching interactions, and location settings — delivered through detailed wireframes and interactive prototypes to validate usability before development. Designed in Figma with an emphasis on approachable, modern visual design that fits the casual, social nature of the product.

WorkSocial Media

LGU Job Posting

A set of graphic designs created for a local government unit's official job postings, produced for distribution across social media channels to attract qualified applicants. Each design was tailored to specific positions — including administrative, technical, and department head roles — with consistent branding and clear, easy-to-read layouts that communicate job requirements at a glance. Designed in Figma to align with the LGU's visual identity while meeting the practical needs of a fast-moving recruitment process.

Selected Work

Projects
& Work

A curated collection of projects spanning web development, software engineering, and UI/UX design. Click any card to preview.

Note: Some projects are private or offline; only image previews are available.

ProjectHealthcare WebsiteGhost Client

MyEdessa

ProjectWebsiteFront-End

FARMURA Website

ProjectEvent Decoration WebsiteFront-End

JB's Creation

WorkFull-Stack Web Application

LGU Client Satisfaction Measurement (CSM)

ProjectE-commerce WebsiteFront-End

DERU

ProjectConstruction WebsiteFront-End

Migeru Build Engineers

ProjectE-commerce WebsiteFront-End

Maison (AI-Inspired)

ProjectAdmin DashboardFront-End

FARMURA Admin

ProjectFull-Stack Web Application

Journal of Science

Capstone ProjectFull-Stack Web Application

Web-Based Appointment & Management System

WorkWeb ApplicationOJT

Image Editor

ProjectFull-Stack Web Application

Boarding House Management System

ProjectFull-Stack Web Application

Document Management System

ProjectDesktop Application

Hotel Reservation System

ProjectDesktop Application

POS and Inventory System

ProjectUI Design

Epione App

WorkUX DesignWireframe

LGU Client Satisfaction Measurement — Wireframe

ProjectUI Design

Epione Landing Page — Mental Health Service

WorkUI/UX Design

FARMURA — Super App

ProjectUI Design

Wanderly

WorkUI/UX Design

Wine Price Edge Solutions

ProjectUI/UX Design

DM Resto

ProjectUI/UX Design

DateDash App

WorkSocial Media

LGU Job Posting

More coming soon

About

Building at the
intersection of design & engineering

Hello, I'm Ruel Miguel Diaz — a web & software developer and UI/UX designer who designs, develops, tests, and maintains software applications and systems. With hands-on experience in front-end and back-end development, database management, website design, and UI/UX design.

Strong creative and analytical skills, with a collaborative mindset and keen attention to detail. Currently available for freelance projects and creative collaborations.

Skill Set

HTML5

CSS3

JavaScript

Vue.js

React

TypeScript

Next.js

Bootstrap

Tailwind CSS

Laravel

CodeIgniter