Introduction | Full-Stack Google Contacts Clone with Adonis.js/Node.js and Quasar (Vue.js)

I am grateful to the developer community for the immense knowledge shared voluntarily each day. I am a big beneficiary of the goodness of thousands of developers around the world who sacrifice a lot of man-hours to document their knowledge and help millions of people around the world.

Having been a JavaScript developer for the last 4 years, I have been thinking of ways of giving back to the community. Earlier this year, I started with developing a full-stack application, the Akpoho Invoicing Software, with the aim of demonstrating how to build an application with Vue.js 3 (via the Quasar framework ) and Node.js (via the Adonis.js framework ). Along the way, I got sucked into the software so much that it became bloated with unplanned features and almost became a SaaS project instead of a demonstration/learning project. While the software is quite robust, I won't be able to use it for developing a learning series. However, the codebase is always available for studying.

So, I have decided to build a simple and small app (a Google Calendar clone). This Google Contacts clone will be built with the Quasar (Vue.js 3) framework and Adonis.js (Node.js) framework.

The Quasar Framework provides the best and most-robust Vue.js components library I have come across. While it allows you to build your frontend as a Single Page Application (SPA) as common with most UI frameworks, it has an impressive suite of CLI tools offering additional functionalities such as Server-Side Rendering (SSR), building to Capacitor, Cordova and Electron apps, and developing browser extensions. Basically, you can right once and deploy to Android, iOS, Desktop, and Browser extensions with the Quasar CLI.

The Adonis.js Framework provides everything needed to develop fully-functional web apps and API servers with Node.js. With Adonis.js, you do not need to use poorly-written Node.js packages which are stitched together with more glue code. It supports TS out of box for type-safety.

This series will be completely written in JavaScript, so there is a default assumption of basic- to intermediate-level JavaScript competency. While, I will explain the JavaScript codes where needed, this is not a beginning project for learning basic JavaScript.

There is a starter project on GitHub which can be found here. You should fork the project, clone it into your development machine, and develop the project along as you study the lessons. This series will be 100% hands-on. Where feasible, I encourage you to type out all the code snippets instead of copying and pasting the snippets. Especially, if you are still learning JavaScript, typing out the codes will help build muscle memories around the syntaxes.

I wish you all the best. You can contact me easily on Twitter (see my bio) if you have questions.