# 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

### Full-Stack Google Contacts Clone with Node.js (Adonisjs Framework) and Vue.js (Quasar Framework)

This series takes a user through the entire process of creating a full-stack Google Contacts clone app. The frontend design and development and backend engineering for the app will be covered.

**Articles in series:** 30
[View Series](/llms/technical-blog/series/clnwu9bc991hiu3wo2vwmw45/full-stack-google-contacts-clone-with-node-js-adonisjs-framework-and-vue-js-quasar-framework.md)

---

## All Articles (34)

01. **How to Migrate Passwords from Bcrypt to Argon2ID Hashes in AdonisJS**
   Learn how to migrate your users' passwords which were hashed with bcrypt algorithm to argon2id algorithm while ensuring that they can still login seamlessly
   [Read Article](/llms/technical-blog/article/nqgrwqfbusjv57iwwnexolvw/how-to-migrate-passwords-from-bcrypt-to-argon2-id-hashes-in-adonis-js.md)

02. **How to Avoid SQL Injections, XSS Attacks, and File Upload Attacks in your Web Application**
   This long-form article discusses various vulnerabilities and how to mitigate them in web applications - including SQL injections, XSS, & file upload attacks
   [Read Article](/llms/technical-blog/article/jjwqsdskk2ie4qr5jee6xn4s/how-to-avoid-sql-injections-xss-attacks-and-file-upload-attacks-in-your-web-application.md)

03. **Why Choose the AdonisJs Framework? | Full-Stack Google Contacts Clone with AdonisJs (Node.js) and Quasar Framework (Vue.js)**
   In this lesson, we will look at the beautiful and expressive features of the AdonisJs Framework and why we chose it for our API server over others in Nodejs
   [Read Article](/llms/technical-blog/article/lnhm5oudx34yo2869gmcms37/why-choose-the-adonis-js-framework-full-stack-google-contacts-clone-with-adonis-js-node-js-and-quasar-framework-vue-js.md)

04. **How We Migrated a Large Complex Database from MySQL to PostgreSQL at Gotedo**
   In this article, we discuss how we successfully migrated a large database from MySQL to PostgreSQL with Nodejs/AdonisJS.
   [Read Article](/llms/technical-blog/article/whdiidsjm57o7ffkbpitajnq/how-we-migrated-a-large-complex-database-from-my-sql-to-postgre-sql-at-gotedo.md)

