A few weeks ago, in the course of seeking for a developer role, I completed a technical assessment test and the entirety of this article is based on the development process; I thought it would be great to write about how I completed it, so open up your favourite code editor and let’s build something awesome and learn a few tricks.

The technical assessment test asked that I built an app with the following features:

The app is an SPA.

The app has a working search bar.

The app autocompletes keywords with a drop down.

The app displays a list of results beneath the search bar as a user types in a search query.

The app gets results from records that will be entered in a separate page.

The app does nothing when any one of the displayed results is clicked on.

Before anything else, I pulled out my pen and tore out a piece of paper, drew a basic representation of the app and decided to make it into a Google search clone. The app could have been anything really, but it sounds much better to tell my friends that I just built a Google search clone, don't you think?

I decided to use Vue for the frontend and Flask for the backend, again, I could have used any other frameworks but these were the ones that came to my mind at that instant. Here is a demo of the final application:

The image above shows a Google search clone that searches through the saved content in a database and returns the article that best matches the search query. The drop-down underneath the search bar suggests article topics from the database as a search query is inserted.

Free Node eBook

Nice!

This is the first of the two sections that make up this article, here we write all the code that define the operations of the Flask backend server.

Creating the database handler file

In this application, we will save the entered article records to an SQLite database so we need to create a Python file that is able to create and interact with a database. In order to keep things modular and easy to debug, this file will only deal with database interactions and we will create another file to handle the API requests.

In the root directory of this project, create a new file and name it dbsetup.py, open the file and paste the following code:

In the code above, we have defined the database handler functions that will perform the following operations:

Next, we will import these handler functions into a new Python file and use them in resolving our API endpoints.

Defining the endpoints and attaching the matching handler functions

Let’s create a new file and call it app.py. This file will be the main entry point to the backend server. Here, we will import the database handler functions. Open the app.py file and paste the following code:

In the code snippet above, we imported Flask and other dependencies including the database handler functions that we defined in the dbsetup.py file. Then we invoked two of the database handlers; one to create a new database connection and the other to create the ‘articles’ table.

Next, we defined two endpoints:

This is all the code that we need to write for the creation of the backend API. We will start building the frontend of this project in the next section.

In this section, we will build the frontend of the application using the Vue cli tool, if you do not already have Vue cli installed on your machine, you can install it with this command:

sudonpminstall -g vue-cli

When the installation is completed, we will create a new Vue project with this command:

vue init webpack spa

Vue cli helps us scaffold templates, and we have choosen the ‘webpack’ template here. During the creation process of this project, you will be presented with a number of query prompts. You can hit the enter key for each one of them (including the installation of the Vue router) except 'ESLint’ and unit tests. We do not want to set up unit tests and ‘ESlint’ for this application so hit the ‘n’ key instead.

Let’s navigate into the Vue project directory and run the application with these commands:

The index.html file is the entry point to the frontend of this application so we only need to pull in these dependencies here and they will be available across the components.

Configuring the Vue router

Let’s configure the Vue router so that we will be able to switch between the pages in the application without causing a refresh/reload to the browser window. It is the possibility of this concept that describes the term — Single page application. Open the spa/src/main.js file and update it with the following code:

Updating the App component

Let’s update the root component and include the router outlet; this will ensure that whenever a link is clicked in the Vue application, a matching component is served without refreshing the browser window. Open the src/App.vue file and update it with the following code:

We will see that our application is currently a blank page with two links ‘HOME’ and ‘INSERT’:

The interesting fact about this blank page is that the browser window doesn’t refresh whenever any one of the two links is clicked. This means that the Vue router works and the application is currently an SPA. The interface is currently blank because we haven’t written any code in the Insert.vue and Searchbox.vue components. Let’s write some code in these components next.

Building the view for inserting articles into the database

Let’s write the code that will allow us to insert new article records into the database, open the src/components/Insert.vue file and update it with the following code:

In the script section of the code snippet above, we will write some code to invoke a hinter() function whenever there is a ‘key-up’ event on the search bar element. Here’s a list of things the hinter() function will do when invoked:

We can start the Vue dev server now and see what we have built so far:

npm start

Looks great! However our Vue frontend is not in sync with the Flask backend yet. We need to create an API proxy table so that the frontend and backend can communicate with eachother.

Creating an API proxy table

To communicate with the backend server from the Vue application, we need to create an API proxy table in the config/index.js file and start the Vue dev server and the backend server side-by-side. All requests to /api in our Vue frontend code will be proxied to the backend server.

We can test the application by starting the Vue dev server and the Flask backend server side-by-side. We can achieve this by having two terminals pointed to the appropraite directories, the first terminal should be pointed to the root of the project directory and sourced to the virtual environment as we discussed earlier. We can start the backend server with this command:

python app.py

The other terminal should be pointed to the spa sub-directory in the project directory, we can start the Vue dev server with this command:

npm start

The application will be available for testing on this address http://localhost:8080, here’s a display of how it should look and behave when visited:

It is not uncommon for technical assessment tests to be given during the developer recruitment process. In this article, we have looked at how I completed mine. In the course of the development, we created a CRUD backend server using Flask and developed the Google search clone SPA in Vue using the webpack template that was provided by the Vue cli tool. We also learned how to POST data to a backend server using the JavaScript Fetch API and the conventional XHR object.

I am hopeful that this article has been fun for you to follow along with, if you have any questions, please let me know in the comments.

Jobs!

Jordan Irabor is a software engineer with a true passion for Web Development, Technical Writing and Graphic Design. He is currently based in Nigeria and has written a lot of technical articles on several websites and blogs including Scotch and Stackshare. His development stack primarily comprises JavaScript, Python, Golang and PHP.

When he is not writing code, learning a new framework or drafting a technical article, Jordan is playing a lead guitar with his rock band and making new music for the ears that appreciate sonorous sounds.

He also does public speaking at tech meetups, and his theoretical knowledge from acquiring a BSc in Computer Science sometimes helps him in applying best practices while programming.