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

Have you heard of the site called "Office Green"...?

Everything we release, including our corporate website, is essentially a testing ground. (The accessibility app by Mr. Futamata is the exception! By the way, this site is not yet WCAG compliant 😭)

It all started about five or six years ago, during the COVID era, when our bored president began greening the office himself as a DIY project. (https://yurulog.liberogic.jp/posts/qx9nibr59)

The First Unreasonable Request @2023

Requirements

• A client wanted to start an affiliate site, so we thought, why not try a small experiment! (That client ultimately gave up, so the experiment remained just an experiment.)
• How about we test whether we can pass Amazon Associates eligibility without holding any pages, by indexing pages opened within a modal? (We had already bought a lot of gear for the office greening, so let's use that as material!)
• Honestly, I don't get many chances to work on something like rotating 360° images around. There are libraries for it, and it looks easy, so let's just give it a try!
• Revenue doesn't matter to me, so let's publish it if we can while also using it as an experiment and a learning exercise!
• Our site is basically a testing ground for our clients, you know? Get it? (❓)

That concludes the requirements that were handed off to me shortly after I joined the company.

Implementation began in February 2023. Below, I'll document the history of revisions and content additions up to the present!
Finally bringing Liberogic Office Green to light! ☀️

Tech Stack

• Vanilla JS (ES Modules) — No framework; custom modules split using import/export
• Pannellum - 360-degree panorama viewer library (self-hosted locally in the pannellum/ folder rather than via CDN)
• HTML / Sass - Markup and styling

External APIs and services

The core feature of this site is the 360° rotating content. We photographed the office using RICOH's "THETA SC2" camera.

Here is the original photo.

The 360° implementation uses a library called Pannellum. Simply by setting the captured image, you can view it as a full 360° panorama.

To allow for various customizations, we downloaded the library itself instead of using a CDN.

Customization

Place an "i" marker on the featured products, and when the mouse hovers over it, the product name is displayed in a speech bubble.

Clicking opens a product introduction modal linked to an Amazon Associates link. In the office floor plan at the bottom right, a star mark shows where each item is located.

No holding back on the product reviews, with the president's honest take included!!

You can also use the switch in the top left to toggle a view with the room lights off, and click the arrow to move over to the president's desk!

We manage the product data in a spreadsheet rather than a CMS, deliberately, to make it easier to edit and update.

The reason is,

"Clients probably want something lightweight to operate, right? Just connect it through the spreadsheet!"

The spreadsheet data is fetched and fed into the modal... and once it was working, well...

"This site is slow, you know~"

…………

The API was based on the source of the custom hotspot. The reference originally only displayed text when a marker placed anywhere was hovered, but we added a modal, switched views, and added various original elements of our own.

And so, it's finally finished 🎊
When it was done, I was so happy that I kept spinning around the site!

Amazon Associates

It's the well-known affiliate program for Amazon products.

The steps are as follows.

• The website content must be current (generally updated within the last 60 days / the site must clearly show it is actively maintained).
• The site must have 10 or more articles or pieces of content.
• Once you can display product links, add the Amazon Associates disclosure to your privacy policy page.
• You must make 3 sales within 180 days of registration (the same account or family members are not allowed).
• The URL you enter must be correct and the site must be verifiable.

And so on.

Once you make 3 sales within 180 days, your application goes under review, and if approved, you can start earning commissions through Associates.

They don't disclose their review criteria, so you won't get answers even if you ask. It seems their screening is stricter than other affiliate programs!

And we've successfully passed the Amazon Associates program too! 🎉
Our shopping affiliate site, where most of the sales come from my mom and the company president, has officially been born 💥

* Buying from family members isn't ideal... Sorry in advance if this gets us removed from Amazon Associates m(_ _;)m

Sales are moving at a slow-and-steady pace for now, but the summary and conversion rates are actually pretty interesting!

Next Directive @2024

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

Requirements

• Isn't our page indexing a bit lax?
• Let's add office space too.
• Why don't we just rebuild it with Next.js while we're at it?

Another impossible request.

Tech Stack

Are people mostly importing Pannellum's JS and CSS files via npm instead of putting them in the public folder like I did?
I heard a library for Next.js was recently released. It would have made implementation much easier if it had existed back then..

I also kept web accessibility in mind and made it possible to operate everything with the keyboard.

To get the modals indexed by Google for SEO and counted as individual pages, I added a /item/{num} parameter and implemented them using Next.js Parallel Routes.

Switching from CSR to ISR should also help SEO, right!?

The orders keep coming.

Requirements

• Sorry, security flagged it, so please get rid of the office space! (Done: I just added it, but I've marked it with a 🈲 — prohibited symbol.)
• It's way too heavy... I think the rendering is off? (Somewhat done)
• Since we have an LLM, shouldn't we automate something with it? I'd like to bring in a completely different concept! (Current status: What do you mean?)
• How about adding some products or something~

Through steady version upgrades, it has become the experimental affiliate site Liberogic office green !

I especially love the confetti on the opening screen, which feels like a small shop, and the president illustration modal! I often add small tweaks like these on my free time when I think, "Wouldn't it be fun if this existed?" I'm sure it will keep evolving!

Final thoughts?

When I first built it in Vanilla JS, I implemented most things myself, but as I kept revising it, the function nesting became more and more complicated. If AI had advanced to where it is today when I remade it in Next.js, it might have been easier, but in exchange, I've accumulated knowledge, and I think that has allowed me to "use AI with an understanding of what it's doing".

Personally, it's a site I'm fond of, but what do you all think??

Please take a spin around and check out the office!