Skip to content
SPA for Mirrorman Videos
Vue JavaScript HTML CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
.editorconfig
.eslintignore
.eslintrc.js
.gitignore
.postcssrc.js
.stylintrc
README.md
app-icon.png
app-splashscreen.png
babel.config.js
firebase.json
package-lock.json
package.json
quasar.conf.js
quasar.extensions.json

README.md

Mirrorman

Mirrorman Videos - an SPA for a video production company.

Although done during my bootcamp, this a real project for an existing company. It is still WIP, however the main functionality and design are already there.

Deployed to Firebase URL.

Front-end is built with Quasar framework (a VueJS derivative). Back-end is powered by Firebase services.

Why this

TLDR: Being ahead of schedule of my full stack bootcamp, I found a client that needed a website for their small business. There were three main objectives:

  • Design had to be simple yet attractive and show some creativity
  • Solution had to be cost effective to maintain in the long-run with possibilities to scale
  • Website had to support client-side content management and only require a developer being involved for functionality and styling changes

Solution

A simple SPA with minimalistic pages and a limited colour pallete were chosen as a general design solution.

To minimize the costs, for both deployment and maintenance, Firebase was chosen as a backend provider. Project does not require a "computing" backend, but rather an authorization, database, and minimal storage capacity, while at the same time allowing for future scaling at a minimal cost.

To further minimize costs, it was decided to use youtube as a hosting provider for heavy media content. This feature is yet to be implemented (see roadmap below).

Having 3rd party maintained back-end, the only long-term support issue that had to be resolved was the content management system. The website was built from scratch so it was decided to build a custom CMS with only the functionality that was needed. This allowed to both scale down on potential maintenance efforts, entry level barrier to start using such CMS, and the codebase size itself.

While researching for a responsive material design library for Vue, I stumbled upon Quasar framework, which is essentially based on VueJS, but with a lot of design (and not only) things build-in.

Known issues and roadmap

Despite being a part of my bootcamp, this project will eventually go live and be used by client. There is certain core functionality yet to be implemented as well as some code refactoring to be done.

FIX: some errors are logged to a console at different pages, related to Vue not being able to process videos, while they're being fetched

FIX: change styling of Error404.vue to match the rest of the app

FIX: setup authorization methods from Google login to custom e-mail + password combo

FIX: setup security in the Firebase to only allow certain users to login and change the content

FEAT: add minimal front-end checks for the content being submitted to the back-end. Although no malicious behaviour is expected due to authentication, still has to be done

FEAT: create user group with different access privileges

FEAT: add video preview and thumbnail upload to the CMS (C of CRUD)

FEAT: add content deletion functionality to the CMS (D of CRUD)

FEAT: add a plugin to fetch youtube (and vimeo) link to an actual media file base on the provided link to the media page on the respective service

FEAT: rewrite "clients" page (design still to be confirmed by the client)

FEAT: updated contents on the "about" page (contents and layout are still to be confirmed by the client)

Installing

Dependencies

npm install

Start the app in development mode (hot-code reloading, error reporting, etc.)

quasar dev

Lint the files

npm run lint

Build the app for production

quasar build

Customize the configuration

See Configuring quasar.conf.js.

You can’t perform that action at this time.