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
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.
Create Column Definitions & Insert New Contacts | Full-Stack Google Contacts Clone with AdonisJS (Node.js) and Quasar Framework (Vue.js)
We will create column definitions in our migration and model files for our
Contactmodel. Then new route and controller logic to create our new contacts.
Workspace Setup | Full-Stack Google Contacts Clone with Adonis.js/Node.js and Quasar (Vue.js)
In this lesson, we will setup the development workspace with Git, Node.js, Visual Studio Code, Yarn, and Quasar CLI for our Google Contacts Clone App.
Validating the Contact Form with Vuelidate | Full-Stack Google Contacts Clone with Adonis.js/Node.js and Quasar (Vue.js)
In this lesson, we will learn how to carry out proper and performant form validations for the contact-creation form of our Google Contacts clone app.
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.
Improving User Experience with the Contacts Table | Full-Stack Google Contacts Clone with Adonis.js/Node.js and Quasar (Vue.js)
In this lesson, we will improve the user interface and user experience of our Contacts table by adding merging the checkbox and avatar columns plus more.
Designing the Contacts Table | Full-Stack Google Contacts Clone with Adonis.js/Node.js and Quasar (Vue.js)
In this lesson, we will learn how to implement the Contacts table to display all our contacts. We will also implement virtual (infinite) scrolling.
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
Creating the Contact Edit Page | Full-Stack Google Contacts Clone with Adonis.js/Node.js and Quasar (Vue.js)
In this lesson, we will design the contact edit page for editing the details/properties of each contact in our Google Contacts Clone App.
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