{"id":276,"date":"2019-03-20T09:11:54","date_gmt":"2019-03-20T16:11:54","guid":{"rendered":"https:\/\/ashtonchen.com\/?post_type=jetpack-portfolio&#038;p=276"},"modified":"2019-03-21T08:12:53","modified_gmt":"2019-03-21T15:12:53","slug":"vr-web-app","status":"publish","type":"jetpack-portfolio","link":"https:\/\/ashtonchen.com\/index.php\/portfolio\/vr-web-app\/","title":{"rendered":"VR Web App"},"content":{"rendered":"\n<p><strong>Virtual Reality Web App Refactoring, <\/strong><strong>Eyexpo<\/strong><strong> Tech Corp, 2018-10 ~ present<\/strong>&nbsp;<\/p>\n\n\n\n<ul><li>Re-implemented Web VR app MVP using Ionic(Angular) framework and Node.js Express framework&nbsp;<\/li><li>Set up projects to use Typescript compiler, Typescript Linter, Webstorm debugger&nbsp;<\/li><li>Implemented an API gateway server using GraphQL query language for backend microservices&nbsp;<\/li><li>Created GraphQL schema for first-party and third-party frontend clients&nbsp;<\/li><li>Wrote Docker files used for building Docker images for deploying micro-services as docker containers&nbsp;<\/li><\/ul>\n\n\n\n<ul><li>Deployed Dockerized Angular web app, API gateway, and microservices as docker containers to development server&nbsp;<\/li><li>Administered dev server set up to run Docker Swarm on Oracle VirtualBox virtual machines on CentOS Linux server&nbsp;<\/li><li>Designed\n high performance file uploading system which uses various uploading \nstrategies, stream, parallel processing for user uploaded files&nbsp;<\/li><li>Set up localization for Ionic Angular web app&nbsp;<\/li><li>Planned to use Kubernetes for container orchestration&nbsp;<\/li><\/ul>\n\n\n\n<ul><li>Planned to implement OpenTracing to collect application metrics&nbsp;<\/li><li>Planned to implement Prometheus to monitor system&nbsp;<\/li><li>Distribute iOS app through TestFairy with provision profile from Apple\u2019s Enterprise Program&nbsp;<\/li><li>Resolved technical debt from legacy codes&nbsp;<\/li><\/ul>\n\n\n\n<p><strong>Virtual Reality Stitching R&amp;D, <\/strong><strong>Eyexpo<\/strong><strong> Tech Corp, 2018-09<\/strong>&nbsp;<\/p>\n\n\n\n<ul><li>Set up OpenCV C++ development environment to be used by Java Native Interface (JNI) in Android Studio&nbsp;<\/li><li>Set up OpenCV C++ environment in Xcode on macOS&nbsp;<\/li><li>Assisting computer vision researcher in creating customized stitching algorithm in C++ using OpenCV library&nbsp;<\/li><\/ul>\n\n\n\n<p><strong>Virtual Reality Mobile SDK, <\/strong><strong>Eyexpo<\/strong><strong> Tech Corp, 2018-08<\/strong>&nbsp;<\/p>\n\n\n\n<ul><li>Created an Android panorama viewer widget SDK for 360 photos using OpenGL for business partners as mobile developer&nbsp;<\/li><\/ul>\n\n\n\n<ul><li>Embedded React 360 panorama viewer for webview locally on mobile app for faster panoramic image load time&nbsp;&nbsp;<\/li><li>Provided documentation on how to use the Android SDK&nbsp;<\/li><li>Published panorama viewer SDK to private repository on production server using JFrog\u2019s Artifactory&nbsp;<\/li><\/ul>\n\n\n\n<p><strong>Virtual Reality Web App, <\/strong><strong>Eyexpo<\/strong><strong> Tech Corp, 2018-02 ~ 2018-09<\/strong>&nbsp;<\/p>\n\n\n\n<ul><li>Created a Web VR app from concept to minimum viable product (MVP) as full-stack developer&nbsp;<\/li><\/ul>\n\n\n\n<ul><li>Created\n highly scalable architecture SaaS (Software as a Service) cloud-based \nsoftware solution using RESTful APIs in HTML5, JavaScript, CSS3, PHP, \nMySQL and Laravel, with tools such as NPM and Composer&nbsp;<\/li><li>Implemented virtual reality viewer progressive web app (PWA) using A-Frame\/three.js\n with which users can view 360 panorama photos (up to 8K in resolution) \nwith 3D models on desktop browsers and mobile browsers, with web app \nmanifest, service worker, and IndexedDB to create reliable, fast and engaging offline experience&nbsp;<\/li><li>Developed\n a high-performance virtual reality editing tool which can be used by \nprofessional photographers, content creators and organic users to create\n virtual reality tours which display a list of panorama scenes (~50MB in\n file size each), teleportation and hotspot widgets, as well as glTF (GL Transmission Format) and GLB 3D models&nbsp;<\/li><li>Analyzed and improved web app loading time (Google Chrome DevTools),\n resolving race condition between A-Frame and Angular frameworks, \nimplemented progressive image loading for slow network which pre-loads \ndifferent sizes of image blobs asynchronouly\n (ES6 Promise) onto system memory for faster in-app A-Frame scene \nloading, used Cache API to allow offline usability in absence of \nnetwork, modified A-Frame source codes to implement touch controls with \nproper sensitivity on mobile devices&nbsp;<\/li><li>Designed SQL database schema, created database migration and maintained data integrity&nbsp;<\/li><\/ul>\n\n\n\n<ul><li>Worked on server-side panorama image stitching tool (Hugin) to create virtual reality panorama photos, experimenting on porting to client-side and mobile&nbsp;<\/li><li>Developed\n responsive frontend UI components for displaying on mobile phones, \ntablets and desktop using SCSS, Bootstrap, Material Design and Webpack&nbsp;<\/li><li>Experimented client-side image resizing tool created by Web Worker and WebAssembly(WASM) to minimize server-side workload&nbsp;<\/li><li>Integrated Google Maps API and implemented localization&nbsp;<\/li><li>Configured,\n deployed and administered server EC2 instance and S3 hosted on Amazon \nWeb Services (AWS), and managed Ubuntu server instance through command \nline&nbsp;<\/li><\/ul>\n\n\n\n<ul><li>Created virtual reality viewer Android app using Google VR SDK and image processor in C++, Java and Kotlin&nbsp;<\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Virtual Reality Web App Refactoring, Eyexpo Tech Corp, 2018-10 ~ present&nbsp; Re-implemented Web VR app MVP using Ionic(Angular) framework and Node.js Express framework&nbsp; Set up projects to use Typescript compiler, Typescript Linter, Webstorm debugger&nbsp; Implemented an API gateway server using GraphQL query language for backend microservices&nbsp; Created GraphQL schema for first-party and third-party frontend clients&nbsp; [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"jetpack-portfolio-type":[],"jetpack-portfolio-tag":[],"jetpack_publicize_connections":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>VR Web App - Ashton Chen<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ashtonchen.com\/index.php\/portfolio\/vr-web-app\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"VR Web App - Ashton Chen\" \/>\n<meta property=\"og:description\" content=\"Virtual Reality Web App Refactoring, Eyexpo Tech Corp, 2018-10 ~ present&nbsp; Re-implemented Web VR app MVP using Ionic(Angular) framework and Node.js Express framework&nbsp; Set up projects to use Typescript compiler, Typescript Linter, Webstorm debugger&nbsp; Implemented an API gateway server using GraphQL query language for backend microservices&nbsp; Created GraphQL schema for first-party and third-party frontend clients&nbsp; [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ashtonchen.com\/index.php\/portfolio\/vr-web-app\/\" \/>\n<meta property=\"og:site_name\" content=\"Ashton Chen\" \/>\n<meta property=\"article:modified_time\" content=\"2019-03-21T15:12:53+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ashtonchen.com\/index.php\/portfolio\/vr-web-app\/\",\"url\":\"https:\/\/ashtonchen.com\/index.php\/portfolio\/vr-web-app\/\",\"name\":\"VR Web App - Ashton Chen\",\"isPartOf\":{\"@id\":\"https:\/\/ashtonchen.com\/#website\"},\"datePublished\":\"2019-03-20T16:11:54+00:00\",\"dateModified\":\"2019-03-21T15:12:53+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/ashtonchen.com\/index.php\/portfolio\/vr-web-app\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ashtonchen.com\/index.php\/portfolio\/vr-web-app\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ashtonchen.com\/index.php\/portfolio\/vr-web-app\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ashtonchen.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Projects\",\"item\":\"https:\/\/ashtonchen.com\/index.php\/portfolio\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"VR Web App\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/ashtonchen.com\/#website\",\"url\":\"https:\/\/ashtonchen.com\/\",\"name\":\"Ashton Chen\",\"description\":\"Software Engineer\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/ashtonchen.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"VR Web App - Ashton Chen","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ashtonchen.com\/index.php\/portfolio\/vr-web-app\/","og_locale":"en_US","og_type":"article","og_title":"VR Web App - Ashton Chen","og_description":"Virtual Reality Web App Refactoring, Eyexpo Tech Corp, 2018-10 ~ present&nbsp; Re-implemented Web VR app MVP using Ionic(Angular) framework and Node.js Express framework&nbsp; Set up projects to use Typescript compiler, Typescript Linter, Webstorm debugger&nbsp; Implemented an API gateway server using GraphQL query language for backend microservices&nbsp; Created GraphQL schema for first-party and third-party frontend clients&nbsp; [&hellip;]","og_url":"https:\/\/ashtonchen.com\/index.php\/portfolio\/vr-web-app\/","og_site_name":"Ashton Chen","article_modified_time":"2019-03-21T15:12:53+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/ashtonchen.com\/index.php\/portfolio\/vr-web-app\/","url":"https:\/\/ashtonchen.com\/index.php\/portfolio\/vr-web-app\/","name":"VR Web App - Ashton Chen","isPartOf":{"@id":"https:\/\/ashtonchen.com\/#website"},"datePublished":"2019-03-20T16:11:54+00:00","dateModified":"2019-03-21T15:12:53+00:00","breadcrumb":{"@id":"https:\/\/ashtonchen.com\/index.php\/portfolio\/vr-web-app\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ashtonchen.com\/index.php\/portfolio\/vr-web-app\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/ashtonchen.com\/index.php\/portfolio\/vr-web-app\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ashtonchen.com\/"},{"@type":"ListItem","position":2,"name":"Projects","item":"https:\/\/ashtonchen.com\/index.php\/portfolio\/"},{"@type":"ListItem","position":3,"name":"VR Web App"}]},{"@type":"WebSite","@id":"https:\/\/ashtonchen.com\/#website","url":"https:\/\/ashtonchen.com\/","name":"Ashton Chen","description":"Software Engineer","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ashtonchen.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"}]}},"jetpack_sharing_enabled":true,"jetpack_likes_enabled":false,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/ashtonchen.com\/index.php\/wp-json\/wp\/v2\/jetpack-portfolio\/276"}],"collection":[{"href":"https:\/\/ashtonchen.com\/index.php\/wp-json\/wp\/v2\/jetpack-portfolio"}],"about":[{"href":"https:\/\/ashtonchen.com\/index.php\/wp-json\/wp\/v2\/types\/jetpack-portfolio"}],"author":[{"embeddable":true,"href":"https:\/\/ashtonchen.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ashtonchen.com\/index.php\/wp-json\/wp\/v2\/comments?post=276"}],"version-history":[{"count":2,"href":"https:\/\/ashtonchen.com\/index.php\/wp-json\/wp\/v2\/jetpack-portfolio\/276\/revisions"}],"predecessor-version":[{"id":281,"href":"https:\/\/ashtonchen.com\/index.php\/wp-json\/wp\/v2\/jetpack-portfolio\/276\/revisions\/281"}],"wp:attachment":[{"href":"https:\/\/ashtonchen.com\/index.php\/wp-json\/wp\/v2\/media?parent=276"}],"wp:term":[{"taxonomy":"jetpack-portfolio-type","embeddable":true,"href":"https:\/\/ashtonchen.com\/index.php\/wp-json\/wp\/v2\/jetpack-portfolio-type?post=276"},{"taxonomy":"jetpack-portfolio-tag","embeddable":true,"href":"https:\/\/ashtonchen.com\/index.php\/wp-json\/wp\/v2\/jetpack-portfolio-tag?post=276"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}