Technical Blog
System architecture blueprints, technical articles and guides, low-level system explorations, and execution logs from building scalable web, desktop, and mobile applications.
All Article Series
All Articles
Introduction to Full-Stack Google Contacts Clone with Node.js (Adonisjs Framework) and Vuejs (Quasar Framework)
Learn and Build a Full-stack Google Contacts Clone with Node.js/Adonis.js and Vue.js/Quasar in this detailed Web Learning Series by Ndianabasi Udonkang.
New Contact Form Design | Full-Stack Google Contacts Clone with Adonis.js/Node.js and Quasar (Vue.js)
In this lesson, we will design the contact-creation form of our Google Contacts clone app. We will also learn how to create a route for the contact form and
Refactoring the Main Layout | Full-Stack Google Contacts Clone with Adonis.js/Node.js and Quasar (Vue.js)
In this lesson, we will refactor the MainLayout.vue file and extract the menu data into a separate file. We will also implement types for the menu data.
Setting Up Our API Server with AdonisJs Framework | Full-Stack Google Contacts Clone with AdonisJs (Node.js) and Quasar Framework (Vue.js)
In this lesson, we will setup our API Server with the AdonisJS Framework and installing, configuring, and testing some essential packages.
Setting Up Postman with the API Server | Full-Stack Google Contacts Clone with AdonisJS (Node.js) and Quasar Framework (Vue.js)
In this lesson, we will learn how to use Postman to send API requests to our API server. We will create collections, environments, variables within Postman
Setting Up The Backend | Full-Stack Google Contacts Clone with AdonisJs (Node.js) and Quasar Framework (Vue.js)
We will setup our backend by install MySQL, MySQL Workbench, Postman, creating a database, and checking the health of our backend.
The Left Drawer | Full-Stack Google Contacts Clone with Adonis.js/Node.js and Quasar (Vue.js)
In this lesson, the left drawer of the Google Contacts clone app is fully- customised and made very responsive in mobile and desktop views.
The Model-View-Controller Design Pattern in AdonisJS | Full-Stack Google Contacts Clone with AdonisJS (Node.js) and Quasar Framework (Vue.js)
We will learn about the
Model-View-Controllerdesign pattern as implemented by the AdonisJS Framework and create model, controller and migration files
Uploading Files and Creating Avatars for Contacts With AdonisJS and Axios
In this lesson, we will learn how to upload images and create avatars with AdonisJS and Quasar Frameworks and the Axios HTTP library.
Using Model Factories and Seeders in AdonisJS | Full-Stack Google Contacts Clone with AdonisJS Framework (Node.js) and Quasar Framework (Vue.js)
In this lesson, we make use a model factory and seeder in AdonisJS to generate and persist sample contacts. We also list all contacts with pagination.