AITL Story

AITL is a non-profit organization whose mission is to provide a platform for learning the Tamil language free of cost. They have all the resources and techniques mentioned on their website which one can refer to learn Tamil. The website includes a proper syllabus and guidance for schools as well to teach the Tamil language. 

On the technical part, the original website of the AITL was built on WordPress, even though it is a good platform for website development, there were other issues that the AITL was facing. AITL website was less than a year old when they came to us to revamp the website with the following major goals – Ease of use, Contemporary look and feel, Performance/ SEO enhancement. The other major factor was scalability. 

Website Issues

There were a number of issues that AITL faced with the WordPress website.

• Look and Feel - As the website is built on a template its features were restricted to the features provided by that particular template. The template with more features not only costs more but also comes with features that were not relevant for AITL.
• Features - There are very limited features that WordPress provides out of the box. If you want to add some more features chances are you have to pay for a plugin to get them and sometimes these plugins can charge you up to $100/Year which is still a lot for something basic. Additionally, these features come with other bells and whistles which were not required. This further impacts the performance of the website. For example, there was a PDF plugin whose functionality was to display a PDF book as a flipbook with some flipping page sound, though it looked good it came with a cost of about $40 a year.
• Scalability - The website was only a year old but we figured out as the number of pages increases the scalability can be an issue in the website. The original website does not have the blog section but the AITL wanted to include it in their website with a preview feature so that they can view the blog before publishing it.
• Hosting - Hosting was again an issue, there were no free hosting solutions in WordPress. Even if you use the free hosting it will come with the wordpress.com domain attached to your website. Also, in the free plan, there will be ads run by WordPress even if you don’t want them. So, the hosting was again an issue as the cost of hosting will increase drastically as the website will scale and more users will operate on the website simultaneously.

Our Approach and Challenges

So, our challenge was to develop the website from scratch and that too purely on the frontend. There were a number of options available for the frontend like React, Gatsby, Nuxt js etc., at last, we went for the Nuxt js. 

Why Nuxt js?

• Nuxt js is a framework based on Vue js, so it is a framework of the framework.
• But Vue js is already good at developing Single Page Applications then why Nuxt js? Because Nuxt js can be used to develop Universal Applications, meaning the code can be executed both on the client-side as well as server-side.
• Since it allows server-side rendering it is far better for Search Engine Optimization than traditional SPAs developed using Vue js.
• Another advantage of Nuxt js is, it can do both dynamic page generation and static page generation. With a single command, you can get the full static version of your website.

The other aspect that needed to be considered was to build a role-based authentication with different permissions. We also needed some databases to store all the data and storage for storing book PDFs and images. But as planned we were not going to include a separate backend for all these services. So the solution for all these was Firebase.

What is Firebase?

• Firebase is Backend as a Service (BaaS) and it saves a lot of time that is needed to set up a backend. Just include Firebase SDK in the project and you are good to go.
• Firebase provided us authentication and we added our custom roles such as admin and manager.
• Firestore is a NoSQL database provided by Firebase which we used to store all kinds of data. We will discuss more on this later.
• And finally, the Storage that we used to store PDFs and all the images.

Hosting the website.

• We considered Netlify at the beginning to host our website. It is a very popular option to host a fully static website. 
• The one major reason to consider Netlify was to have integration of Netlify CMS in our website. We were planning to use Netlify CMS for everything from publishing blogs to having editable data on all the pages.
• So we did that and deployed the first commit to Netlify. Netlify provides its own identity for Netlify CMS so it again saves time.
• But we have to implement the Firebase authentication just to upload books which is a major part of the website. As we did that everything was good until we deployed it to Netlify for testing.
• The authentication was failing when we refreshed the page. This was due to the fact that the website was static and it does not provide req object. And we are using Nuxt middleware to block users on the basis of permissions so req is necessary for that.
• There was no other solution but to shift the entire website to a different hosting platform.
• Then came the Google App Engine. It is a Node js hosting service provided by Google Cloud Platform that also supports server-side rendering. So we can take advantage of this for SEO purposes.
• Since Firebase also comes under GCP it was easy to have everything under a single project.
• Also, App Engine and Firebase come with this pay as you go feature. So it saves a lot of money. Since the website is still new there is not a lot of traffic and we only have to pay for what we use. Also, it scales automatically, so when huge traffic comes to the website it scales for us and we don’t have to worry about it.

Displaying Books

One of the issues with the previous website as we discussed was the Flipbook plugin. It was good but came with an additional cost for the overall maintenance. So, we went for the open-source js library PDF.js by Mozilla. It did the job of displaying the PDF on the webpage. And our main purpose is that users should download books and have an offline copy of them. The library used is just to provide a good preview of the book.

Content Management System (CMS)

• As we discussed we were going to use Netlify CMS for it, then we completely removed that from the website.
• Another approach we used was Strapi CMS. It's a very good platform for CMS.
• Also, its integration with Nuxt js is also very simple. But as we started using it we had some conclusions.
• • Easy to control data displayed on websites, easy to publish blogs. 
  • But here comes another problem, we need to have a separate hosting for Strapi.
  • Also, the images needed to be stored at different place like Cloudinary. It also needed a database which we can get on Heroku while we host Strapi CMS on it.
  • But all these things diverted us from our main goal, which is not to have a backend.
  • So, we dropped the idea of Strapi CMS in the early stage.
• After going through a lot of things we finally decided to create our own custom CMS based on Firebase.

Firebase based CMS

For this we used Quill js which is an open-source library and provides a text editor to write content.
We integrated it with the Firebase to save the data. Also since it is integrated with Firebase it is easy to manage draft and published copies of data. Using components in Nuxt js we made our own preview modal. 
All the blogs, data on other pages, basically everything that you see on the website can be edited within the admin panel and there is no need to come to the developers for these kinds of changes.

Search Engine Optimization

This was the score of the AITL WordPress site. As we can see, even when the score looks good on paper, it was not performing well practically. The site took more time to load impacting the performance of the website and user experience. The website was also not PWA which is necessary for caching data for offline usage.

AITL WordPress Lighthouse Score

Here is the new score after moving to Nuxt. The website now loads much faster than before. We optimized it for better performance and accessibility. We took care of SEO as well. As we discussed before Nuxt can render on the server-side and also the new version is hosted on Google App Engine (GAE), we are taking full advantage of server-side rendering thus increasing the SEO and performance. The website is also a Progressive Web Application which enables data caching and enables users to access the website content like blogs even without an internet connection.

AITL Nuxt and GAE Lighthouse Score

Final Thoughts

We went through a lot of experiments in the development stage but in the end, we achieved the goal. All the features of the website are working as expected. The AITL got its new look and feel which will give users a great experience. A lot of new features are added to the website which was necessary.

The decision of choosing Nuxt js frontend with Firebase as backend service went well. It helped in improving the SEO scores thanks to server-side rendering possible due to App Engine hosting.