angular landing page

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

42
14
TypeScript

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:

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.