Summoners War Merger (hosted at GitHub Pages)

Goals

• Demonstrate full stack technical capabilities 💻
• Demonstrate rapid 🏁 prototyping
• Make useful tool for gaming
  • I am an avid SW player 🤓
  • A lot of my friends play SW 😎

Goal - Sharpen Angular 4.x skills

• Utilize TypeScript for the Angular application
  • ✅ All components are to be written in TypeScript, as the Angular team suggests (and Angular quick start generates)
  • ✅ Utilize properties and components properly
  • ✅ Utilize import / export and modular design (appropriately split classes, modules, components, css, and html)
  • ✅ Utilize dependency injection (e.g. inject data service / mock data service)
  • ✅ Add routing using Angular Router injection and route configuration
  • ✅ Use dynamic classes and class names in templates via Angular scoped methods
  • ⏳ Add hash navigation where applicable
• Maintain CSS Quality
  • ✅ No !important flags are to be used in the CSS
  • ✅ Only em or % units are to be used in the CSS
  • ✅ No repeated identifiers
  • ⏳ Add build step to automatically verify CSS formatting / quality (something like ESLint for CSS)
• Customize and enhance site from generated code
  • ✅ Add favicon to the site (uses default Angular favicon currently)  - ⏳ Add accurate favicon to admin site (after creating one)
  • ⏳ Add FB OpenGraph (and other social platforms) meta tags

Goal - Sharpen general JavaScript skills

• Utilize Babel
  • ✅ Practice setting up automatic code transpilation
• Utilize ESlint
  • ⛑ Safer code
  • 🙌 Nicely formatted
  • ❤️ Visual Studio Code has a beautiful integration for this already
• Utilize ES6+ where possible
  • ✅ const vs let
  • ✅ arrow functions (new context of this, more terse syntax)
  • ✅ Template literals
  • ✅ Tagged template literals (Mozilla’s MDN was very useful)

Goal - Sharpen general server engineering skills

• ✅ Explore new brotli encoding (and other image / video encodings)
• ✅ Practice NodeJS package management (package.json, npm, nodemon)
• ✅ Practice GitHub issue tracking and project management
• ✅ Basic CORS handling for Angular forms (not secure atm, however)
  • Helpful: John Zhang article
  • Good reference/refresher: HTML 5 Rocks
• ✅ Practice integrating multiple data sources
  • ✅ SummonersWar.co
  • ✅ SWFR (SW France) 🇫🇷

Technologies

• Angular 4.2.5
  • Angular Quickstart was the most useful here (no surprise there, 🤣)
  • Angular 2.0 Training Book was an incredible reference throughout and clearly explained concepts (like Module vs. Component)
• Babel transpiler
  • LOTS of help from this (babel example node server) repository (from the babel team itself)
  • es6-features.org was useful for reference on new features
  • pawelgrzybek.com helped a bit too
  • eventbrite has a surprisingly cogent article
  • exploringjs.com was beyond helpful
• Node v6.11.0
• NPM 3.10.10
• Visual Studio Code 1.13.1