Brief.

The following will be a skeletal explanatory breakdown of the build given the work-related embargo on the project.

Built on a one-man personnel team, this ecosystem was conceptualized and constructed to help:

• (a) Drive collaborative initiatives between various Engineering & Design Teams,
• (b) Streamline resources & unify duplicated codes,
• (c) Consolidate common build services together, and
• (d) Bootstrap initiative to bring together multiple pre-existing siloed & newer MicroApps under a bigger SuperApp umbrella.

[Boilerplate WebApp]

• Architectured & built APAC’s first Healthcare SuperApp’s webapp component ecosystem codenamed Boilerplate from the ground up, seeing >40% efficiency bumps & significantly-improved code maintainability through reusable cross-webapp components, centralized theming system & cleaner coding structuring.
• Used a combination of NextJS, ReactJS, Redux-Toolkit (RTK), RTK Query, JavaScript, TypeScript, TailwindCSS, MaterialUI, Mantine & StorybookJS, HTML5 & CSS3 with GraphQL as foundational libraries.
• Included additional tooling support for Preetier, Jest, React Testing Library & Cypress.
• Hosted on Azure DevOps (ADO) with Docker.
• Managed via JIRA on weekly sprint cycles. 

[Boilerplate Monorepo WebApp]

• Branched out a concurrent monorepo build using Lerna & PNPM, which will better modularize various component-sets or webapp-sets into individual packages that can eventually be served up under an npm private registry.
• Strengthened a SuperApp-hierarchical build structure & facilitated more efficient code redistribution & maintenance for the longer term.
• Reduced extended duplication of npm packages’ downloads thus improving the growing list of npm libraries’ updating processes.

[Boilerplate Technical Docs]

• Built an interactive technical documentation based on StorybookJS that targets solely Frontend-Webapp Developers. This tooling helps developers to save crucial time by enabling immediate previewing of the boilerplate’s pre-built atom-components / preset-components without the need to clone the code repository and build a copy in their local development machine.
• Served as an immediate documentation repository for developers to take reference on how to activate the boilerplate’s pre-built atom-components / preset-components, either in Offline Mode (Local Dev Machine) or in Online mode (Hosted Docs).
• Enables the future ability to execute unit-testing of individual components or end-to-end testing of experience-interfaces prior to releasing the codebase to production, thus simplifying the need to write separate testing codes via Jest / React Testing Library / Cypress.

[Boilerplate Docs]

• Wrote up detailed internal documentation on Notion to help serve as a “central-source-of-truth” for both Technical & Non-Technical viewers who are totally new to the boilerplate ecosystem.
• Served up immediate links to critical modules of the boilerplate ecosystem so that self-serve viewers can instantly access codebases, documentation, or demo previews, to help resolve their build needs.

Development Duration.

[Boilerplate WebApp] 2-4 Months. Since Apr 2022. Weekly Sprints. Completed Baseline Build at v1.18.1 which Covers For 95% Of Build Use-Cases. Latest Build at v1.30.0 in early Nov 2022.

[Boilerplate Monorepo WebApp] 1-2 Months. Since Aug 2022. Concurrent Build. Weekly Sprints. Latest Build at v1.30.0 in early Nov 2022.

[Boilerplate Technical Docs] 2-3 Months. Since May 2022. Concurrent Build. Weekly Sprints. Completed Baseline Technical Docs at v1.18.1 which Covers About 20-30% Of Atom-Components. Latest Build at v1.30.0 in early Nov 2022.

[Boilerplate Docs] 1 Month. Since Jul 2022. Completed Foundational Docs at v1.17.1 which Covers Overarching Ecosystem Docs for General Technical & Non-Technical Audience. Latest Review at v1.30.0 in early Nov 2022.

Extra Preview Screenshots.

Brief.

The following will be a skeletal explanatory breakdown of the build given the work-related embargo on the project.

[WebApp]

• Re-architected & simplified a new v2 codebase from the ground up, resulting in a 55% reduction of codes used for the same number of functions & features.
• Used a combination of ReactJS, Redux, JavaScript, HTML5 & CSS3 as primary libraries.
• Introduced new MaterialUI components & integration of TailwindCSS + new CI/CD tooling to speed up build processes.
• Gained some entry-level experiences working with JSON Web Tokens (JWT), MongoDB & AWS Lamba (Serverless)

[Chrome Ext.]

• Got re-assigned to Chrome Extensions Team to help migrate from Manifest v2 to Manifest v3.
• Steep learning curve due to non-experience with Chrome Extensions codebase + flow.
• Initiated a new build to bring together key new features of Hot-Reloading, Custom WebPack integration, & TailwindCSS support.
• Modularized codebase to enable better code maintainability in the future.
• Overall efforts helped cut preview-times & codebase of Chrome Extensions by >40%.

