cardbase-io / core-app Goto Github PK

• css parts but mostly test in screens and understanding material components in different screens

• authz/user.model
• additionally, (verify, verification, signin, login)

.idea folders

• master can be seen.
  • if user clicks, route to / again
• [x ]detail pages are for authorized users only!
  • if directly try to access, route to / again.

use ng generate guard components/authz/authentication.guard, then update app-routing.module.ts for related parts

google page score for

• mobile 82-84
• desktop 97

after prod. configs completed, this should be done !

below results are v1.0.0-M1 results

• code data model if verification requires
• static coded w/ dummy data

• create model/detail entities if not created yet

• implement dummy data w/ realistic data model

• update components/detail/ pages

• after google-signin (if we get phoneNumber later), route to /
• after phone-signin, route to /authz/verify

it is under app/material/material.module.ts.
but is it much better as app/app-material.module.ts. this is main modules like app/app-router.module file.

• define related entities in firebase db
• implement w/ dummy data and real data model
• replace static coded data w/ data from firebase

possible search queries

master

• search in master records (any field)
• search in latitude and longitude based (near records of user x,y coordinates)
• master has detail records
• filter master records which has xyz tag in detail records

detail

• detail.component: search in detail records (any field)
• detail.component: search regarding to 1st day, 2nd day, 3rd day (additional fields)

user

• access user by uid and related details

• authz/signin
• authz/login
• authz/register
• master (index)
• detail
• authz/verification

eligibility is specific for the listening-app.

related issues

• pages
• datamodel

• change manually angular.json

"schematics": {
"@schematics/angular:component": {
"styleext": "scss"
}
}

• login w/ google
• logout
• continue as XXX
• auto register user data in firestore for additional data
• update routes and ban unauthenticated users to access some pages

• put a logic, to control openBottomSheet() fn.
  • onFirstLoad, show
  • if users backs from another page, don't show

• only basics to feel more web-app in browser.

• ng add @angular/pwa --project core-app does the most of the job.

• not implemented service workers.

• not implemented appshell for better rendering

• create model/master model/detail entities
• implement dummy data w/ realistic data model

under the environments/ folder, firebase keys are open and accessible.
it shouldn't be

• consider, injecting these values in ci/cd pipelines ?
• consider below as ci/cd pipeline options
  • github actions-beta
  • google build
  • circleci

-use role="section" kind of semantic web things in .html files.

this is critical for assistive technologies and user agents (bots)

• esp. for master and detail pages

• update user.model.ts file for missing fields such as lat,lang etc.

there r 2 records.

1. in firebase firestore db
2. in firebase authentication

and 1st one has many fields than 2nd one.

2nd provides some fields (emailVerified etc..), and we should store in 1st one, also.

Increase PWA score

• implement service workers.
• implement appshell for better rendering
  • in browser, loading logo (w/ appshell ?)
  • after addtohomescreen, loading logo in chrome
  • after addtohomescreen, loading logo in safari
• manual PWA checks

• app-routing.module
  'index' routes to 'MasterComponent'.
  but when the url ' ' refreshed (onLoad pages comes w/ this), it routes to '/index'

on production this creates a 404 error.

in server side, angular routes to pagenotfound component but, it has to be 404.html in firebase part.

it caches, so when user refreshes , see the proper 404.html page.

default behaviour is, not show google account selection, if user signin before!

• change this w/ provider.setCustomParameters({'prompt' : 'select_account'});

• hotjar
• ..

• basic level data model esp. for Master & Detail pages
• other pages (verify, verification, signin, login, register)

• firebase init
• changes in environments/environment.prod file (dev and test is same )
• ng build --prod
• firebase deploy
• google consent approval (mandatory for signin w/ google)

mandatory for auth. implementation

• authz/eligibility pages components

• mostly use router-outlet, routerLink in html files.
• try not to use this.router.navigate(['/'] in .ts file, if possible.

• angular firebase additions should be created.
• open accounts and configs. in firebase, google analytics

• login w/ google

  • auto set true all consents, then show them in accounting page
  • redirect to getting consent page
  • later, get consent from user (worst one)

• login w/ phone

  • verify/verification path already shows consents.

Basic SEO imp.

• meta tags
• alt tags for images

app architecture must be prepared w/ google slides using google official architecture

• terminology
• core-app
• extended-app

• library
• account
• search
• menu
  • when user click hamburger menu, on the top bar, it opens up.
  • think of move signout link to here also.

• understand materialized css and apply better for responsive and mobile designs

• 404 (not found)
  • angular part page-not-found component.
  • firebase 404.html.
• 500 (unexpected)
• 403 (forbidden)
• 401 (unauthorized)
• connection failures
• custom error pages
• terms
• privacy

• get user location
• then search poi based search to filter near

1. should this be a core-app capability ? or we should just use a search based capability instead of default location based filtering?
2. or how can we extend core-app for such kind of things considering the updates later ?

• w/ tag manager inject into html files
• adjust ga capabilities (scrolling etc.)
• firebase-ga impl.
• check reporting, funnels, urls etc..

• impl. login w/ phone
• logout
• auto register user data in firestore for additional data
• update routes and ban unauthenticated users

below is necessary if user goes w/ login w/ phone.

• impl. authz/register pages components
• store it in firestore.

otherwise we are eliminating registration steps (instead automatically create register data comes from google signin)

• no need for separate components.
• update prototype also

separating Detail.ts and Master.ts under model/ folder is not good. angular doue not use MVC pattern, and also MVVM is not appropriate for project folder hierarchy !

so it is best to utilize model files, where the upper-related components!

• basic page animations while routes