Skip to content

22940dev/photo-lensnlight-firebase

Repository files navigation

Lens-n-Light

This is a web application.

  • People visiting here, view it as a Portfolio/Photography website.
  • Owner of this site can perform CRUD operations from Admin page and manage photos that appear on site.

Live View

  • View the production site at Lens-and-Light
  • To enter the Admin page you can login as Demo user using the following credentials [ Note: Demo user can't use CUD operations ]
    • Email: demouser@lnl.com
    • Password: password

Getting Started

Prerequisites

You need to install node and git locally. The project is based on ES2015+, vue, vuex, vue-router, vuetify and firebase. Understanding and learning this knowledge in advance will greatly help the use of this project.

This project uses firebase for backend.
To use this project, you must create a web-app project on firebase.

Installing

# clone the project
git clone https://github.com/AKAspanion/Lens-n-Light.git

# enter the project directory
cd Lens-n-Light

Before going into development, you need to configure .env file.

Go to the settings page of firebase project you created, and look for a config option under 'Firebase SDK snippet'.

// It should look something like this
const firebaseConfig = {
  apiKey: "XYZ...",
  authDomain: "...",
  databaseURL: "...",
  projectId: "...",
  storageBucket: "...",
  messagingSenderId: "...",
  appId: "...",
}; 

Populate the above values into the .env file without quotes.

VUE_APP_API_KEY=XYZ...
VUE_APP_AUTH_DOMAIN=...
VUE_APP_DATABASE_URL=...
VUE_APP_PROJECT_ID=...
VUE_APP_STORAGE_BUCKET=...
VUE_APP_MESSAGING_SENDER_ID=...
VUE_APP_APP_ID=...

Project is now pointing to your firebase.

Create authentication in firebase using email and password which can be used to login to admin page.

# install dependency
npm install

# develop
npm run serve

Project will launch at http://localhost:8080

Deployment

#compiles and minifies for production
npm run buid

The /dist directory is ready to be deployed

Built With

  • Vue.js - SPA JavaScript Framework
  • Vuetify - Frontend Components Framework
  • Firebase - Backend and Hosting

Author

Ankit Kumar Pandit