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: about 2 months 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 (about 8 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T00:27:18.000Z (over 2 years ago)
- Last Synced: 2025-03-21T17:25:06.748Z (2 months 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: 3
- Forks: 14
- 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!
(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.
# 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.