Part 2 — Search By Ingredient Tab

Image for post
Image for post
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.

Image for post
Image for post
Search By Ingredient Demo

Tab Icon and Name

The first thing we’ll do is change the tab icon and name. To do so head over to src/views/Tabs.vue. Replace the ellipse icon in the import with the pint icon, return it in the setup method and then replace it in the template along with changing the tab name. …


Part 1 — App Setup and Random Cocktail Tab

Image for post
Image for post
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 Flutter). …


Part 5 — Matches & App Polish

Image for post
Image for post
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:

import { firestoreAction } from "vuexfire";
import { db } from "../../main"; …

Part 4— Movies

Image for post
Image for post
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 https://www.themoviedb.org/ 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.

Discover API Endpoint

This specific endpoint we’ll be using to display movies is the discover endpoint. This will allow us to show random movies to our users in a predictable manner. So, head over to the documentation for this endpoint to familiarize yourself. There you will find a developer-friendly interface to create the exact endpoint. …


Part 3 — Partners

Image for post
Image for post
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 allow the user to add them as a partner. To keep this simple, we won’t make a verification system from the user being added. But, that would be a very good feature to stop users from adding others without their permission. …


Part 2 — Authentication

Image for post
Image for post
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 firebase.google.com, 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.

Image for post
Image for post
Firebase Email/Password Authentication

Adding Firebase Authentication to Vue

Now that we’ve set up enabled email/password authentication in Firebase, we can set up our authentication pages in Vue. To implement this in our project, we’ll need two new views. …


Part 1 — App Setup

Image for post
Image for post
Image by Free-Photos from Pixabay

The other day I was on Twitter and saw a funny tweet about how there should be an app like Tinder but for movies. Instead of a hookup app, this would be for couples who have a difficult time agreeing on what movies to watch. Each would swipe left or right depending on how they felt about watching the movie. Then they can go through the matches and find an agreeable movie.

I think that this is a fantastic idea and something I can totally relate to. So, in this series, we’re going to be building it using VueJs, Vuetify, VueFire, and Firebase. As it will be a web app, instead of swiping, we’ll have thumbs up and down buttons. …


Image for post
Image for post
Image by OpenClipart-Vectors from Pixabay

Datatables are one of the most popular choices when displaying data inside of an application. They are familiar to users and easy for developers to work with. Unfortunately, they can take quite a bit of time if you want to code all the functionality out yourself.

Luckily, there are some great packages that give you a ton of functionality right out of the box. In this article, we’re going to look at some of the most popular datatable packages for VueJS.

Video Tutorial

Vue Data Table Video Tutorial

BootstrapVue Datatable

BootstrapVue is a VueJS component package that is built on top of the extremely popular Bootstrap Framework. It offers a ton of pre-made components that you can use inside of your project. …


Image for post
Image for post
Image by Mohamed Hassan from Pixabay

A few months ago, I published an article (and video) covering how to build a REST API using Firebase Functions. Since then, I’ve gotten a lot of questions on how to implement more features such as authentication and data validation. In my last article, I covered authentication and in this article, we’re going to be talking about data validation.

When creating a REST API, authentication and data validation are critical to maintaining the integrity of your data. Authentication prohibits malicious people 😠 from sniffing API endpoints and manipulating or accessing data. …


In one of my previous articles, I discussed how you can create a REST API using Firebase Functions. Since then, I have been asked how to authenticate requests and validate data on my YouTube channel. So, in this tutorial, we’re going to be looking at authentication for Firebase Functions. In my next article, I’ll cover data validation.

Since this tutorial is going to build on a previous one, we’ll be using the code from it. If you’d like to follow along you can find it in this BitBucket Repo. So, clone the project and we’ll get right into it.

Firebase Setup

In order to publish our functions, add users to our database, and use authentication, we’re going to have to set up a Firebase project. So, head over to https://firebase.google.com/ create an account and then click “Go to console”. Next, click on the “Add project” button and name it whatever you’d like. Click through the other options choosing the defaults. …

About

Diligent Dev

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

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