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: 5 days ago
JSON representation

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

Host: GitHub
URL: https://github.com/NinjaCodeGen/angular-landing-page
Owner: NinjaCodeGen
Created: 2017-05-04T07:35:20.000Z (over 7 years ago)
Default Branch: master
Last Pushed: 2023-01-06T00:27:18.000Z (almost 2 years ago)
Last Synced: 2024-11-05T20:13:44.496Z (7 days ago)
Topics: angular, angular-landing-page, angular2, angular4, angular4-demo, angular4-seed, angular5, angularfire, firebase, typescript
Language: TypeScript
Size: 1.61 MB
Stars: 48
Watchers: 4
Forks: 13
Open Issues: 1
Metadata Files:
- Readme: README.md

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.