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.
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.
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.
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.
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.
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.
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.
Deleting a Contact with AdonisJS and Vuejs
In this lesson, you will learn how to implement a button for handling deletion of a contact.
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.
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.
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.