Step 1

Define the needs.

Just J Network was looking to jumpstart their business into the world wide web. Events, art, merch, blog, gaming, reviews, and much much more. They wanted to be cutting edge and keep the site running as quickly and smoothly as possible. Celestial Lite was brought in to power the foundation.

A blue and black theme was used for their color palette, and a fun, hand drawn sharpie font used for typography.

Step 2

Optimize and improve.

Instead of reinventing the wheel and creating our own video hosting system, we decided to go with Vimeo to power the video blogs. Using only a video ID, someone can post an entirely new video post by referencing the ID, and the site will automatically build the page from a YAML template.

Event data is hosted in JSON and can be set up using timers, visibility toggles, status, and any future needs. Since the site is statically generated, all of this content exists in the source code and provides a ton of SEO value for each page.

---
layout: layouts/post-video.njk
videoTitle: "The Room"
episode: 1
title: "Royal Rumble 2021"
date: "2021-02-06"
videoID: "5t8SSqchSrA"
tags:
- "wrestling"
---

Step 3

Ecommerce.

The merchandising portion is powered by Stripe's platform, and each item on Stripe is referenced in a JSON table on the site. When a user wants to purchase an item, the ID is sent to Stripe who automatically creates the checkout page, keeping the site up to maximum PCI compliance. Users can also manage their payment history and credit cards through secure channels. None of the credit card data ever hits our servers.

With the system also powering through Stripe, products can't be maliciously changed or edited. Security is first and foremost with Celestial Lite.

// Initiate Stripe with your public API Key
let stripe = Stripe('your-key-here');

// Build your cart as a JSON array of objects. This can be stored in sessionStorage!
let cart = [
	{price: "price-object-id-123", quantity: 1},
	{price: "price-object-id-890", quantity: 3},
]

// The function to create a Stripe Checkout request
function StripeCheckout(cartArray) {
	stripe
		.redirectToCheckout({
			lineItems: cartArray,
			mode: 'payment',
			successUrl: 'https://www.zachvoss.com?paymentStatus=success',
			cancelUrl: 'https://www.zachvoss.com/?paymentStatus=cancelled',
		})
		.then(function(result) {
			console.log(result);
		});
}

// When user clicks the checkout button, send create the Stripe Checkout session
document.getElementById("data-checkout").addEventListener("click", function() {
	// Other stuff here
	// fireworks();

	// Launch Stripe Checkout
	StripeCheckout(cart);
});

Step 4

Ranking System.

The ranking system was one of the most exciting things I've been lucky to build in my time as a web developer. When the project is built with NodeJS, the player ranking JSON database is compiled together into a new minified JSON file to be used on the front-end for fetch requests. The JSON is also compiled separately into specific game categories so each game gets its own listing of players and their ranking. This allows Just J Network to handle a single source of truth for all their game ranking needs.

Each game "id" is a reference to another JSON file that has the list of games available. This prevents duplicate data and makes it a breeze to remove specific games if we ever needed to in the future. When the JSON is compiled, the scores are tallied and added to the object's root as new keys: "wins", "losses", and "record" (which is just the total number of wins subtracted by losses).

[
	{
		"id": 1, "name":"Player 1", "color":"green", "avatar":"player-1-profile-pic.jpg",
		"games":[
			{"id": "1", "win": 6, "loss": 2},
			{"id": "2", "win": 1, "loss": 1},
			{"id": "3", "win": 0, "loss": 3},
			{"id": "4", "win": 1, "loss": 2}
		]
	},
	{
		"id": 2, "name":"Player 2", "color":"gold", "avatar":"player-2-profile-pic.jpg",
		"games":[
			{"id": "1", "win": 1, "loss": 1},
			{"id": "2", "win": 0, "loss": 3},
			{"id": "3", "win": 1, "loss": 2},
			{"id": "4", "win": 6, "loss": 2}
		]
	},
	{
		"id": 3, "name":"Player 3", "color":"purple", "avatar":"player-3-profile-pic.jpg",
		"games":[
			{"id": "1", "win": 0, "loss": 3},
			{"id": "2", "win": 1, "loss": 2},
			{"id": "3", "win": 6, "loss": 2},
			{"id": "4", "win": 1, "loss": 1}
		]
	},
	{
		"id": 4, "name":"Player 4", "color":"silver", "avatar":"player-4-profile-pic.jpg",
		"games":[
			{"id": "1", "win": 1, "loss": 2},
			{"id": "2", "win": 6, "loss": 2},
			{"id": "3", "win": 1, "loss": 1},
			{"id": "4", "win": 0, "loss": 3}
		]
	}
]

Step 5

Shoot for a perfect score.

Because this is a game related website, I challenged myself to get a perfect Lighthouse audit score to fit with the theme.

The homepage is pretty image heavy, especially with its large hero banner. The sharpie font from Google also contributes to over half the time spent loading. Additional optimizations such as lazy loading the homepage graphics and loading the Google Font from my own CDN could bring that up to a 98 or 99. For the first round deployment, this was a major win on the performance side.

Finito! (The End)

Thanks for reading!