Development Duration.

[WebApp] 2-4 Months. Since Sep 2022. Completed v2 Build.

[Chrome Ext.] 1-2 Months. Since Jan 2022. Initiated v2 Build.

Brief.

The initial intention of this project was to create a subscription-based blog that can tap on the full flexibility of integrating any build, code, or tool that I wanted while achieving the loading speeds benefits of a static website. This particular combination is not achievable with existing tools such as WordPress or Ghost, which are great tools in what they do but do lack the ability to fully customize the UI/UX to a personalized level.

In addition, this project also serves as a challenge for me to attempt at a static webapp based on a JAMStack, by self-learning NextJS and integrating it as a frontend interface to a Ghost CMS (Headless) backend, which I really love to use to help manage content given Ghost‘s very clean and simple interface. 

Though I had initially expected this project to take up about 2-3 months to complete, in reality, it took roughly double the time, as despite having foundational knowledge of building on ReactJS, there were a number of integration issues with the way how NextJS processes a request, as well as more challenging issues relating to building advanced Ghost features, such as its Magic-Link subscription, or Previewing Post Drafts, amongst others.

Nonetheless, I am very happy with the final result of the project as the loading performance via Web.dev has been near perfect! The next challenge for me is actually making time to update more content to this particular working project! 

[UPDATE-20220802]: Updated to v13.2.1 to revamp the whole build to NextJS v12, Redux-Toolkit (RTK) & RTK Query.

Development Duration.

5-6 Months. Since Aug 2021. Updated to v13.2.1 on 20220802. Actively Tweaking.

Key Features.

Brief.

As a serious upcoming heavyweight competitor to WordPress, Ghost has been another open-source project I’ve been really wanting to try since 2017, given its famous improvements to the authors’/writers’ experience (Closely similar yet better than Medium) & its “decluttered system” as a CMS system, when compared to WordPress.

Despite a need to spin up a new server due to Ghost‘s need of pre-allocated memory resources for every runtime instance, the unexpected challenge fell more on understanding its unique yet heavily-modularized theme’s coding structure. Though this code structure had definitely made Ghost a very fast, secure & effective system, it really creates a slight pain-point for potential theme-developers as whilst it provides more freedom of design control for custom personalization, the system is still somewhat restrictive, in order to comply with Ghost‘s built-in responsive-ready & security systems.

Nonetheless, I was still glad to have tried my best after a 4-5 month attempt and came to a result, a tad close to my ideal personalization. However, I do think there is still potential for future design/restriction upgrades to further improve my UX/UI for this website. The other alternative is to potentially build a decoupled system via JAMStack where the frontend will be built on a separate web language & hosting platform.

Development Duration.

4-5 Months. Since Aug 2020. Currently @ Version 3 in 2021. Pending OverHaul Upgrade.

Key Features.

Brief.

A project that started off as a new personal challenge to jumpstart on learning ReactJS, React-Redux & Django from scratch, I had initially scheduled roughly 2-3 months to complete a simple online Jobs Classifieds codenamed “Hirebred“. Little did I expect that this timeline will blow over to a good 7 to 8 months before I finally managed to complete the project. 

The key delay factors involved the substantially-steep learning curve for both ReactJS, React-Redux & Django, especially when one self-learns & attempts to adhere to best practices & troubleshoot runtime & dependency issues at the same time.

Notably, the real fun part was having the full prowess of data-processing now available on the frontend, as well as the ability to push the envelope of design & data display due to the new advancements in ReactJS & modern browser performance upgrades. With a growing ecosystem of 3rd-party open-source NPM libraries, it further expands the ease to quickly build in new features into the project, with the “shared-resource-assistance” of the open-source community at large.

I was pretty happy being able to integrate numerous interesting features, resources into this Progressive WebApp (PWA), such as Auth0 (Authentication), Stripe Checkouts (Payments), AWS S3 (File Storage), SendGrid (Automated Emails), Unsplash (Images) & a few other APIs.

Though the project did fully function at the end of my build, after running it for a span of 4-months, I decided to close off this project.

A few key takeaways that I had learned after my journey:

1. Do Not Build a project that No One Has The Intention of Using in the First Place.—Proved the Demand & Trial The Features Prior to a Full Build.
2. A ReactJS + React-Redux Combination is a truly fast & efficient powerhouse to build Progressive WebApps for cross-device compatibility.
3. Have a specialized Frontend Developer & Backend Developer to accelerate builds faster. Doing Fullstack may be helpful, but it will be not efficient for fast builds & scale fast situations, especially if both frontend & backend run on different languages.

