Beautiful Angular landing page with firebase, chat, poll, dynamic features/gallary, and nice animations/scrolling.
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
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.