Quiz list would generate unique URL for each flashcard quiz, which will ultimately be a part of the sitemap.

In the process of creating static flashcard quiz, I realised that visitors were far away from the subscription form that was situated on a home page. That led me to create contextualised EOI (Expression of Interest) form at the end of each flashcard quiz.

By this time, I had addressed all three issues I realised previously.

After that, I created dynamic Twitter share link based on the quiz metadata and converted that into Vue Component to re-use anywhere within the site.

Here’s the copy of second version of landing page that is hosted on Surge — http://heavy-frog.surge.sh/#/

I was in a much better place after second version was deployed and live. Whatever was done after this point was a bonus!

Why did I need third revision?

With Vue app, the performance of the landing page was snappy and the website looked almost perfect, but I wasn’t happy with few things like,

Fixed title and description tags in the head element of the page

URLs had # appearing in them

Landing page didn’t cache assets like data, images, css, js, html, etc

Head Element

Although, App-sneak-peek looked as pretty and functional as expected, the site had one fixed index page head element for all site pages.

Clean URL

Default URL generated by Vue Router comes with # in it. Using mode: ‘history’ didn’t quite work out because when data wasn’t available, the app would try to use catch-all fall-back route that sent users back on index.html.

This didn’t serve the purpose of sharing direct quiz-link on social media.

Caching Assets

In addition to the clean URLs and custom head element, I started looking for ways to probably cache frequently used assets, such as, CSS, images, js, data, etc to improve the app performance.

My ideas of a landing page were leaning towards Progressive Web App.

So, I started reading about dynamic head element, progressive web application, SSL implementation, URL redirection, Nuxt Js, Structured Data and schema.org.

Second version may have run for another week before I made the decision to revise things and re-create it differently.

Introducing Nuxt Js ❤

The key benefit of Nuxt Js is the server side rendering, but I was rather sold on the following advantages before considering this framework for my coming-soon page:

Nuxt Js comes bundle with vue-meta to manage header and html attributes, which provided dynamically populated meta tags Automagically generated vue-router configuration (for both basic and dynamic routes) gave me clean URLs Cleaner way of creating & organising custom plugins and modules (Google Analytics, TweenMax Animations and Transitions) Selective loading of CSS and JS using the powerful head() object State management to share data within web application

Another three reasons for choosing Nuxt Js for landing page were,

this Vue based site was basically a public facing website, and required no login/registration to view the content,

the SEO friendly features were essential for this project, and

according to my research, I was pretty sure by now that Nuxt Js would help me build Progressive Web App.

Unaware of PWA previously, I already had some features taken care of in second version as below,

Correctly sized content for the viewport

Site worked cross-browser

Provided grand user experience when opened on big screens, but also performed well on medium and smaller devices

URL for each page (with #, but still…)

TweenMax animation looked smooth as you start answering quiz questions

Contextualised Twitter share link and Share-Your-Score link

Apart from that, what really made PWA tick was HTTPS redirection, Service Worker registration, splash-screen during initial load when accessed as an app and caching.

Third time pays for all

Dev stack for third version:

Js Framework: Nuxt Js

Animation Library: Greensock TweenMax

CSS Framework: Bootstrap 4

Hosting: Heroku (setup as Node Js App)

SSL: Let’s Encrypt

Version Control: Heroku + GitLab

Domain Management: Hover

Third version of the site wasn’t just minor improvements on the existing code-base, but it was rather complete re-basing of Nuxt Js site onto current Vue site.

In terms of Heroku, it was little challenging. Because current Heroku App was remotely connected with Vue App and the new project had different local Nuxt Js directory structure.

When I learned Git commands couple of years ago, I never thought I would need to rebase or create an orphan branch! But this was the perfect use-case for these two commands.

Thinking in PWA

The decision to create PWA made me think a lot about the site structure, ease of navigation when accessed as an app, responsiveness and site performance.

I went through the checklist of PWA as published by Google and started tackling each remaining feature one by one.

I reused existing code-base and started converting Vue Js app into Nuxt Js app.

The fundamental differences here were,

Previously called Vue mixins, directives and filters turned into Nuxt plugins

The way CSS, JS, modules and plugins were loaded was different

Use of fetch() method to fill the store before page rendering and the data was available universally within app

Use of head() method to populate head elements

Revisiting (Dynamic) Head Element and clean URL

With few extra attributes added in the data object, I had dynamic head element populated with the help of vue-meta.

Dynamic route configuration powered by Vue Router provided clean and unique URL for each quiz without #.

Structured Data

I wanted to customise structured data based on the quiz content and have full control over the data being used for SEO. Vue mounted life-cycle hook helped populate dynamic Structured Data.

Structured Data from pariksha.io index page

Helper Packages

Core Nuxt Js framework is very light-weight. But Nuxt-Community has developed some of the best packages to compliment your progressive web application.

Redirect-SSL — …encouraged me to implement complimentary Heroku SSL (with Let’s Encrypt) and configured appropriate URL redirection to always serve the site over SSL. Nuxt PWA — …helped support key PWA features, such as,

— Registering Service Worker Js

— Prompt to install the web app on mobile devices

— Customising Workbox-build to cache assets Nuxt Sitemap — … enabled sitemap xml generation on the fly during project building phase

Individually, each effort was little on its own, but auditing the site on Google Lighthouse resulted into 100% PWA for all site pages!