The official development playground for Johnny Hu (heyitsjhu).
Introduction / About Me
Hi there, I'm Johnny. This repository serves as a sandbox for me to practice, improve and showcase my development skills. You can view this as sort of a code-focused resume aimed at providing you with a look into my coding style and philosophy.
Within most of the folders, you will find a README.md file detailing my thoughts and rational behind the code written in the files.
Getting Started / Project Information
Let's get started.
This project is a typical full-stack JavaScript application with a React frontend and Node.js backend.
Methodology
Folder Structure
Versioning
auto-changelog, commit message structure and husky enforcement
Deployment
Production deployment is handled by App Engine and is linked to the repo's master branch. When changes are made to the branch, it triggers a GitHub Action that includes steps to automatically compile the necessary environment variables—thus, not having to store it in the app.yaml file and exposing it on GitHub—and deploy the application to App Engine. The production build can be view here.
Development deployment is handled by Heroku and is linked to the repo's development branch. It works very similar to the pipeline for the master branch, except after its GitHub Action passes, a notification/trigger is set to Heroku, where it will then retrieve, build and deploy the branch onto its platform—and can be viewed here. This is likely where I'll do some UI testing outside of my local environment to ensure everything is working as expected, so it'll likely be a bit buggy, but you might find some work-in-progress features ahead of its release.
Code Quality
Various formatting, linting, and pre-commit tools are used to ensure code consistency.
Formatting and Linting
.editorconfig, eslint and jsconfig in each project folder, prettier, vscode extensions
Pre-Commit and Pre-Push Checks
husky with pretty-quick
Misc.
cloc
Tools List
Code Quality
Auto-Changelog Commitlint - Homepage EditorConfig ESLint - Homepage Husky Jest Prettier - Homepage
Logging
rollbar js-logger redux-logger
Frontend
animejs crypto-js redux redux-toolkit react-image-lightbox react-photo-gallery typed.js why-did-you-render