Guardian by Elexa


## Summary

I founded Lakeshore Chess to organize chess tournaments and promote the game in Chicago and abroad. Along with the regular responsibilities, I spearheaded the development of the website, iteratively adding features as the organization grew. Initially only capable of displaying events and accepting registrations & payments (powered by Stripe,) the website can now display tournament pairings and results, and non-developers can contribute to the website using the Strapi admin backend.

### Roles & Responsibilities

- Founded the organization and assembled the team.
- Website design & development
- Everything needed for regular operations!

### Website Capabilities

- Players can find and register for upcoming tournaments (powered by Stripe)
- Registered players are shown live on the website, so folks can see their potential opponents
- Tournament pairings & results are also available on the website, which are presented on a live display during our tournaments
- Strapi is used to manage the website backend, allowing non-developers to contribute to the website
- The website is built with Typescript, React, and Next.js


Lakeshore Chess


## Summary

Guardian by Elexa is a consumer IoT product line that detects and prevents damage from water leaks. It is a system of physical products connected to a cloud platform that not only detects and alerts the user when a leak is detected, but shuts off their water main automatically. The system is designed to be easy to use and easy to install by any homeowner without professional installation.

I worked for Elexa from 2016, when Guardian as a concept didn't yet exist, until 2021. My role evolved throughout my tenure, moving from product documentation, to product design, and finally to development. I was the lead designer for the Guardian line of products, not only designing their physical appearance &amp; functionality, but I also worked with our international engineering teams to architect and structure the platform to deliver an unparalleled user experience.

### Projects &amp; Accomplishments

- Designed and architected the Guardian line of products
- Developed backend dashboards for engineering and support staff to perform CRUD functions with the database and remotely interact with deployed devices for troubleshooting and support purposes
- Designed and developed the ecommerce website, powered by Gatsby.js &amp; Shopify
- Deployed an OAuth 2.0 authentication system for 3rd party services to make actions on behalf of users within the Guardian ecosystem
- Created the full page-by-page design for the consumer iOS & Android apps
- Contributed to the Python/Flask backend for the Guardian ecosystem and helped architect it to meet design specifications



# Example Markdown Post

You can reference your frontmatter data through "attributes". The title of this post is {name}!


Flex Control


## Summary

Entering the job market again, I wanted to update my website to reflect my current skills (and sensibilities). My original website was built in 2018, and all of a sudden I now have four years of experience to build upon to make a better website. While the first version took me around a month to design and build, the second version took me around a week to design and build. I also used Three.js for the homepage to add visual interest and subtly demonstrate my skills. Even though it looks cool, it was super easy to implement!

### Website Capabilities

- SSR powered by Next.js
- All the basics&mdash;responsive design, SEO, and a clean, modern, and accessible UI
- A fully featured portfolio with a variety of projects
- A contact page with a contact form


Personal Portfolio


## Summary

This is a very basic client-only contact manager app, built with Vue.js. This was my first experiment with Vue, made to both practice the basics of Vue.js and act as a practical assessment for an employment opportunity. I was given the choice of using any frontend framework of my choice, so I took the chance to try out Vue, since it was used by the company I was applying to.

I built this demo in about 20 hours, using Vue for the first time ever. While there were some frustrations, I would definitely like to use Vue on a larger app, especially with Nuxt.js.

## The Experience

- I was a tad underwhelmed by the developer experience with using Vue, given all the hype. It seems like there are four different ways to do each thing, and each of those options permeate with each other. I had to take some time to make sure I was reading the docs correctly.
- I decided against using TypeScript, because I thought it would have been cumbersome while trying out a completely new UI framework. But I was wrong. TypeScript's features would have sped up development quite a bit, with all of the new Vue.js methods and features I was unfamiliar with.
- I'm thoroughly impressed with Pinia and its setup, compared to Redux (though I haven't really used Redux with Redux Toolkit just yet.)
- Minus two points for how annoying it is to work with reactive data in Vue. I still ahve to wrap my head around how to properly use ref()/watch()/computed()/etc.
- I liked how tightly integrated Vue's router and state management are to the default scaffolding tools. On the other hand, React's open ecosystem is what allows for the competition and innovation in the React ecosystem.
- Vite's LiveReload is impressively snappy. I kept hearing about it, but having it levels up the flow state to another level.

### App Features &amp; Capabilities

- Global state management featuring [Pinia](https://pinia.vuejs.org/).
- Loads up dummy data automatically on initial load from [randomuser.me](https://www.randomuser.me).
- Data persistence between reloads with LocalStorage.
- Uses GitHub Actions to deploy to Surge.sh.
- Client-side routing with Vue Router.


The Contacts App


## Summary

I developed this web app to control my home's entertainment, lighting, and HVAC systems. I used a React frontend with a Node.js backend to communicate with several APIs, combining several systems into a single cohesive interface. This was my first experience developing an application that not only served a practical purpose (as opposed to a simple web page) but was also relied on and used daily by my roommates to simplify their lives.

### Application Capabilities

- Control the home's entertainment system&mdashcontrol multiple devices with asingle button touch, e.g. turn on the TV & receiver, set them to the correct inputs, and open Netflix on the Roku
- Control and see the current status of the home's lighting system
- Set the upstairs and downstairs thermostats to the desired temperature

### Architecture

The application was powered by a Node.js server running on a Raspberry Pi, which served up a Create React App frontend. Deployment was done with a Docker container on a DigitalOcean droplet. I'm just kidding, that was Copilot's wishful thinking. I actually just ran an npm script that built the frontend locally and SSH'd it to the Pi.

### Lessons Learned

This system is now retired since I moved, and I plan on making something like this again in the future. Here are some things I will do differently next time:

- I appreciate the value of a well-tuned CI/CD pipeline
- I will still use a standalone Node.js server running locally on a Raspberry Pi or other device, but I will deploy the frontend to an edge server
- I will use one of Next.js, Remix.run, Nuxt, or SvelteKit to build the frontend


Residential Remote Controller


## Summary

I built my original website at the end of 2018. It took around a month and a half to build&mdash;considerably longer than it will take build a similar project for me now. It was my first production website, and am still happy with my work!