05. **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-Controller` design pattern as implemented by the AdonisJS Framework and create model, controller and migration files
   [Read Article](/llms/technical-blog/article/h5wqql65iejop5xrplujw458/the-model-view-controller-design-pattern-in-adonis-js-full-stack-google-contacts-clone-with-adonis-js-node-js-and-quasar-framework-vue-js.md)

06. **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.
   [Read Article](/llms/technical-blog/article/fmr90prj84c9zn0633jc368g/creating-the-contact-edit-page-full-stack-google-contacts-clone-with-adonis-js-node-js-and-quasar-vue-js.md)

07. **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
   [Read Article](/llms/technical-blog/article/v4qehksislosmuy92qgjr4ct/setting-up-postman-with-the-api-server-full-stack-google-contacts-clone-with-adonis-js-node-js-and-quasar-framework-vue-js.md)

08. **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.
   [Read Article](/llms/technical-blog/article/h2p1x1z406ib38zu2dci3jur/designing-the-contacts-table-full-stack-google-contacts-clone-with-adonis-js-node-js-and-quasar-vue-js.md)

09. **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.
   [Read Article](/llms/technical-blog/article/dzs812auf61ej7qu2cg726dh/improving-user-experience-with-the-contacts-table-full-stack-google-contacts-clone-with-adonis-js-node-js-and-quasar-vue-js.md)

10. **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.
   [Read Article](/llms/technical-blog/article/hg9ilaubqesm8angg0rhrjp9/uploading-files-and-creating-avatars-for-contacts-with-adonis-js-and-axios.md)

11. **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.
   [Read Article](/llms/technical-blog/article/z0xr9m2ljler2cwnpsw2ycwa/validating-the-contact-form-with-vuelidate-full-stack-google-contacts-clone-with-adonis-js-node-js-and-quasar-vue-js.md)

12. **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.
   [Read Article](/llms/technical-blog/article/fo8str8yjpkz5dygxg875bpw/workspace-setup-full-stack-google-contacts-clone-with-adonis-js-node-js-and-quasar-vue-js.md)

13. **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 `Contact` model. Then new route and controller logic to create our new contacts.
   [Read Article](/llms/technical-blog/article/asc2emsho4u73r6jb2gxjddw/create-column-definitions-and-insert-new-contacts-full-stack-google-contacts-clone-with-adonis-js-node-js-and-quasar-framework-vue-js.md)

14. **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.
   [Read Article](/llms/technical-blog/article/uktmlqsivwtr3cvnpld59k9q/refactoring-the-main-layout-full-stack-google-contacts-clone-with-adonis-js-node-js-and-quasar-vue-js.md)

15. **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.
   [Read Article](/llms/technical-blog/article/x1jgmet84aqj9qggu5mulkh0/setting-up-our-api-server-with-adonis-js-framework-full-stack-google-contacts-clone-with-adonis-js-node-js-and-quasar-framework-vue-js.md)

16. **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.
   [Read Article](/llms/technical-blog/article/cfotveuxbgjtdp12l6pzcb2y/using-model-factories-and-seeders-in-adonis-js-full-stack-google-contacts-clone-with-adonis-js-framework-node-js-and-quasar-framework-vue-js.md)

17. **Frontend Overview | Full-Stack Google Contacts Clone with Adonis.js/Node.js and Quasar (Vue.js)**
   This lesson dives deep into how the UI of the Google Contacts clone app will be structured including details of how Vue Router works.
   [Read Article](/llms/technical-blog/article/nxgmng6fhf1cwjk30coflro2/frontend-overview-full-stack-google-contacts-clone-with-adonis-js-node-js-and-quasar-vue-js.md)

18. **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.
   [Read Article](/llms/technical-blog/article/fxb49fmz9ljbwrimbnnzudfv/setting-up-the-backend-full-stack-google-contacts-clone-with-adonis-js-node-js-and-quasar-framework-vue-js.md)

19. **How Software Backends Work | Full-Stack Google Contacts Clone with AdonisJs (Node.js) and Quasar Framework (Vue.js)**
   In this lesson, we will learn how software backends work by discussing server applications, ports, reverse proxy servers, request lifecyles, etc.
   [Read Article](/llms/technical-blog/article/aca8fcrghz70nn1wqg3uzbum/how-software-backends-work-full-stack-google-contacts-clone-with-adonis-js-node-js-and-quasar-framework-vue-js.md)

20. **Designing the Contact Details Page | Full-Stack Google Contacts Clone with Adonis.js/Node.js and Quasar (Vue.js)**
   In this lesson, we will design the contact details page for viewing the details/properties of each contact. We will also create the route for the page.
   [Read Article](/llms/technical-blog/article/kf9pz97n63fvgfrcy5viwzrg/designing-the-contact-details-page-full-stack-google-contacts-clone-with-adonis-js-node-js-and-quasar-vue-js.md)

21. **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.
   [Read Article](/llms/technical-blog/article/m6fagvy2il5h65llxxbbl9os/the-left-drawer-full-stack-google-contacts-clone-with-adonis-js-node-js-and-quasar-vue-js.md)

22. **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
   [Read Article](/llms/technical-blog/article/ebguwpkntk3empakunrki4dq/new-contact-form-design-full-stack-google-contacts-clone-with-adonis-js-node-js-and-quasar-vue-js.md)

23. **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.
   [Read Article](/llms/technical-blog/article/xe5mlxg43s9rpx1pxsvfdp3r/introduction-to-full-stack-google-contacts-clone-with-node-js-adonisjs-framework-and-vuejs-quasar-framework.md)

24. **Creating and Updating Contacts From the Frontend | Full-Stack Google Contacts Clone with AdonisJS Framework (Node.js) and Quasar Framework (Vue.js)**
   In this lesson, we improved the frontend component and store files to allow the creation and edit of contacts from the frontend.
   [Read Article](/llms/technical-blog/article/t15w2s3ao9jo74l96stjo7z6/creating-and-updating-contacts-from-the-frontend-full-stack-google-contacts-clone-with-adonis-js-framework-node-js-and-quasar-framework-vue-js.md)

25. **Creating and Registering a Vuex Module | Full-Stack Google Contacts Clone with AdonisJS Framework (Node.js) and Quasar Framework (Vue.js)**
   In this lesson, we create and register the contacts module for the Vuex store of our app and define all states, getters, actions, and mutations.
   [Read Article](/llms/technical-blog/article/cw96ewnzujgsz2e2garhbuzb/creating-and-registering-a-vuex-module-full-stack-google-contacts-clone-with-adonis-js-framework-node-js-and-quasar-framework-vue-js.md)

26. **Improve The Header | Full-Stack Google Contacts Clone with Adonis.js/Node.js and Quasar (Vue.js)**
   In this lesson, the user experience and responsiveness of the header for our Google Contact Clone App was improved.
   [Read Article](/llms/technical-blog/article/jjwbxcg450jmkkcrrmkmwvwj/improve-the-header-full-stack-google-contacts-clone-with-adonis-js-node-js-and-quasar-vue-js.md)

27. **Deleting a Contact with AdonisJS and Vuejs**
   In this lesson, you will learn how to implement a button for handling deletion of a contact.
   [Read Article](/llms/technical-blog/article/zdr4pxmgcax2dsfnwimhty0g/deleting-a-contact-with-adonis-js-and-vuejs.md)

28. **Connecting the Frontend to the API Server | Full-Stack Google Contacts Clone with AdonisJS Framework (Node.js) and Quasar Framework (Vue.js)**
   In this lesson, we connected the frontend to the API server so that contacts are now fetched from the backend. We also configured CORS for extra security.
   [Read Article](/llms/technical-blog/article/fk4262359gg3g7f0jn95fn9b/connecting-the-frontend-to-the-api-server-full-stack-google-contacts-clone-with-adonis-js-framework-node-js-and-quasar-framework-vue-js.md)

29. **Data Validation & Sanitisation with AdonisJS | Full-Stack Google Contacts Clone with AdonisJS (Node.js) and Quasar Framework (Vue.js)**
   This lesson explores how to perform data validation and sanitisation in AdonisJS. It includes how to call the validator before storing data to database.
   [Read Article](/llms/technical-blog/article/bcey0ac7m5sbs9hqy1h824sl/data-validation-and-sanitisation-with-adonis-js-full-stack-google-contacts-clone-with-adonis-js-node-js-and-quasar-framework-vue-js.md)

30. **Creating a Middleware and Updating a Contact | Full-Stack Google Contacts Clone with AdonisJS (Node.js) and Quasar Framework (Vue.js)**
   In this lesson, we created a middleware for DRYing request lifecycle, improved the validation to support contact update, and updating a contact.
   [Read Article](/llms/technical-blog/article/oqxzmtgfy1r3oewpnedc7wf6/creating-a-middleware-and-updating-a-contact-full-stack-google-contacts-clone-with-adonis-js-node-js-and-quasar-framework-vue-js.md)

31. **Fetching and Deleting a Contact with AdonisJS | Full-Stack Google Contacts Clone with AdonisJS Framework (Node.js) and Quasar Framework (Vue.js)**
   Learn how to fetch and delete a contact from the database with AdonisJS for the Google Contacts Clone App. We use Postman to test the endpoints.
   [Read Article](/llms/technical-blog/article/p6bh0ponq43u3vi6o8uww84x/fetching-and-deleting-a-contact-with-adonis-js-full-stack-google-contacts-clone-with-adonis-js-framework-node-js-and-quasar-framework-vue-js.md)

32. **Designing the Contacts Table (Part 2) | Full-Stack Google Contacts Clone with Adonis.js/Node.js and Quasar (Vue.js)**
   In this lesson, we complete our discussion on how to design the contacts table with the QTable component from the Quasar framework.
   [Read Article](/llms/technical-blog/article/j0iscua9gg8ekuz8ifh6chpn/designing-the-contacts-table-part-2-full-stack-google-contacts-clone-with-adonis-js-node-js-and-quasar-vue-js.md)

33. **Connecting UI Components to the Vuex Store | Full-Stack Google Contacts Clone with AdonisJS Framework (Node.js) and Quasar Framework (Vue.js)**
   In this lesson, we connect our UI components to the Vuex Store. The contacts data, contact edit form, and contact details page now points at the Vuex store.
   [Read Article](/llms/technical-blog/article/fdyqp17yehbnqrjvjvab4b5b/connecting-ui-components-to-the-vuex-store-full-stack-google-contacts-clone-with-adonis-js-framework-node-js-and-quasar-framework-vue-js.md)

34. **Comprehensive Guide for Creating and Managing Cron Jobs in Nodejs / Adonisjs Applications**
   This article discusses the strategies for creating managing cron jobs for Nodejs/Adonisjs application via the system cron daemon and in-process cron jobs.
   [Read Article](/llms/technical-blog/article/whi87pbl1ziiz8uwxq8bz6wu/comprehensive-guide-for-creating-and-managing-cron-jobs-in-nodejs-adonisjs-applications.md)

---

## Blog Tags

- #Adonisjs (32 articles)
  [View Tag](/llms/technical-blog/tag/adonisjs.md)

- #Vuejs (30 articles)
  [View Tag](/llms/technical-blog/tag/vuejs.md)

- #Quasar Framework (30 articles)
  [View Tag](/llms/technical-blog/tag/quasar-framework.md)

- #Nodejs (28 articles)
  [View Tag](/llms/technical-blog/tag/nodejs.md)

- #JavaScript (18 articles)
  [View Tag](/llms/technical-blog/tag/javascript.md)

- #API Development (4 articles)
  [View Tag](/llms/technical-blog/tag/api-development.md)

- #Full Stack (2 articles)
  [View Tag](/llms/technical-blog/tag/full-stack-1.md)

- #Database Migrations (1 articles)
  [View Tag](/llms/technical-blog/tag/database-migrations.md)

- #Security (1 articles)
  [View Tag](/llms/technical-blog/tag/security.md)

- #Linux (1 articles)
  [View Tag](/llms/technical-blog/tag/linux.md)

- #Web Application (1 articles)
  [View Tag](/llms/technical-blog/tag/web-application.md)

- #PostgreSQL (1 articles)
  [View Tag](/llms/technical-blog/tag/postgresql.md)

- #CRON (1 articles)
  [View Tag](/llms/technical-blog/tag/cron.md)

- #SQL (1 articles)
  [View Tag](/llms/technical-blog/tag/sql.md)

- #DevOps (1 articles)
  [View Tag](/llms/technical-blog/tag/dev-ops.md)

- #Full-Stack Development (1 articles)
  [View Tag](/llms/technical-blog/tag/full-stack-development.md)

- #Server (1 articles)
  [View Tag](/llms/technical-blog/tag/server.md)

- #Passwords (1 articles)
  [View Tag](/llms/technical-blog/tag/passwords.md)

- #Hashing (1 articles)
  [View Tag](/llms/technical-blog/tag/hashing.md)

- #Bcrypt Algorithm (1 articles)
  [View Tag](/llms/technical-blog/tag/bcrypt-algorithm.md)

- #CRON jobs (1 articles)
  [View Tag](/llms/technical-blog/tag/cron-jobs.md)

- #Argon2ID Algorithm (1 articles)
  [View Tag](/llms/technical-blog/tag/argon2-id-algorithm.md)

- #Adonisjs Framework (1 articles)
  [View Tag](/llms/technical-blog/tag/adonisjs-framework.md)

- #Password Hashing (1 articles)
  [View Tag](/llms/technical-blog/tag/password-hashing.md)

- #MySQL (1 articles)
  [View Tag](/llms/technical-blog/tag/mysql.md)

*This document was generated from the live Technical Blog index on https://ndianabasi.com/technical-blog • 2026-06-07*