Agenda App

Vue app to manage Agenda

Getting Started

Agenda App is an open-source PWA to manage Agenda or Activity for Sinjai Regency, but because I decide this app to be open-source, so feel free to use and change the code as you need.

Brief

Agenda App is build with Firebase Firestore, Storage and Auth. Also with another great plugin such as Vuefire, Vuetify, and other helpfull plugin.

Installing

To start installing the project, run npm command install.

npm install

Add Vuetify and other plugin.

vue add vuetify pwa babel

Install dependencies and plugin.

npm install vuefire firebase moment hooper vue-marquee-text-component

Firebase Setup

Create a new project on Firebase. Then add the config code setup on “src/plugins/firebase.js” path.
Inside the config field.

Example:

const congfig = {
  apiKey: "yourapikey123",
  authDomain: "yourauthdomain.firebaseapp.com",
  databaseURL: "https://databaseurl.firebaseio.com",
  projectId: "your-project-id",
  storageBucket: "your-storage.appspot.com"
}

If you want to use RTB instead of Firestore, make sure to replace the import statement and change the export variable.

Example:

From:

import "firebase/firestore"
export const db = app.firestore();

import "firebase/database"
export const db = app.database();

Then you are ready to ROCK!!!

Plugin Setup On main.js

Inside the main.js file, there is a few plugin that we have to import so the plugin could be use in the app such as the vueMq plugin to setting the media query for the app, but unfortenally the media query that I set is just for mobile and desktop display, to change it you only need to add a new breakpoint inside the ;”breakpoints” field.

Example:

Vue.use(vueMq, {
  breakpoints: {
    mobile: 600,
    tablet: 780, //tablet display
    laptop: 1200, //laptop display 
    desktop; Infinity
  }
})

After change or add your own media query configuration, please note that you need add your own style for your recent mq configuration.

Agenda App

Getting Started

Brief

Installing

Firebase Setup

Plugin Setup On main.js

Plugin and Dependencies

Author

Say Hi!