Materialized Crud Generator in Mean Stack

Materialized Crud Generator in Mean Stack

CRUDX – Materialized MEAN Stack CRUD Generator


Install the following 2 softwares

Live Demo – Hosted on Heroku

Note : Due to heroku doesn’t store images in local after certain amount of time, images may get deleted. We should save images to S3 or something which is better for storage.



  • Node.js and NPM >= v0.12.0
  • MongoDB – configure mongoDB as a service or run mongod

Technology Stack Used

  • MongoDB 3.2
  • Express 4.9
  • AngularJS 1.4.9
  • Node.JS 4.2.3


Run the following commands and the application will start automatically
npm install yo -g (Install yeoman for scaffolding web application)
npm install grunt-cli -g (This creates and runs javascript repetative tasks) 
npm install bower -g ( A frontend package manager for web applications) 
npm install (Install all nodejs dependencies, also automatically installs bower components)

Buid and Run

grunt serve  [for running in dev environment with livereload]  
grunt serve:dist  [Buid and run in production mode]  
grunt --force  [buid with Administrator rights]
Note : If any of the test failed or any error in running application, please install npm and bower with latest verion and in Administrator mode in command prompt


 npm install -g generator-angular-fullstack 

Create ES5 based ReST API

 yo angular-fullstack:endpoint brand [DESIRED_TABLE_NAME] 
 yo angular-fullstack:route brand [DESIRED_HTML_PAGES_NAME] 
 yo angular-fullstack:controller brand    
 yo angular-fullstack:directive [Custom Directive] 
 yo angular-fullstack:filter [Custom Filter Name]
 yo angular-fullstack:factory [Custom Factory Name] 

declare directive on HTML Page for listing data

    crud-grid name="brand" api="API NAME i.e  Brand in this case" 
        required-cols="requiredCols" cols-width="colsWidth" 
         schema = "schema"    data ="brands"     cols="displayCols" 

In controller set columns text type and visibility
            $scope.displayCols = [{
                'name': 'text'
            }, {
                'description': 'text'
            }, {
                'parent': 'id'
            }, {
                'image': 'image'
            }, {
                'active': 'boolean'
            $scope.requiredCols = ['name'];
            $scope.colsWidth = [{
                'name': '20%'
            }, {
                'description': '30%'
            }, {
                'parent': '20%'
            }, {
                'image': '10%'
            }, {
                'active': '10%'

Set colums in brand.modal.js in server/api/brand

    var brandModel = mongoose.model('Brand', BrandSchema)
    brandModel.displayColumns = 'name|30%, description|20%, Website|15% ,LogoUrl|15%,active|10%';
    brandModel.exportColumns = 'name,description,website,logourl,active';
    brandModel.requiredColumns = 'name';
set Authenticate true on route
.config(function ($stateProvider) {
      .state('brand', {
        url: '/brand',
        templateUrl: 'app/brand/brand.html',
        controller: 'BrandCtrl',
        authenticate: true


Running `grunt test` will run the client and server unit tests with karma and mocha. Use `grunt test:server` to only run server tests. Use `grunt test:client` to only run client tests.

Protractor tests

To setup protractor e2e tests, you must first run `npm run update-webdriver` Use `grunt test:e2e` to have protractor go through tests located in the `e2e` folder.


  • Mobile resposinve home page with login, signup, category crud pages
  • Real time sync data from any client
  • Authentication with role
  • create entity from provided models and settings from controller
  • listing, searching, edit,paging
  • Search / Filter / Sort
  • Delete confirmation with modal with Angular Modal service
  • Upload image for each item with form data
  • View image in materialize box
  • Realtime updates – Any changes to database is updated in Realtime
  • Export to CSV and JSON
  • Token expire time
  • Session management
  • Login
  • Signup
  • Change Password
  • Password encryption with SHA1
  • Automatic minification, compression, CDNify during deployment
  • Live reaload while development
  • User roles
  • Auto selection of resources for development and production
  • API with role based authentication
  • SEO optimized title for each page using keystone.utils for slugify
  • Responsive front end to fit any screen
  • Modular code structure for faster development
  • Partial pages for changing themes on fly
  • Each module is placed inside its own directory for easy management
  • Out of the box directives: onlyNumbers, animateOnChange, passwordMatch, ngConfirmClick, errSrc, datetimepicker, datepicker, modalWindow
  • Out of the box filters: unique, labelCase, camelCase, reverse, active, status
  • Animations: ng-repeat, ng-if, ng-show
  • Nested routing mechanism using ui-router
  • Separate configuration envirnoment for development and production
  • Message for post confirmation/error
  • Modal system – so that user won’t have to leave the page for updation