Case Study // Client Application•Frontend Software Engineer

White Stone Consultant Platform

Responsive Client Showcase & Educational Advisory Web Experience

Endpoint Telemetry: /consultation/inquiry
ACTIVE RUNTIME CONTEXT

bundler=VITE • deploy=VERCEL_PROD • status=LIVE_200

Status: Live • Category: Client Application
Executive Overview

White Stone Consultant platform is a clean, client-facing responsive web application engineered for an educational advisory consultancy. It focuses on fast page loads, clear service hierarchies, and intuitive inquiry capture on mobile screens.

Problem Addressed

Consultancy visitors on 3G/4G mobile networks experienced high abandonment rates on older, unoptimized corporate templates with heavy JavaScript bundles.

Target Users & Real Use Case

Prospective study-abroad students and parents looking for visa guidance and university counseling services.

My Role & Engineering Contributions
  • Built modern component architecture using React and Vite for rapid development and lean bundles.
  • Engineered responsive layouts and accessible consultation forms with Tailwind CSS.
  • Configured Vercel deployment with edge caching and clean production routing.
Technical Stack & Framework Breakdown
Frontend
React 18ViteTailwind CSSJavaScript
Tooling & Deployment
OxlintVercel PlatformGit
Architecture Blueprint & System Topology

White Stone Consultant Platform System Architecture

A lightweight single-page application built on Vite and React, pre-rendered and served from Vercel edge CDN nodes.

Legend:
Verified / Current Component
Planned / Roadmap Component

01. Client Interface

Vite-bundled React application optimized for mobile browsing.

Tier 1
Service ShowcaseCurrent

Clear presentation of visa and admissions services

React + Tailwind
Inquiry Capture FormCurrent

Direct inquiry submission for prospective students

React State

02. Edge CDN & Hosting

Vercel edge network providing static asset caching.

Tier 2
Vercel Edge CDNCurrent

High-speed global content distribution

Vercel Edge Network
Verified Components in Repository (3)
  • React Vite frontend
  • Vercel edge hosting
  • Responsive mobile layouts
Documented Future Roadmap (1)
  • Automated CRM lead webhook integration
Key Engineering Decisions & Architectural Trade-offs

#1: Vite over Heavy Application Frameworks for Client Showcase

Decision Record
Context & Constraints

A lightweight marketing and lead capture site does not require complex server-side orchestration.

Architectural Decision

Utilized Vite for minimal bundle overhead, near-instant dev server cold starts, and lean production outputs.

Trade-offs Accepted

Lacks server-side rendering, but achieves sub-second time-to-interactive on mobile devices.

Evidence: Verified via vite.config.js and minimal bundle footprint in repository.

Repository Audit & Evidence // White Stone Consultant Platform

Verified software artifacts and production verification scope for White Stone Consultant Platform

Public GitHub Repository
Verified Commits3 commits
Core LanguageJavaScript
Inspected Files & Structural Manifest
src/public/vite.config.jsvercel.jsonpackage.json
Core Engineering Challenges Resolved
Ensuring High Readability and Visual Polish on Low-End Mobile Screens

Implemented fluid typography and high-contrast color pairings tested across varied screen widths.

Current Implementation Status & Technical RoadmapLive

Live and publicly deployed on Vercel at https://white-stone-consultant-three.vercel.app.

Documented Upcoming Milestones
  • Direct CRM webhook integration for automated lead routing.

Related Systems in RANA.OS

View All Projects →