Vue app to manage Agenda

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.

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

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 

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();

To

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

Then you are ready to ROCK!!!

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.

You can easily look the vue-mq documentation for more configuration.

• Vue
• Firebase
• Hooper
• Momentjs
• Vuefire
• Vue-Mq
• vue-marquee-text
• Vuetify

ArkjuniorK - College Student and Front End Developer

• Dribbble
• GitHub