Vanilla JS → Next.js on Cloudflare Experimental Site "Liberogic Office Green"

Are you familiar with a website called Office Green?

All content we release, including our corporate website, is an experimental sandbox. (Except for Futamata's accessibility application! By the way, this site isn't WCAG compliant yet 😭)

It all started 5 to 6 years ago during the COVID era, when our founder—with time on his hands—began a DIY green office project. (https://yurulog.liberogic.jp/posts/qx9nibr59)

First Unreasonable Request@2023

Requirements

• We had a customer who wanted to start an affiliate site, so we thought, why not run a little experiment while we're at it! (The customer ended up abandoning the project, so it became just an experiment in the end)
• Why not try passing the Amazon Associates qualification without a page while the modal-expanded page is indexed? (You've bought a bunch of stuff for office greenery, so why not use that as material and make it!)
• You don't often get chances to work with 360° assets and rotate them around. There are libraries out there and it seems straightforward, so why not give it a try!
• Revenue doesn't matter—let's release it publicly as an experiment and learning opportunity!
• Our site is basically a testing ground for our clients, you know? Got it? (❓)

Here are the requirements that were thrown at me shortly after I joined.

We started implementation in February 2023, and I'll be documenting the journey of updates and content additions since then!
Bringing Liberogic Office Green into the spotlight! ☀️

Tech Stack

• Vanilla JS (ES Modules) — no framework, custom module splitting with import/export
• Pannellum - 360-degree panoramic viewer library (self-hosted locally as a pannellum/ folder, not via CDN)
• HTML / Sass - Markup and styling

External APIs and services

The cornerstone of this site is rotating 360° content. We photographed the office using a RICOH "THETA SC2" camera.

Here's the original photograph taken.

We use the Pannellun library for the 360° implementation. Simply set the photographed image and you can view it 360° in full rotation.

To enable various customizations, we downloaded the library itself rather than using a CDN.

Customization

We placed an "i" icon on each featured product, and hovering with the mouse displays the product name in a speech bubble.

Clicking opens a product information modal that links to an Amazon Associates link. A star mark in the office floor plan at the bottom right shows the placement location.

Product introductions with no holds barred—featuring the CEO's honest reviews!!

You can also switch the view using the switch in the top-left corner to turn off the room lights, and clicking the arrow will move you to the CEO's desk side!

We manage product inventory using a spreadsheet rather than a CMS to make editing and updates easier.

The reason is:

"Clients prefer lighter operations, right? Let's try connecting via a spreadsheet!"

We fetch the spreadsheet data and pass it into a modal, but... once it was done:

"This site is slow..."

…………

We used the API based on the custom hotspot source. The original reference simply displays text on hover when you place a marker at any location, but we added various custom elements like displaying modals and switching views.

And finally, it was complete! 🎊
I was so happy when it was finished that I kept spinning around the site!

Amazon Associates

A well-known affiliate service for Amazon products.

Here are the steps.

• Website content is current (typically updated within 60 days / demonstrates that the site is actively maintained).
• 10 or more articles and content pieces.
• Once product links are available, add an Amazon Associates operating disclosure to your privacy policy page.
• 3 sales within 180 days of registration required (same account or family members do not qualify).
• The entered URL is correct and the site can be verified.

And so on.

Once you achieve 3 sales within 180 days, your review begins, and upon approval, you can start earning commissions through Associates.

Amazon does not disclose review criteria, so you won't get answers even if you ask. It seems the review process is stricter compared to other affiliate programs!

And so Amazon Associates also passed approval! 🎉
My mother and our president's shopping affiliate site has become the main revenue driver 💥

Note: Purchasing within the family circle isn't ideal, but... if this gets my Amazon Associates account suspended, I'm sorry in advance m(_ _;)m

Sales are moving at a slow pace right now, but when I look at the summary and conversion rates, it's actually quite interesting!

Next directive @ 2024

After leaving things alone for a while, a gap in work opened up. And then the next directive came...

Requirements

• Isn't the page indexing a bit weak?
• Let's add office space too.
• While we're at it, why not swap it over to Next.js?

Another unreasonable request.

Tech stack

I'm using Pannellum's js and css files from the public folder, but is importing via npm the standard approach?
I recently heard a Next.js library for this became available—it would have made implementation much easier if it existed when I was working on this.

As an added benefit, I also kept web accessibility compliance in mind and made sure keyboard navigation is supported.

The modal is implemented using Next.js Parallel Routes with the /item/{num} parameter so it gets indexed by Google's SEO and is counted as a single page.

The shift from CSR to ISR also contributes to SEO improvements!

The work continues.

Requirements

• Sorry, we got flagged for security so I stripped out the office space! (Complete: added it anyway but marked it as restricted.)
• Something feels too heavy... the rendering seems off? (Partially complete)
• Since we have an LLM anyway, why not automate something? I'd like to introduce some completely different concepts! (Current: what does that even mean?)
• We could just add products and such~

Through steady version updates, it evolved into an experimental affiliate site Liberogic office green!

I really love the confetti effect and the CEO illustration modal on the opening screen, which feels like a small family shop! We also add little tweaks like this whenever inspiration strikes during downtime—things like "this could be fun!" The site will probably keep evolving from here!

Summary?

When I initially built it with Vanilla JS, I implemented most of it myself, but as we made various revisions, function nesting became increasingly complex. If AI had been this advanced when we remade it with Next.js, it might have been easier, but on the flip side, we've accumulated knowledge and can now "use AI with understanding".

Personally, it's one of my favorite sites, but what do you all think??

Please feel free to explore and take a tour of the office!