Part 3 — Displaying Photos and Map

In part 2, we covered how to tap into native device features such as the camera and GPS. In this part, we’re going to look at how to display those photos. We’ll also look at how we can display a map with pins of where we’ve taken photos.


The first thing we’re going to do is change the tab icons and names. For tab 2, we’ll display an image icon and name the tab “images”. For tab 3, we’ll name it “Map” and display a map icon. To do this, head over to src/views/Tabs.vue.

At the top of the script…

Part 2 — Camera and Saving Photos

Image by Free-Photos from Pixabay

In part 1, we went over how to set up an Ionic Framework mobile App with VueJs. We also configured our Firebase features including authentication, Firestore, and storage. In this article, we’re going to cover how to tap into native device features like the camera and GPS.



To add native features to our app, we’ll be using Capacitor. To enable capacitor in our application, open a terminal in the root of the app, and run the following command:

ionic integrations enable capacitor


Then we need to initialize Capacitor in our application. To do so, you’ll need to name your app…

Part 1 — App Setup and Authentication

Image by Pexels from Pixabay

In my last series, we built out a cocktail recipe app using the Ionic Framework and VueJs. While this was a good introduction to what you can do with Ionic, it did not cover any native features. In this series, we’ll be taking a deeper dive and accessing features such as the camera and GPS. To persist the data in our app and provide authentication, we’ll be utilizing Firebase.

Ionic App Setup

To create the Ionic app, you’ll need to have the Ionic CLI installed. To install it, you’ll need to have NodeJS installed. …

Part 3 — Drink Search

Image by Pexels from Pixabay

In part 1 of this series, we set up the app and implemented the random cocktail tab. In part 2, we set up our search by ingredient tab and pages. In this tutorial, we’re going to be implementing a free form search tab so users can search for drinks by name.

Part 2 — Search By Ingredient Tab

Image by Free-Photos from Pixabay

In part 1, we set up our app and completed our first tab which loads a random cocktail when the app is loaded. Now we’re going to work on our search by ingredient functionality. When a user clicks on the search by ingredient tab, we’ll load a list of ingredients. When they click on an ingredient, we’ll display a list of drinks that contain that ingredient. And, finally, if they click on a drink, we’ll display that drink's details.

Part 1 — App Setup and Random Cocktail Tab

Image by bridgesward from Pixabay

A few weeks ago, the team at Ionic announced that they had completed their integration with VueJs. If you’re not familiar with Ionic, it's a framework that allows you to write mobile applications with your favorite Javascript framework/library (Angular, React, or Vue). Now it's not a native mobile application, but it does allow you to access native features like GPS, camera, contacts, etc.

Ionic does all this by wrapping your app in a web view. While it provides many benefits to writing cross platforms app quickly, it is not as performant as native or other cross-platform alternatives (React Native and…

Part 5 — Matches & App Polish

Image by David Mark from Pixabay

In part 4 we got movies flowing into our application and allowed the user to thumb them up or down. We also checked to see if their partner had any matches on the movies they thumbed up. The last thing we need to do is display those matches on another page and polish up the app a bit.

Matches and Vuexfire

To display the matches we’re going to be using VuexFire. This will give us real-time functionality on our matches page without having to write extra code. To do this, head to src/store/modules/user.js. At the top of the file, add the following imports:

Part 4— Movies

Image by stokpic from Pixabay

In part 3, we worked on adding partners. Now, let’s focus on displaying and voting for movies. To do this, we’ll be using The Movie Database. This API is completely free to use as long as you properly attribute the data source.

To get an API key head over to and create an account. Then click on your account in the upper right-hand corner. Next, click on Settings in the dropdown and choose the API option on the left. You’ll then have to apply for an API key, which is instant.

This specific endpoint we’ll be using to display…

Part 3 — Partners

Image by Devon Breen from Pixabay

In part 2, we wired up authentication in our Movie Night Picker. Now we can start to focus on the core logic. The first thing we’ll do is work on adding a partner. After we finish that we’ll start on the display and voting of movies.

Adding a Partner

In order to make matches in our system, we’ll need to link partners. For now, we’ll allow users to select one partner. Feel free to expand to multiple partners in case you wanted to use this for friends.

To add partners, we’ll search on email in the system. When we find a match, we’ll…

Part 2 — Authentication

Image by Igor Ovsyannykov from Pixabay

In part 1, we set up our project to include everything we’re going to need for development. Now, we can actually start coding the application. The first thing that we’re going to need is authentication. We’ll be using Firebase Authentication to authenticate our users.

Firebase Authentication Setup

To set up Firebase Authentication, head over to, select the project you set up in part one, and click on Authentication in the left-hand menu. Then, click on the Sign-in method tab, select Email/Password, and enable it.

Diligent Dev

Full-stack developer developer for 7+ years with a passion for learning new things and sharing. For more, check out

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store