Chau (Joe) Nguyen, Kevin (Duc) Ho, Tan Vu, Matt Stewart

Team Members

Launch Site

NinjaCodeGen Angular Landing Page

Hey fellow coders! We need an awesome Angular landing page for NinjaCodeGen, an Angular code generator, to show-case it's features. Also, we need your help on input for feature requests, so visit to rank them and add your own requests!

V800 ncg aa 2017 full page screenshot

Description

The NinjaCodeGen Landing Page is a landing page written in Angular, and has a beautiful design using Material Design. It has typical sections like top header menu, banner, features, gallery, ease scrolling, and footer. It also has a section to add and rate feature requests, chat, newsletter signup, which uses AngularFire2/Firebase, github authentication, and Angular animations.

Instructions

Hey fellow coders!

This is a walk-through of our entry for Angular Attack 2017: NinjaCodeGen Landing Page. We are blown away at what we were able to accomplish and learn in 48 hours! Prepare to be amazed!

Walk-through 4 Steps. 1. BASICS, 2. BUILD-UP, 3. MAIN ATTRACTION, and 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, 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!

We will open source our code here soon: https://github.com/ninjacodegen

View the screencast:
https://www.youtube.com/watch?v=oItyreaBOpk

Built With

Feedback / Ratings (23)

All Feedback