national-team-generator

• Website URL: https://national-team-generator.web.app/
• See the Wiki for more info
• Check out my spreadsheet for testing

Tech Stack

• Angular
  • Angular-Material
  • Angular-Material-CDK
• Firebase
• Express
• Nodejs

Setup (needs to be updated)

Initiate NodeJS environment and install node modules

npm install

Create or edit the environments folder in src/

Firebase information can be found in your firebase console.

`environment.prod.ts` file

export const environment = {
  production: true,
  firebase: {
    apiKey: "API_KEY",
    authDomain: "national-team-generator.firebaseapp.com",
    projectId: "national-team-generator",
    storageBucket: "national-team-generator.appspot.com",
    messagingSenderId: "30261669176",
    appId: "APP_ID",
    measurementId: "G-QV0DJSQSL2"
  }
};

`environment.ts` file

// This file can be replaced during build by using the `fileReplacements` array.
// `ng build` replaces `environment.ts` with `environment.prod.ts`.
// The list of file replacements can be found in `angular.json`.

export const environment = {
  production: false,
  firebase: {
    apiKey: "API_KEY",
    authDomain: "national-team-generator.firebaseapp.com",
    projectId: "national-team-generator",
    storageBucket: "national-team-generator.appspot.com",
    messagingSenderId: "30261669176",
    appId: "APP_ID",
    measurementId: "G-QV0DJSQSL2"
  }
};

/*
 * For easier debugging in development mode, you can import the following file
 * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
 *
 * This import should be commented out in production mode because it will have a negative impact
 * on performance if an error is thrown.
 */
// import 'zone.js/plugins/zone-error';  // Included with Angular CLI.

Build/Deploy the app

Delete anything in the dist/ directory (especially the index.html) and build the app with:

ng build

Change the public property in firebase.json.

"public": "dist/team-gen",

Then deploy to the website with firebase in the terminal.

firebase deploy

CSS Styling Guide

We use BEM methodology for all SCSS files. Please refer to this reference site for help. For this project, we have some specific rules to follow over the BEM standards.

• Blocks can be contained within other blocks.
• Blocks can be modified just like elements using a class like: block--modifier.
• The class name of elements within elements should be added on. element__element__element.
• Global styles should only be implemented in styles.scss.
• Don't add class names to ng-container, ng-template and other specialized html tags unless necessary.

Project Structure

Core

The Core Module is where we want to put our shared singleton services. So the services that we want only one instance of while having them shared among multiple modules should live here.

The Angular injector creates a new instance of a service for each lazily loaded module it is provided.

Another piece of our application that should live in the Core Modules is app-level components. A good example of an app-level component would be the navigation bar. Only the app needs to know about our navigation component.

We do not want to put, are components used throughout the application inside of the Core Module. We have the Shared Module for that and we will look at that now.

Models

Pages

Shared

The Shared Module is where we want everything to live that is shared throughout the application. Components, directives, guards, & pipes can all live in the Shared Module.

It is also common to import and export Angular built modules inside your Shared Module if you need to access them in multiple locations. Because Shared is imported into many of your Feature Modules, it's common to import/export Common Module or Angular Material modules. Import/Export the modules once in Shared Module and now anyone that imports Shared will have access to them.