back to work

Million Dollar Metropolis

Million Dollar Metropolis

Year

2019/2020

Affiliation

Personal Project

Tech Used

  • Three.js
  • WebGL
  • TypeScript

Features

  1. Uses native DOM APIs (no framework) for HTML/CSS manipulation, with a robust top-down architecture.
  2. Supports thousands of ads in a single stable environment, even on older Android devices, due to performance profiling, leveraging network/compression/caching, and balancing CPU/GPU memory and compute.
  3. Uses an optimized lookup data structure to determine what data to load or unload by taking advantage of fixed-size structure of the environment.

Summary

I built the entire front and backend for this project, including hosting, payment integration, and design.

I created it independently as an entrepreneurial experiment. Inspired by developers who made novel and interesting websites that were also profitable, I wanted to create a website that combined my 3D abilities with real-world economics.

The primary challenge of developing this application was supporting many media images in a 3D environment without performance degradation. I developed and extensively tested the environment at full capacity, ensuring that media could be swapped between memory and browser cache, while maintaining good interactive responsiveness.

I developed the project with low-performance devices in mind, supporting conventional and touchscreen inputs. On the frontend, the technologies I used included TypeScript, webpack, three.js, and the native DOM APIs for HTML/CSS manipulation. Payments are made using the Stripe library, and the backend system uses AWS Lambda, Cloudfront, and S3.

Highlights of the project include scaling to hundreds of thousands of requests in a short amount of time, and reaching the front page of Hacker News.

Links