Case Study — 01 of 03

Jin Forge Cloud

Date
Last updated: Loading...
Type
Cloud Dashboard
Stack
React 18, Supabase, Azure SWA
Status
Live

A modern cloud resource management dashboard designed to simulate provisioning, tracking, and managing virtual infrastructure assets.

01

Why I Made This

After finishing the NOC monitor project, I wanted to go a level deeper and actually understand what happens on the backend when someone orders and sets up a virtual server. I was curious about the customer-facing side of cloud infrastructure, what does that control panel look like, and how does it work under the hood? Since I was already getting into Cloud Engineering and DevOps, building a dashboard that simulates asset lifecycle management felt like a natural next step to take.

02

Core Features

Role-Based Access Control Simulation. Integrated end-to-end login flows utilizing Supabase Auth and state-driven protected routing patterns.

Continuous Integration & Deployment. Fully automated CI/CD deployment pipelines using GitHub Actions runners mapped to Azure Static Web Apps.

Performance Optimized Data Views. Dynamic vertical scrolling viewports within dense data lists using custom Tailwind utilities, featuring pinned headers for continuous structural visibility.

State-Driven Architecture. Zero-latency internal navigation layers that bypass browser-level document requests to keep application memory clean.

Budget Tracking & Metrics. Built-in alert systems that trigger visual warning indicators upon hitting simulated threshold limits for a monthly financial budget.

Jin Forge Cloud secure authentication gateway showing a corporate-style single sign-on interface with error handling and loading states
Secure Authentication Gateway: Corporate-style SSO simulation with error handling, loading states, and secure password entry isolation
Jin Forge Cloud management console showing system metrics, budget thresholds, resource selector states, and recent transaction logs
Management Console Dashboard: Aggregated cloud architecture panel with system metrics, budget thresholds, resource selectors, and recent transaction logs
Jin Forge Cloud asset provisioning and inventory matrix showing execution history, region mapping, run statuses, and keyword filtering
Asset Provisioning and Inventory: Scrollable data matrix with provisioning history, region mapping, run statuses, and integrated keyword filtering
03

Tools Blueprint Matrix

Client Layer
React 18 & Vite Bundler Component-based frontend with hot module replacement and optimized production builds
Styles Engine
Tailwind CSS Utility-first layout compilation
Backend & Identity
Supabase PostgreSQL database & client-side API integration
Hosting Network
Azure Static Web Apps Distributed Global Edge CDN nodes
Deployment Automation
GitHub Actions CI/CD pipeline execution