noidilin

noidilin's projects.

here are the projects I've worked on, from frontend product experiences to cloud delivery platforms. each project reflects how i connect interface quality with deployment, reliability, and operations.

Hiraya project screenshot showing the portfolio and platform interface.
cloud platform/2026/platform engineering
live

hiraya

An AWS EKS delivery platform using Terraform, GitHub Actions, Argo CD, and observability workflows.

story

Build a repeatable path from application code to AWS EKS with Terraform-owned infrastructure, GitOps handoff, and operational visibility.

  • Terraform provisions the AWS/EKS foundation, ECR, VPC, and platform access modules.
  • GitHub Actions builds images, validates service catalogs, and updates GitOps manifests.
  • Argo CD owns Kubernetes application sync, platform add-ons, and monitoring manifests.

outcome: Includes Compose smoke tests, GitOps render checks, and Prometheus/Grafana observability paths.

AWS EKSTerraformArgo CD
[github][live demo]
Portfolio 3D screenshot showing an immersive motion portfolio hero.
interactive portfolio/2026/creative frontend
live

portfolio-3d

A 3D portfolio experience built with React Three Fiber and smooth GSAP motion.

story

Explore a motion-heavy portfolio shell around a responsive React Three Fiber scene and animated presentation copy.

  • Full-viewport Canvas scene with drei Environment, Lightformer, Float, and a custom Planet component.
  • GSAP, Lenis, and animated text components shape the portfolio motion system.
  • Vite, React 19, TypeScript, and Tailwind CSS keep the creative frontend lightweight.

outcome: A visual experiment for CG-inspired personal portfolio storytelling.

React Three FiberGSAPVite
[github][live demo]
DRelation frontend screenshot showing the hematology assessment interface.
healthcare assessment/2026/frontend engineering
client work

drelation-frontend

A Next.js 16 assessment frontend for hematology image tests, reports, and group workflows.

story

Guide users through hematology image testing, checkout, group distribution, and report review flows.

  • Tokenized individual, group, advisor, free, and paid report routes support multiple assessment paths.
  • Report types model accuracy, category performance, weak points, and group question consistency.
  • Storybook-backed Next.js 16 component system uses Radix UI, React Hook Form, Zod, and Tailwind CSS.

outcome: Outcome and adoption details are placeholders until product metrics can be collected.

Next.js 16React 19Tailwind CSS 4
[github][live demo]
Misegoto frontend screenshot showing the restaurant repair matching dashboard.
marketplace dashboard/2026/frontend engineering
live

misegoto-frontend

A Next.js 16 public site and dashboard frontend for restaurant repair matching.

story

Support restaurant and repairer dashboards across repair requests, invoices, payments, profiles, and notification settings.

  • Separate restaurant and repairer dashboard routes model each side of the repair marketplace.
  • Invoice checkout paths support card and bank-transfer payment flows with payment-result handling.
  • next-intl, Auth0/Firebase providers, and shared dashboard shells support localized user journeys.

outcome: Outcome and marketplace metrics are placeholders until approved public numbers are available.

Next.js 16React 19next-intl
[github][live demo]
Misegoto admin frontend screenshot showing the operations dashboard.
admin operations/2026/frontend engineering
client work

misegoto-admin-frontend

A Next.js 16 admin console for Misegoto operations, payments, invoices, and reviews.

story

Centralize operator workflows for requests, restaurants, repairers, invoices, payouts, store payments, and reviews.

  • Localized admin routes cover request, restaurant, repairer, invoice, payout, payment, and review management.
  • Auth-guarded dashboard layout combines sidebar navigation, language switching, and reusable shadcn/ui components.
  • Forms and data workflows use TanStack Query/Table, React Hook Form, Zod, Axios, and Storybook documentation.

outcome: Outcome and operations metrics are placeholders until stakeholder-approved numbers are collected.

Next.js 16React 19shadcn/ui
[github]
Next Convex screenshot showing the onboarding home page and interactive tag.
realtime app/2026/full-stack experiment
experiment

next-convex

A Next.js 16 onboarding app exploring Convex realtime data and auth flows.

story

Explore Next.js 16 App Router patterns with Convex realtime data, Better Auth, and an interactive 3D onboarding surface.

  • Current-user data flows through Convex, Better Auth, React cache, RSC streaming, and Suspense.
  • Authenticated users can create posts and browse a blog backed by server actions and form validation.
  • Interactive 3D tag and presence-oriented UI experiments use React Three Fiber and Convex presence.

outcome: Learning sandbox for auth, realtime data, server/client boundaries, and RSC streaming patterns.

Next.js 16ConvexBetter Auth
[github][live demo]
Layers screenshot showing a collaborative design-tool landing page concept.
ui motion study/2026/frontend prototyping
experiment

layers

An animated UI study blending shadcn/ui components with Motion-driven layout play.

story

Prototype a landing page for a collaborative design tool while practicing shadcn/ui composition and Motion interactions.

  • Hero interactions use draggable design mockups, animated pointers, and staged Motion sequences.
  • shadcn/ui patterns, Radix primitives, CVA variants, and next-themes shape the component system.
  • Infinite ticker, integrations, feature hover states, and entrance animations explore motion vocabulary.

outcome: UI study used to compare motion patterns and component customization techniques.

Next.js 15Motionshadcn/ui
[github][live demo]