GUI project - Pillow

Live demo

https://pillow-c3b4c.web.app/

Running the project

npm i
ng serve

Make sure to enter your firebase config in src/environments files:

export const environment = {
    production: false,
    firebaseConfig: {
        apiKey: "",
        authDomain: "",
        projectId: "",
        storageBucket: "",
        messagingSenderId: "",
        appId: ""
    }
};

Deploying the app

The app was built with:

ng build --configuration production --aot

and deployed using:

firebase deploy

What is Pillow?

Pillow is a project for my subject GUI development.
Pillow is heavily inspired by Blanket. Pillow sets out to be web driven and allow for more customizability in terms of custom sounds and presets.
Presets and filters easy to use and access.

Main screen interface of Pillow

Responsive variation of the main interface

Edit categories

Requirements

We were allowed to continue working on our project but have to fulfil the following requirements: Angular:

• 2 feature modules
• Authentication module
  • Service
  • Log in, out and register
  • Registration form is reactive
    • Asynchronous validator
    • Clear messages and visual hints when not filled in correctly
  • use firebase sdk for auth
  • No email verification!*
• Lazy loaded module
• Data/backed service
• Routes
  • 3 different routes
  • 1 child route
  • catch incorrect routes
• Routing guards
  • 2 canActivate
    • canLoad for Admin counts :)
  • 1 canDeactive
• Custom made directive
• 1 pipe to sort/filter
• 1 subject
• 3 access levels
  • Not logged in => restricted access (login/registration)
  • Logged in => use of app for normal user
  • Admin => more options
    • Add/edit sounds
    • Edit categories
• unit testing plan as complete as possible 1 component (negative and positive tests)
• out of testing plan write 3 pos and 2 neg unit tests for that component
• Deploy app via firebase

Firebase:

• Database access with fire base sdk
• Database rules for admin and user
• use email and pass auth firebase sdk
• storage for docs, figures ...
• hosting app on firebase

Doc:

• readme with firebase URL
• testing plan for component of choice
• test results
• full code without node modules

*For quick testing and fake accounts