Developer's Guide

NOTE This guide is outdated and no longer applies since the project has switched from angular to React in May 2017

The project uses an older version of MEAN.JS as its framework. (MEAN is an acronym for MongoDB, Express, Angular, and Node, but MEAN.JS is a concrete framework designed around those four tools.)

We use Angular version one, and the control panel uses the AdminLTE framework. The application is designed to be deployed to Heroku.com, using the heroku addons mLab for database storage and SendGrid for e-mail delivery. The Google Maps API is used to assign drivers to delivery routes.

We use Grunt to automate build tasks, passport.js for authentication, mongoose, and Karma for unit-testing.

The directory /app contains server side code.
The directory /config contains configuration code loaded during startup, including the express.js initialization.
The directory /public contains client side code, and is viewable by the user.

The project is built around what meanjs.org calls "vertical modules". These modules have both client and server side components. The server side for a module handles the CRUD operations for the particular functionality enabled by the module. It consists of a route file with CRUD endpoints, a controller for those endpoints, and a model file containing a mongoose schema. The client side code contains views, routes, controllers, servcies, and other components used by Angular.js to implement the component's user interface.

• core - governs the content seen by the user when first navigating to the page, and contains code for the header and sidebar menus.
• customer - the foodbank's clients
• donor
• driver
• food - governs the Inventory tab.
• media - allows the user to upload a custom logo.
• packing
• questionnaire
• schedule
• settings - allows the admin user to customize the application to his particular foodbank.
• users - governs all users (donors, drivers, and volunteers).
• volunteer

The main view is contained in the file app/views/layout.server.view.html. This file contains the wrapper code

  <div class="wrapper">
    <!-- Header, contains the logo -->
    <header class="main-header" data-ui-view="header"></header>
    <!-- Sidebar, contains the sidebar navigation -->
    <aside class="main-sidebar" data-ui-view="sidebar"></aside>
    <!-- Content, contains the page content-->
          <div class="content-wrapper" data-ui-view="content"></div>
          <!-- Footer -->
    <footer class="main-footer" data-ui-view="footer"></footer>
  </div>

When the client receives the page, the four elements main-header, main-sidebar, content-wrapper, and main-footer are initially empty. The Angular router populates them with appropriate content based on the client's url string. For the root / (fetched when the user first navigates to the application), the content is determined by the core module.