Building a simple event booking app with Vue and Flutterwave payment gateway.
Published: 2022-05-19 20:53:22

---
title: Building a simple event booking app with Vue and Flutterwave payment gateway.
published: true
description: 
tags: 
//cover_image: https://direct_url_to_image.jpg
---


## Introduction

In this blog post, we will learn how to use vue js to create a simple event booking application and also integrate Flutterwave as the payment gateway. In this application, a user will be able to register, log in and also reset password in case if a user forgot his password.  Vue.js is an open-source model–view–viewmodel front end JavaScript framework for building user interfaces and single-page applications. 

## Prerequisite

- Node installed in your local machine
- Basic knowledge of JavaScript and Vue
- Install Vue CLI on your local machine
- create an account on Flutterwave

## Install and setup Vue

Let's setup our environment so we can get up and running with our event application


    `npm install -g vue-cli`

To create a new vue project we can use the command below to start our own event project 


    `vue create event-booking-app`

You will be asked to select some options while creating your project. You can either go by the default setting or select the option manually. 


    `cd event-booking-app`

Navigate to the project directory
Finally serve the vue js development server with


    `npm run serve`

Setting up Axios


    import Vue from "vue";
    import App from "./App.vue";
    import router from "./router";
    import store from "./store";
    import "../src/assets/css/style.css";
    import axios from "axios";
    
    axios.defaults.baseURL = "<endpoint>";
    
    Vue.use(require("vue-moment"));
    Vue.config.productionTip = false;
    
    new Vue({
      router,
      store,
      render: (h) => h(App),
    }).$mount("#app");
    


## Fetching events from the API


    <script>
    export default {
      name: "index",
      data() {
        return {
          events: [],
        };
      },
      mounted() {
        this.fetchEvents();
      },
      methods: {
        fetchEvents() {
          axios
            .get(
              "https://app.ticketmaster.com/discovery/v2/events?apikey=j3NtHIoBfApjHU0wjFnjENfU3VNu9K3i&keyword=Tech&locale=en&size=50&countryCode=US"
            )
            .then((res) => {
              this.events = res.data._embedded.events;
              console.log(res.data._embedded);
            })
            .catch((error) => {
              console.log(error);
            });
        },
    </script>


## Implementing search 

In our project, we have been able to fetch events from the API but we need to search through the events for easy accessibility. Create a computed property and include the code snippet below


      computed: {
        resultQuery() {
          // console.log(this.searchEvent);
          if (this.searchEvent) {
            const filtered = this.events.filter((item) =>
              item.name.toLowerCase().includes(this.searchEvent)
            );
            return filtered;
          } else {
            return this.events;
          }
        },
      },


## Authentication

Adding authentication will enable users to sign up and login into the event booking application.

## Sign In Component

    <template>
      <div class="login__container">
        <div class="input__form__row">
          <label>Email address</label>
          <input type="email" placeholder="user@email.com" v-model="user.email" />
        </div>
        <div class="input__form__row">
          <label>Password</label>
          <input
            type="password"
            placeholder="Enter Password"
            v-model="user.password"
          />
        </div>
        <div class="input__form__row">
          <p class="forgot__password">Forgot your password?</p>
        </div>
        <div class="input__form__row">
          <button class="login__button" @click="signin()">Login</button>
          <div class="login__alternative">
            <p>Don't have an account? <span >Sign Up</span></p>
          </div>
        </div>
      </div>
    </template>


    export default {
      data() {
        return {
          user: {
            email: "",
            password: "",
          },
        };
      },
    };


      methods: {
        signin() {
          this.$store
            .dispatch(`signin`, {
              email: this.user.email,
              password: this.user.password,
            })
            .then(() => {
              this.$router.push({ name: "index" });
            })
            .catch((error) => {
              console.log(error.response.data.error);
              // this.error = error.response.data;
            });
        },
      },


## Sign Up Component 


    <template>
      <div class="signup__container">
        <div class="input__form__row">
          <label>First name</label>
          <input type="email" placeholder="first name" v-model="user.f_name" />
        </div>
        <div class="input__form__row">
          <label>Last name</label>
          <input type="email" placeholder="last name" v-model="user.l_name" />
        </div>
        <div class="input__form__row">
          <label>Email address</label>
          <input type="email" placeholder="user@email.com" v-model="user.email" />
        </div>
        <div class="input__form__row">
          <label>Phone number</label>
          <input
            type="tel"
            placeholder="(xxx)-(xxx)-(xxx)-(xxx)"
            v-model="user.phone"
          />
        </div>
        <div class="input__form__row">
          <label>Country</label>
          <input type="number" placeholder="Nigeria" v-model="user.country" />
        </div>
        <div class="input__form__row">
          <label>Password</label>
          <input
            type="password"
            placeholder="Enter Password"
            v-model="user.password"
          />
        </div>
        <div class="input__form__row">
          <button class="signup__button" @click.prevent="signup()">
            Create Account
          </button>
          <div class="login__alternative">
            <p>
              Don't have an account?
              <span @click="$router.push('/login')">Login</span>
            </p>
          </div>
        </div>
      </div>
    </template>


    export default {
      data() {
        return {
          user: {
            f_name: null,
            l_name: null,
            email: null,
            phone: null,
            country: null,
            password: null,
          },
        };
      },
    };



      methods: {
        signup() {
          this.$store
            .dispatch(`signup`, {
              f_name: this.user.f_name,
              l_name: this.user.l_name,
              email: this.user.email,
              phone: this.user.phone,
              country: this.user.country,
              password: this.user.password,
            })
            .then(() => {
              this.$router.push({ name: "login" });
            });
        },
      },
    


## Implementing Vuex


## Conclusion

We have been able to create a simple event booking application with help of vue and Flutterwave