Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/NinjaCodeGen/angular-landing-page

Beautiful Angular landing page with firebase, chat, poll, dynamic features/gallary, and nice animations/scrolling.
https://github.com/NinjaCodeGen/angular-landing-page

angular angular-landing-page angular2 angular4 angular4-demo angular4-seed angular5 angularfire firebase typescript

Last synced: 2 days ago
JSON representation

Beautiful Angular landing page with firebase, chat, poll, dynamic features/gallary, and nice animations/scrolling.

Awesome Lists containing this project

README 

        
# Angular Landing Page



Demo here: [https://ninjacodegen.github.io/angular-landing-page/](https://ninjacodegen.github.io/angular-landing-page/)



This is an Angular Landing Page that the [NinjaCodeGen](http://ninjaCodeGen.com) team entered in the [Angular Attack

](http://angularattack.com/) 2017 hackathon competition.



# Geeky Angular Ninja Coders @ Angular Attack — NinjaCodeGen



Hey fellow coders!



This is a walk-through of our entry for [Angular Attack

](http://angularattack.com/)2017: [NinjaCodeGen Angular Landing

Page](http://www.angularattack.com/entries/271-ninjacodegen). We are blown away

at what we were able to accomplish and learn in 48 hours! Prepare to be amazed!



![](https://cdn-images-1.medium.com/max/1200/1*7hi5iXo3E5zSqsYRInsung.png)




(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](http://www.angularattack.com/entries/271-ninjacodegen), the **logo** goes

to our [website](http://ninjacodegen.com/). “**Blog**” goes to this

[blog](https://medium.com/ninjacodegen). “**Try the Beta**”/”**Try our beta**”

goes to our [beta](http://ncg-beta.azurewebsites.net/). The **social media

icons** at the top and bottom of the page go to our

[facebook](http://facebook.com/ninjaCodeGen) and

[twitter](http://twitter.com/ninjaCodeGen) pages. Click the section **menu

links** to scroll (with easing functions) to that section.



![](https://cdn-images-1.medium.com/max/1200/1*MsQ0XF4TwcdgPQS6hB-zrw.png)



# 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](https://github.com/angular/material2),

[Bootstrap](https://github.com/twbs/bootstrap) 4,

[Ionic](https://github.com/driftyco/ionic/), [Kendo

UI](http://www.telerik.com/kendo-angular-ui/)) we generated with

[NinjaCodeGen](http://ninjacodegen.com/) in under 2 minutes. The **Features**

section has content from the deployed app, but also gets data from our

[Firebase](https://firebase.google.com/) 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](http://www.angularattack.com/entries/271-ninjacodegen), **favorite** it,

give us **feedback **on feature requests, and **sign up** for the newsletter!

[http://www.angularattack.com/entries/271-ninjacodegen](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](http://ninjacodegen.com/)

* Angular 4+ —

[https://github.com/angular/angular](https://github.com/angular/angular)

* Angular-cli —

[https://github.com/angular/angular-cli](https://github.com/angular/angular-cli)

* AngularFire2 —

[https://github.com/angular/angularfire2](https://github.com/angular/angularfire2)

* Angular Material Design —

[https://github.com/angular/material2](https://github.com/angular/material2)

* Angular Animations @angular/animations

* Kendo UI trial —

[www.telerik.com/kendo-angular-ui/](http://www.telerik.com/kendo-angular-ui/)

* Ionic — [https://github.com/driftyco/ionic/](https://github.com/driftyco/ionic/)

* Bootstrap 4 —

[https://github.com/twbs/bootstrap](https://github.com/twbs/bootstrap)

* Angular Class Webpack —

[https://github.com/AngularClass/angular2-webpack-starter](https://github.com/AngularClass/angular2-webpack-starter)

* Visual Studio Code —

[https://github.com/Microsoft/vscode](https://github.com/Microsoft/vscode)

* Protractor/Karma/Jasmine

* Yarn — [https://github.com/yarnpkg/yarn](https://github.com/yarnpkg/yarn)

* Azure — [https://azure.microsoft.com](https://azure.microsoft.com/)

* Firebase — [https://firebase.google.com/](https://firebase.google.com/)

* GitHub — [https://github.com/](https://github.com/)

* ng2-page-scroll —

[https://github.com/Nolanus/ng2-page-scroll](https://github.com/Nolanus/ng2-page-scroll)

* [https://github.com/hamzaOp/Angular2-startbootstrap-new-age](https://github.com/hamzaOp/Angular2-startbootstrap-new-age)

* [https://github.com/akveo/ng2-admin](https://github.com/akveo/ng2-admin)

* [https://github.com/swimlane/ngx-datatable](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](https://github.com/angular-buch/angular-cli-ghpages)

* Chrome Extension: [Convert Medium Posts to Markdown](https://chrome.google.com/webstore/detail/convert-medium-posts-to-m/aelnflnmpbjgipamcogpdoppjbebnjea)



[https://www.youtube.com/watch?v=oItyreaBOpk](https://www.youtube.com/watch?v=oItyreaBOpk)



* [Firebase](https://medium.com/tag/firebase?source=post)

* [JavaScript](https://medium.com/tag/javascript?source=post)

* [Angularjs](https://medium.com/tag/angularjs?source=post)

* [Angular2](https://medium.com/tag/angular2?source=post)

* [Web Development](https://medium.com/tag/web-development?source=post)



### [Chau Nguyen](https://medium.com/@chauey)



Founder of NinjaCodeGen (Angular code generator), .NET Architects, Inc.,

iloveuGIFTS, MakeWorkFun! CTO of Creative Engineering.



### [NinjaCodeGen](https://medium.com/ninjacodegen?source=footer_card)



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