Describing My Sandbox
Tags: architecture, career, 100daysofcode, devjournal
Published: 2022-10-03 15:25:05

I've been busy this year executing my take on the #100DaysOfCode challenge by rebuilding a set of development skills that I can use to implement products using micro-services.  That work has resulted in a rather robust mixed-use sandbox. As part of my effort to build out a comprehensive public documentation portal, over the weekend I set about starting a document to describe my Sandbox's Architecture.  Below is the first architecture diagram I've produced, describing from a top level the services which make up my sandbox & how they're zoned or organized:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/phja8pjtws6e9bgyhpi0.png)

Using [Cloudflare's](https://www.cloudflare.com/dns/) amazing DNS service, my Sandbox is spread across two domains:
- **Knowhere.space:** Knowhere is my edge-computing zone, with the DNS routing to a NAS server or Raspberry PIs within my home.  I use this zone to serve content primarily within my home, as well as services which are either experimental, or cost-prohibitive in the cloud.  
- **Mainwaring.dev:** Mainwaring.dev encompasses all of my cloud computing services from a variety of different providers, including [DigitalOcean](https://www.digitalocean.com), [Vercel](https://vercel.com/), [Carrd.co](https://www.carrd.co) and others.  

## Knowhere.space
- **Traefik:** [Traefik](https://traefik.io/) acts as an ingress for my homelab, enabling me to route traffic to the other services I have running on the edge without overly exposing my Firewall with open ports.  
- **PiHole:**  [PiHole](https://pi-hole.net/) is a DNS Sinkhole I added to reduce the number of ads and trackers served to devices on my local network.  
- **Plex:**  [Plex](https://www.plex.tv/) is my personal Netflix, serving content I have stored on my local network.  
- **YAC Reader:** Comics are a guilty pleasure of mine, and [YAC Reader](https://www.yacreader.com/) enables me to serve digital comics to my iPad with ease.  
- **Transmission:** [Transmission](https://transmissionbt.com/) is a BitTorrent client.  [The specific implementation of Transmission I use includes OpenVPN](https://haugene.github.io/docker-transmission-openvpn/), allowing me to securely route that traffic.   
- **Lighthouse:** [Spotify's open-source Lighthouse Audit Service](https://github.com/spotify/lighthouse-audit-service)  integrates my Backstage.io implementation with [Google Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/).  In a for-profit situation, I would run this service in the cloud, but I'm taking advantage of existing resources I have to run such a minor service.  

## Mainwaring.dev
- **API:**  A very robust REST server built using the @strapijs.  I currently have over 1 million records of personal data stored from more than dozen sources, including third-party services ([Twitter](https://www.twitter.com), [Facebook](https://www.facebook.com), [Discogs](https://www.discogs.com)), manual data entry (press releases & news articles, postcards) and [Apple's Healthkit](https://www.apple.com/ios/health/) (Workouts, Calories Burned, Heart Rate).  
- **Backstage (server):**  [Backstage](https://www.backstage.io) is an open-source project from Spotify which enables teams to build developer portals and customize them in a way to aggregate data from all the various tools a team uses. 
- **Chartbrew (server):** [Chartbrew](https://chartbrew.com/) is open-source reporting service which really makes it easy to visualize data.  
- **Backstage (website):** The Backstage Frontend is a separate process from the backend, so I opted to host it on Vercel.
- **Chartbrew (website):**  Similar to Backstage, the Chartbrew frontend is a separate process which I host on Vercel.
- [Contact](https://contact.mainwaring.dev):  While it's awesome to build cool things, sometimes you just need a simple website tool for static content.  Contact is one of these examples.  This branded-alternative to LinkTree is used as a digital business card, providing my audience with a list of options to learn about myself and make contact.  
- **[The Legend of Bruce](https://bruce.mainwaring.dev):**  A marketing website for a social experiment.  When I attend music festivals, I typically bring a large inflatable dinosaur (Bruce) to crowd-surf a headlining act, and at the end of the night he always goes home with a random person he found in the crowd.  Bruce now includes a QR code linking back to this page, which serves as a Call to Action to share pictures or videos people take with Bruce on [Instagram](https://www.instagram.com).   
- **[Status Page](https://status.mainwaring.dev):** Status Pages are a common feature for SaaS products, and [BetterUptime](https://www.betteruptime.com) made it really easy to implement monitoring over my resources.  
- **[Public Documentation Portal](https://docs.mainwaring.dev):** [Gitbook](https://www.gitbook.com) enables me to author public documentation within my Github Project and easily serve it in a presentable way.  I use this portal to share documentation for open-source projects I publish, as well as Architecture documents and how-to guides.  


Do you have questions or comments about my sandbox so far?  Drop them below ⬇️