A large web application boilerplate code using MEAN stack built by extending Yeoman angular-fullstack

1. User has a unique nickname which is used instead of actual name in all activity.
2. Added a user profile setting page (using form generated by Mongoose Schema) which is linked to the user ID. Note that forms-angular is used as third party forms generator and ui-routes used to nest form angular generated view.
3. Delete user removes profile but retains user with state marked as deleted.
4. Confirmation workflow for sign up and password reset for local Auth strategy.
5. Modal authentication workflow
6. Welcome page with Reveal.js slideshow that gets content from backend model
7. Full site schema for a model controlled view
8. Deployed demo in openshift

1. Add all automated unit test cases including proper handling of re-login cases of deleted/locked user. ( This should have been done first, but am taking a debt on it for now. )
2. Remember Me option. Client side password confirm field. Recaptcha.
3. Blocked user handling with admin facility.
4. Password rules, with mandatory change period settings.
5. User roles and groups, priviledges and its administration
6. Check out Themes of Bootstrap. Add themes support for reveal also. Make Paper theme for Material Design as default.
7. Add FB, Twitter, G+ like/share buttons in nav with back end boiler plate.
8. Create getting started etc. pages and UI-router based full site
9. Add side panel menus
10. Facebook, Twitter, Git OAuth2 support. Only supported ones will show up in login modal.
11. Add payments / donations etc. facility (Monetize.js can be an option)
12. i18n Internationalization support
13. Branch and add mobile front end to same backend using http://ionicframework.com/ which is built over cordova/phonegap
14. Branch and add Angular Material Design view.

1. http://tylerhenkel.com/building-an-angular-node-comment-app-using-yeoman/ for the basic scaffolding
2. https://github.com/forms-angular (see: http://www.forms-angular.org) for Forms model to view automation
3. Inspired by https://github.com/fraserxu/node-registration and http://www.scotchmedia.com/tutorials/express/authentication/3/02 for user activation workflow
4. https://stackedit.io/editor for helping in editing this .md file

Installation prerequisites for the beginners

Install Node.js - check tutorials Install MongoDB - check manual Install Git from GitHub

npm install -g grunt-cli

npm install -g bower

git clone https://github.com/anshumandas/meanapp.git

To start first start mongod (possibly in C:\Mongo\bin). Then:

cd meanapp

grunt serve

Check http://localhost:9000

Background: I am a senior software development manager with additional project and program management responsibilities. Exposure to emerging technologies as part of my day job has been minimal for the past 8 years, but I try to keep myself current by learning and coding in new technologies during my free time.

I am totally new to M.E.A.N stack:

• M - Mongo DB (Mongoose Schema)
• E - Express.js Web Server
• A - Angular.js MVC (Model View Control)
• N - Node.js backend.

This project served me as a learning tool and thus can be useful to any one who is just starting out on MEAN stack. I have kept this journal so that people can refer to it and the commit history to gain the same learning without additional documentation.

Dev Note: The dependency annotation being used everywhere by Yeoman is Implicit Annotation, which may break during minification as per: https://docs.angularjs.org/guide/di#inline-array-annotation Update : The error was most likely due to use of strict. However, this is not causing minification issues as Inline notation is automatically being created. This is most likely happening through some grunt process, that I must investigate in future.

First Commit: Project initialization. No code.

Second Commit:

This app was generated by using yeoman generator (angular fullstack and forms angular)

yo fng

See http://www.forms-angular.org/#/get-started for more details.

• uiRouter was chosen instead of ngRouter.
• Grunt for build.
• Yes for all all other options.

To start server:

grunt serve

The initial generated files have some bug as the Applicants Nav link does not work.

Third Commit was only of this file which was missed on first commit

Fourth Commit:

• Corrected the bug in Applicant nav link by commenting the drop-down logic.
  Update: we should use -

<li dropdown class="dropdown"> <a href="#" class="dropdown-toggle" dropdown-toggle>

The dropdown and dropdown toggle must be outside of the class also.

• Seems BasicReports do not work now. Leaving it as is.
• Added a nickname property in user model. This is the unique name that will be shown when user comments. It allows us to separate real name from the virtual identity. Nickname gets generated automatically.
• Ability to change this will be added in later commits.
• Made role property an enum
• Reverted signup form to the angular (from forms angular) one with additional help message.
• fixed few deprecation warnings

Fifth Commit:

• The signup now has only nick name. User name shifted to Profile.
• Added a user profile setting form using forms angular.
• to create the profile display logic boiler-plate used

yo angular-fullstack:route profile

• Made changes to the controller so that we can get the profile ID queried using the User id
• Changed profile html to nest the forms-angular generated form. This is a good example for UI-Router use case where we are nesting a third party view. See account.js for nested profile states. The navbar has ui-sref logic. profile.controller has logic to block and control third party event. Note: There is a bug in forms-angular due to which when you move from edit screen to any other screen a modal appears for save confirmation, even when the content has been already saved. This is not handled here yet.
• Modified nav bar. Commented the Applicants part of forms angular.
• User delete now deletes profile and puts user state as deleted instead of deleting the record. {Intent: All users activity like comments should not be deleted with user delete. Only profile info is deleted}
• Added signup confirmation and password reset email client side routes

Sixth Commit:

• Commented the $stateChangeStart in profile controller and am using the forms-angulars advised method of client side customization (http://www.forms-angular.org/#/forms#client-side-customisation) by adding the onAfterCreate methods etc. (It was a good learning anyways on ui-route events...)
• Added email (library http://www.nodemailer.com/) confirmation support by using some code from: https://github.com/fraserxu/node-registration and following: http://www.scotchmedia.com/tutorials/express/authentication/3/02

Note: We can use DirectTransport instead of SMTP transport for dev but I found https://mailtrap.io/ to be quite handy during testing. (had tried https://github.com/deitch/activator but its required user model conflicts with the mongoose user model)

• Added a view template for any schema using form-angular client side customization. (Not perfect. Plan to change this in future).

Seventh Commit is an update only to this file

Eighth Commit:

• Updated the README.md file to use Mark Down format only
• Created Welcome Page using Reveal.js (https://github.com/hakimel/reveal.js) as Angular directive inspired by http://jsfiddle.net/BinaryMuse/CXqAb/
• Modal signup and login inspired by http://brewhouse.io/blog/2014/12/09/authentication-made-simple-in-single-page-angularjs-applications.html
• Created a site Schema that is used populate site content

Ninth Commit:

• Deployed demo on Openshift http://meanapp-anshumandas.rhcloud.com/
• Fixed few bugs and made changes to the Grunt.js file to make the demo work
• Since direct mail does not work in OpenShift used gmail with OAuth2
• Grunt task for Openshift deploy
• grunt cssmin has issue with @import. So copied the css from the import url in login.css

Tenth Commit:

• Navigation schema enhanced. Allows api based menus that can get updated by socket.io
• Menu as directives
• integrated formsangular as part of project instead of dependency. May be replacing it altogether
• Introduced the Maker and artifact schema inheritence hierarchy. CRUD operations handlers...
• Introduced groups concept
• Reorganized folders