Materialized Crud Generator in Mean Stack Free Download

CRUDX – Materialized MEAN Stack CRUD Generator


Install the following 2 softwares

  • 1.Node (Server)
  • 2.MongoDB (Database)

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.


  • Image upload in local file system and view in Materialize Box
  • ng-messages with Materialized angular input controls
  • Parent-Child relation ship dropdown
  • Save form data with image
  • Select2 and PickaDate with materialize css modification
  • Socket.IO with live data broadcasting


  • 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"      /crud-grid   

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) {     $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
  • 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

   View Demo     Download