Angular Landing Page

Demo here: https://ninjacodegen.github.io/angular-landing-page/

This is an Angular Landing Page that the NinjaCodeGen team entered in the Angular Attack 2017 hackathon competition.

Geeky Angular Ninja Coders @ Angular Attack — NinjaCodeGen

Hey fellow coders!

This is a walk-through of our entry for Angular Attack 2017: NinjaCodeGen Angular Landing Page. We are blown away at what we were able to accomplish and learn in 48 hours! Prepare to be amazed!

(NinjaCodeGen Angular Landing Page was our entry at Angular Attack 2017!)

Walk-through 4 Steps.

1.BASICS,

2.BUILD-UP,

3.MAIN ATTRACTION

4.WRAP-UP

1. BASICS

— After click launch on the entry page, the logo goes to our website. “Blog” goes to this blog. “Try the Beta”/”Try our beta” goes to our beta. The social media icons at the top and bottom of the page go to our facebook and twitter pages. Click the section menu links to scroll (with easing functions) to that section.

2. BUILD-UP

— In the Gallery section, click on any of the “See sample site” links to visit any of the 4 show-case apps (Material Design, Bootstrap 4, Ionic, Kendo UI) we generated with NinjaCodeGen in under 2 minutes. The Features section has content from the deployed app, but also gets data from our Firebase cloud database.

3. MAIN ATTRACTION

— For the Features Voting section, you can rank feature requests and add new ones. Data is updated real-time so it’s nice to watch it update in multiple browsers or when someone else updates it. The Angular animations is also fun to watch. If you sign in to GitHub, you can manage your own personal feature requests and rankings. Also, when you log in, the chat window will appear. As you may have guessed, Firebase was also used to manage the cloud data, real-time syncing and authentication (OAuth providers).

4. WRAP-UP

— The Newsletter section also saves your email to Firebase. It is pre-populated with your email when you login to GitHub. We did not forget, there is also a logout button. ;)

Believe it or not, before this competition, we had zero experience with FireBase, AngularFire2, and @angular/animations!

Please visit our entry, favorite it, give us **feedback **on feature requests, and sign up for the newsletter! http://www.angularattack.com/entries/271-ninjacodegen

#MCFA! Make Coding Fun Again!

Let’s go play with some code!

Built with:

• NinjaCodeGen beta — http://ninjacodegen.com
• Angular 4+ — https://github.com/angular/angular
• Angular-cli — https://github.com/angular/angular-cli
• AngularFire2 — https://github.com/angular/angularfire2
• Angular Material Design — https://github.com/angular/material2
• Angular Animations @angular/animations
• Kendo UI trial — www.telerik.com/kendo-angular-ui/
• Ionic — https://github.com/driftyco/ionic/
• Bootstrap 4 — https://github.com/twbs/bootstrap
• Angular Class Webpack — https://github.com/AngularClass/angular2-webpack-starter
• Visual Studio Code — https://github.com/Microsoft/vscode
• Protractor/Karma/Jasmine
• Yarn — https://github.com/yarnpkg/yarn
• Azure — https://azure.microsoft.com
• Firebase — https://firebase.google.com/
• GitHub — https://github.com/
• ng2-page-scroll — https://github.com/Nolanus/ng2-page-scroll
• https://github.com/hamzaOp/Angular2-startbootstrap-new-age
• https://github.com/akveo/ng2-admin
• https://github.com/swimlane/ngx-datatable
• TypeScript (generics, interfaces, inheritance, …)
• paint.net, Inkscape, Gifsicle
• angular-cli-ghpages - https://github.com/angular-buch/angular-cli-ghpages
• Chrome Extension: Convert Medium Posts to Markdown

https://www.youtube.com/watch?v=oItyreaBOpk

• Firebase
• JavaScript
• Angularjs
• Angular2
• Web Development

Chau Nguyen

Founder of NinjaCodeGen (Angular code generator), .NET Architects, Inc., iloveuGIFTS, MakeWorkFun! CTO of Creative Engineering.

NinjaCodeGen

NinjaCodeGen, Angular code generator by Angular and .NET Architects.