Development Duration.

7-8 Months. Since Apr 2019. Retired in Dec 2019.

Key Features.

Brief.

Starting up my photography business some time ago in 2012, I tasked myself with creating a relatable brand & website that will help serve up multiple photo-stories quickly & easily. 

Despite identifying WordPress as the platform of choice for its easy-to-update CMS system & feature-rich plugin ecosystem, the website did present an unexpected challenge where it needs to handle pre-loading a large number of images across multiple platforms (Mobile/Tablet/Desktop) at once, while still having the ability to manage a level of “image-protection security“.

Probably after Version 4 was born in 2015, where significant improvements to the WordPress code, plugin ecosystem, as well as new possibilities of a “templating system” within WordPress, where I was then able to better sync up content into a more beautified layout.

Eventually, the overall structure was more or less locked-in after Version 15 in 2018, where advancements in image optimizations & more easily-accessed CDNs were available, which had significantly improved the overall website load-performance timings & cross-platform compatibility. 

Development Duration.

3-5 Months. Since Nov 2011. Currently @ Version 18 in 2022. Actively Tweaking.

Key Features.

Brief.

Adhering to specific requirements set by Dr. Felix Lim to tailor & showcase personalized brand signature & website in accordance with Dr. Lim’s music-centric methodology & design styles.

Created with WordPress as the base support system, the simplistic outlay was created in an effort to declutter yet ensure that the potential audience will be able to grasp the treatment procedures & be aligned with a prospective therapy session with Dr. Lim.

A key value-adding factor was to add more vivid colors & informative details, to give this long-established profession an added twist, as well as a potentially more “thought-provoking” conversation starter to a new digitally-focused audience.

Development Duration.

1-2 Months. Since Jul 2021. Completed.

Key Features.

Brief.

Previously set up as a separate Brand Consulting label named “LABELHOUSECREATIVES” back in 2014, the original website that was built on WordPress, to streamline my updating & upgrading processes, was created to solely showcase Print, Digital & Interactive works created for my professional clients. 

Most of this particular project was more labor & time-consuming on two fronts, namely the design side, where multiple angles of mockups & design prototyping had to be newly-created to help the viewer visualize the collateral in its actual form, as well as the interactive side, where numerous micro-level layers have to be individually-crafted & animated to create the different slider-boards for the respective introduction headers. 

Despite only revising over 5 different versions over 7 years, I eventually decided to re-merge this portfolio of works under one bigger primary umbrella in 2021, which was renamed to ROBERRYARTS CREATIVES under ROBERRYARTS STUDIOS. 

Development Duration.

2-3 Months. Since Nov 2014. Merged with ROBERRYARTS STUDIOS as ROBERRYARTS CREATIVES.

Key Features.

Brief.

Built as a visual analytics module project, this experimental microsite aims to tap on the potential of D3.js, a very powerful open-sourced JavaScript visualization library, as well as to stretch the minimum potential of how graphs can be updated with live data on-the-fly via JSON & animated on command via JavaScript. 

The tightly-scheduled project was quite a challenge, notably having the need to self-learn & understand how D3.js, jQuery & AngularJS functioned, while still attempting to combine it with a self-summarized knowledge of how the Singapore COE system worked, as well as simplifying the overall User Experience / User Interaction (UX/UI) in the process.

In the end, the intense hard work paid off & the result of the project scored high points by the grading panel. 

Development Duration.

2-4 Weeks. Since 2011. Completed.

Key Features.

Brief.

What started off as a personal, experimental design-branding site named “Bertographic.com“, to bring together my digital design portfolio, eventually morphed into redesigning for a personal website as a redirection-hub for my personal projects, photo snaps & albums, and having a clearer separation from my professional photography portfolio as it slowly grows over the years.

From the raw HTML/CSS coding combination on NotePad on Microsoft Windows back in 2007 where personal websites are pretty much “hard-coded“, to the conversion to “RobertChai.com” on WordPress in Version 3 in 2013.

Moving through the years from 2014-2018, the website grew in complexity along with my work & exploratory interests. However, it reached a point in 2019 where I wanted to “flush out” the layers piled up & just have a clean website with a lot of whitespaces yet still attempting to retain especially the numerous photos & albums over the years.

Version 12 represented that beautifully well & I’m comfortably happy with making new website optimizations & the overall results ever since.

Development Duration.

3-4 Months. Since Nov 2007. Currently @ Version 15 in 2022. Actively Tweaking.

Key Features.