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.
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
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)
Start the app in development mode (hot-code reloading, error reporting, etc.)
Lint the files
npm run lint
Build the app for production