The Oasis Digital Blog

This is another excerpt from this summer’s 31-page intern project report (PDF). All of this was written entirely by our interns, with only some editing feedback from professional Oasis Digital developers or managers.

System Design

Server

The team decided to implement a Node.js server. Node.js is a trending web server that runs off of the Google V8 engine. Node’s asynchronous, non-blocking I/O has been a source of its rising popularity. There is a full analysis of Node.js in the Tools section. We used Express.js for the organization of the server. The group used PostgreSQL as the database system for the project. PostgreSQL is a popular, free database system, rivaling MySQL and SQL.  We wrote different API files to organize the server into server calls to the database relating to users, tasks, and graphs. There is an utility file with helper functions including the PostgreSQL module to allow a connection with the database. Interestingly, the client-side HTML is rendered on the server from Jade syntax into proper HTML.

The following code displays the modules that were loaded and used by the server. Obtaining the library files was as simple as including the module names in the Node.js package.json file, and Node.js handles the rest. We only needed to require each module in our main server file, as shown below. We were also able to include our own server files, which housed the routing information for the server calls to the database.

The main purpose of the server is to take a request from the client and respond with the requested information. In order to do this, the server is largely made up of routes. Each route has a String associated with it which is needed to be appended to the base URL in order for the function to be called on the server. Below is an example of our main route on the server. “Req” stands for the client-request, and “res” stands for the server response. Notice that the server responds to the client by rendering our main Jade file.

A large part of the server was to find and display information from the database. The task, user, and graph server files were composed of functions that interacted with the database using a specific SQL call. For example, the function below displays the attributes of a certain task in the database.

The function below is a main part of the server. It interacts directly with the PostgreSQL database. Most other functions in the server utilize this function.

This is another excerpt from this summer’s 31-page intern project report (PDF). All of this was written entirely by our interns, with only some editing feedback from professional Oasis Digital developers or managers.

Backbone.js

Backbone.js is a JavaScript framework that is loosely based on the model-view-controller (MVC) design. Backbone.js utilizes a RESTful interface when interacting with the server. It is lightweight and is designed for developing single-page applications [16]. There are three main entities used in Backbone: models, collections, and views. Models are objects with attributes that generally represent the data on the server. Collections are arrays of models with added functionality such as filtering and re-ordering. Views represent the UI and hold data containing what should be displayed in the DOM. Views are given either plain HTML or Underscore.js templates. The templates are then filled with data for the model associated with the specific view. It is possible and very common to nest views. Functions can be bound to models or collections to interact with a view when a certain event is called. An example of this in Cerberus is re-rendering the TaskView when the task collection is reset. Backbone.js provides a client-side routing system which uses a hashtag in the URL when navigating pages, opposed to redirecting to a new URL. The DOM is replaced with new elements generated from templates in a view. The DOM is replaced with each route function which gives a fluid look when navigating pages. This is efficient because the developer can update in the DOM he or she wants and does not have to waste resources reloading preexisting content. Backbone.js is a very useful tool for creating simple single-page applications. For applications with a lot of dynamic data it is probably not the best solution. It leaves much to be wanted in terms of model-view interactions. The developer is forced to do more work than should be necessary to tie all of the aspects of the application together. Once everything is tied together, Backbone works exceptionally well. In the future we might explore Angular as an alternative.

gRaphael

gRaphael.js is an extension to a JavaScript drawing library called Raphael. gRaphael.js has limited documentation which makes it hard to use in the beginning. After looking at the available examples, we tweaked some base examples which taught us how to use the extension. Since gRaphael is an extension of Raphael, a Raphael object must first be made [17]. A Raphael object is an HTML element which uses SVG drawings on a canvas to create a surface on the screen that the rest of the plugin can render within. There are four different types of graphs supported by gRaphael: line, pie, bar, and dot. To use one of the types of graphs the corresponding JavaScript file has to be imported in addition to Raphael and gRaphael. To use a graph, we called the graph’s method on the newly created Raphael object and specified the location within the canvas, size, and data to use. There are also specific hover functions that work out of the box with gRapheal [18]. All of the graphs look relatively nice at default settings, but if the end goal is to have different axis labels or highly customized graphs, this library is not the answer.

Example graphs from demos:

jQuery Mobile Datebox

jQuery Mobile Datebox is a plugin for jQuery Mobile that provide simple ways for users to interact with dates and times. They provide nine different options for date and time selectors. For our project, we used CalBox and TimeBox on the add and edit task pages [19].

JQM Datebox was very easy to implement into our project. The plugin comes with numerous options that can be set to meet your exact needs. For example, we configured the date-picker to not allow users to select dates in the past. For our project, we envisioned having just one combined input for the date and time. This was surprisingly easy to implement using this plugin because it accepts callback functions for different events. We gave the plugin a callback function for when each dialog is closed. The callback for the date-picker will open the time-picker; the callback for the time-picker will save the user-input into the Backbone model and update the database. It is very easy to format the dates that the user selects. For our project, we formatted the date and time into ISO format for easy compatibility with the database.

jQuery UI Touch Punch

jQuery UI Touch Punch is a JavaScript library that allows jQuery UI widgets to work with touch events on mobile devices. It works by simulating a mouse event when the touch event equivalent is triggered. The library only needs to be included in the head of the HTML page  and it will automatically intercept touch events and trigger the correct mouse events. jQuery UI will then use those mouse events just as it would in a normal desktop environment [20]. The core functionality of dragging task divs would not be possible on mobile devices without jQuery UI Touch Punch.

Moment.js

Moment.js is a JavaScript library which provides the capability to format and parse dates. Any JavaScript Date or JSON data can be made into a “moment.” Moment.js allows manipulation, parsing, formatting, or validation of the date. In our project, the date on each task div is formatted by Moment.js to display as text similar to “in twelve days” or “three hours ago,” in order to show when a task is due [21]. Moment.js is also used on the Task Edit page to display a more comprehensive format of the due dates show on the task divs. The Moment.js dates are used in conjunction with unformatted dates that are saved and retrieved from the PostgreSQL database.

Zepto.js

Zepto.js is a JavaScript library that attempts to provide a majority of the functionality of jQuery in a much smaller package. The minified production version of JQuery is 92 KB, and the development version is a much larger 256 KB. Compare this to Zepto.js, which boasts a 24 KB minified size and a mere 48 KB for the full version [22]. One of the goals of the project was to create an application that loads quickly in any browser. With this in mind, we tried to implement Zepto.js first. However, as the project grew, we decided to use the jQuery Mobile plugin, which requires jQuery. Zepto.js is very good for smaller projects or projects that do not require all of the features or plugins of jQuery.

Underscore.js

“Underscore is a utility-belt library for JavaScript that provides a lot of the functional programming support that you would expect in Prototype.js (or Ruby), but without extending any of the built-in JavaScript objects. It’s the tie to go along with jQuery’s tux, and Backbone.js’s suspenders” [23]. Underscore.js contains many functions that simplify the usage of collections and arrays such as forEach, map, filter, every, and indexOf. Underscore is backwards compatible with browsers; it will fall back to native implementations of its functions when requirements are not present in the browser. Underscore comes prepackaged with Backbone.js [23]. We used Underscore’s templating capabilities in our Jade files to display a model attribute directly from the Backbone.js model. The team wrote templates for each Backbone view which were loaded using Underscore’s template function. It would require a fair amount of work to get Underscore to update every time a model was changed, so we settled  on re-rendering views when model or collections attributes  are changed. Underscore is also used in our filtering/sorting of tasks on both the home and manage pages.

Python

Python is a general purpose scripting language with a very simple rational syntax, allowing for the  quick creation of readable programs. Much of its usability is derived from its indentation based syntax, interpreted run time environment, and ability to support numerous programming styles. Despite it being generally considered a scripting language, it supports a vast array of libraries and can easily be packaged into a standalone application [24]. For our use case, Python was exclusively used to create a large number of randomly generated tasks to be inserted into the database. This helped extensively in testing the robustness and reliability of the application.

BCrypt

BCrypt is a Node.js module that can be used to hash passwords for security. BCrypt appends a salt to the password which is a randomly generated string of characters. We used this module to protect all user passwords in the database. BCrypt is a hashing functional, meaning passwords are unable to be decrypted [25]. When we need to check if a user-input matches the password in the database, on the login page for example, we hash the user-inputted text and compare the hash to what is stored in the database. The Node.js BCrypt module requires a C++ compiler, which made it unavailable when we tried to host the project on Windows Azure. BCrypt worked very well other than the prerequisites needed for compiling.

Express.js

Express.js is a Node.js module that creates a web application framework which creates more simple and less redundant server code. There are three main aspects of Express: setting up the application, requesting information, and responding to requests. When setting up the application, the developer can set a port and configure the view engine and routing preferences. The team set the view engine to use Jade, rather than HTML, for our project. The requests to the server determine what page is shown or if a query to the database needs to occur. Requests contain information about the requester such as what they are requesting, data sent with the request, and the URL the request was sent to. The server can then respond with the correct information, sending or displaying information in the form of a response [26].

Jade.js

Jade is a templating engine heavily influenced by Haml. Jade is a different way of writing HTML. It makes creating HTML content easier to write and read. Like Python, Jade uses indentation to denote nested data, instead of curly braces like in JavaScript. For our project, Jade drastically reduced the amount of code we needed to write for our HTML. It provides inline JavaScript which helps to create dynamic web pages. Jade is implemented via a Node.js module. This means that all of the client-side HMTL is compiled on the server and is then sent back to the client. Jade also supports mixins and includes, functions that output HTML and imports of other .jade files, respectively. This does not always have to be the case because Jade supports client-side compiling [27].

CSS

CSS is the third major pillar to web-development, along with HTML and JavaScript. CSS is used for the styling of the website. CSS is an acronym for Cascading Style Sheets. HTML elements are styled based on their classes or id. Some of the more difficult styling with this project came from the use of jQuery Mobile, a JavaScript library that adds classes to HTML elements before the page is rendered. This hindered our ability to  change the styling of certain elements for our own needs. The main parts of our custom css are used to make the task divs colorful with rounded edges and to override part of jQuery Mobile in order to get a look closer to what we wanted.

jQuery Password Strength Meter

jQuery Password Strength Meter is a jQuery plugin that provides realtime client-side evaluation of a password, providing a visual indication regarding the strength of the password. The plugin can be used for any password input field and can be configured to have different tiers of security. It displays a simple, yet informative, progress bar showing the relative security of your entered password.

For this project we used the plugin for all of our password input fields. This plugin provides no real addition to the functionality of our application, it simply helps to encourage users to choose stronger passwords.

jQuery Mobile SimpleDialog2

jQuery Mobile provides excellent support for displaying information as a modal dialog. This is a pop-up dialog box that the user must interact with before returning to the main page content. JQM utilizes a routing type system for this, creating the new modal dialog as a “separate page” with a hashtag in the URL, which means the user does not actually leave the page. In our project, this was a major inconvenience. We had to disable jQuery Mobile’s routing system because we chose to use Backbone’s routing system instead. This meant that the modal dialogs would not work with our setup. After many hours of research, we finally found SimpleDialog2, a jQuery Mobile plugin. It provides all of the same functionality of a normal JQM dialog, except it doesn’t use a hashtag in the URL. In fact, it doesn’t need to change the URL at all! Surprisingly enough, it worked on all devices we tested it on. The developer is able to choose one of three options for configuration: button list mode, button input mode, and freeform mode. Button list mode is a simple way of listing input buttons, button input mode is a way of having text input fields, and freeform mode is a way to insert your own HTML into the dialog [28]. We used freeform mode to create a jQuery Mobile listview of users whenever user selection is needed.

The list items are generated from options of a hidden select menu which is generated from the Backbone collection of users.

(to be continued)

This is another excerpt from this summer’s 31-page intern project report (PDF). All of this was written entirely by our interns, with only some editing feedback from professional Oasis Digital developers or managers.

jQuery

jQuery is an extremely popular JavaScript library that aims to simplify complicated DOM manipulation with a very simple API. For example, instead of using getElementById() to obtain a DOM element, jQuery allows for the use of the jQuery convention $(selector) or the less conventional  JQuery(selector). Selectors are typically by id, “#id,” or by class, “.class.” DOM elements are able to be manipulated by obtaining the DOM object, and then calling any one of various functions including .css() to change CSS of the element, .val() to change the value of the element, .html() to change the element content, .append() to append an element after the selected element, and .replaceWith() to replace the element with another. Other helpful features include binding, calling events, and setting animations on elements. Useful utilities such as each and isArray prove to be very useful. jQuery also has the ability to detect the user’s browser and features backwards browser compatibility [11]. This library is also a requirement for other plugins we used including jQuery Mobile, jQuery UI, Mobile Datebox, jQuery UI Touch Punch, jQuery Password Strength Meter, jQuery Mobile SimpleDialog2, and Moment.js.

jQuery Mobile

jQuery Mobile is a plugin for jQuery that provides convenient and easily-implementable mobile-designed web content. It is touch-optimized and strives to make web content easily interactable for users with a touch device. JQM is compatible with all major mobile platforms as well as most desktop browsers. The developers of jQuery host a web-interface called Themeroller which allows the user to customize the colors and styling of the mobile HTML elements [12]. When JQM is included in an HTML page, all compatible HTML elements are automatically converted into mobile styling. JQM also provides additional components to developers by providing easy-to-use dialog boxes and pop-ups, although this is not easily compatible with Backbone.js. The framework provides a client-side routing system very similar to Backbone. For this project, we chose to use Backbone’s routing system, but we could have converted the project over to use JQM’s routing system. We felt that the styling of mobile elements was too forced in some situations and could be very hard to restyle differently. JQM does not simply add CSS classes to elements: sometimes it nests content in layers of divs, spans, and other elements. It can become very annoying to decipher how JQM formats an element, but it is necessary in order to customize the styling in any major way. Currently, the formatting horrors of jQuery Mobile seem to be a necessary evil. Besides those problems, JQM is a very fast and easily implementable tool to aid in the field of mobile web development. The following images display our usages of jQuery Mobile in the project.

jQuery UI

jQuery UI is a plugin for jQuery that attempts to improve the aesthetics of the user interface by using elements that respond to user input. Three of the parts of this library that were explored during this project were “draggables,”  “droppables,” and “sortables.” A group of HTML elements can be created into a “sortable,” which allows the elements to be dragged into different orders. Draggables are the same concept, except that the HTML element can be dragged anywhere within the container element, window or body, depending on settings. Typical settings for both draggable and sortable include: revert, an option to force the element to return to its original position along with the duration of the animation, appendTo, the HTML element that the element can be manipulated in, and helper, an option to move the original element on drag or make a copy of the element to move, leaving the original. Events include create, drag, start, and stop. During the entire process of making the tasks drag and droppable, we tried having them all be draggables. We discovered later that we wanted to keep all of the tasks organized and switched to “sortables.” Later in the summer, we saw an example of the other elements drifting to fit around the one being dragged, causing us to change the entire way the task elements move. Instead of making all of the task divs draggables, the individual div becomes a draggable object on click. The other elements move around it when it is dragged, and, when the dragging has stopped, the draggable is destroyed. Droppables were also used as the user list on the manage page to allow the tasks to be reassigned to a different user by dragging and dropping.  All that was required to make the user list “droppables” after calling droppable() on the HTML element was to define which elements can be dropped onto them, what should happen when an accepted draggable is over a droppable, and what should happen when an element was actually dropped, i.e reassign the task [13]. JQuery UI caused problems when we tried to make all of the elements drift around.

Ember.js

Ember is a client side JavaScript framework. The goal of the framework is to provide helpful tools and a basic workable organization to developers while also allowing for developer flexibility. Ember.js branched out and can also be used as a server side framework adding to the complexity when using it. It does, however, come with Handlebars.js, a templating language, prepackaged. Handlebars.js allows Ember.js and the screen to talk to each other through two way bindings. This means that when anything is updated on screen, it is automatically updated within Ember’s reference to that model, and vice-versa [14]. While this feature would have been helpful, we decided against Ember.js as an option for two reasons. The team had already decided to use Express.js for our server-side framework, which would mean extra work to disable Ember’s server-side code. Ember.js is also a very recent framework, causing new patches to be released each week. Some of the main functions were annoyingly changed with each update. The documentation did not reflect the new changes, and the community took a long time to adjust to the change. This is a framework worth looking at again once it is in a more stable, longer-lasting release.

Batman.js

Batman.js is a framework intended for the creation of single page web apps. It is heavily dependent upon the use of CoffeeScript, but it is still usable with regular JavaScript. Instead of using a templating tool like many other frameworks, Batman.js can be directly inserted into HTML as attributes. Batman.js focuses on speed, easy DOM manipulation, and reduction of redundant code. Our experience with it, however, proved that the project is still very much in its infancy. Following the suggested tutorials or getting an actual example to work was nearly impossible due to unforgivable discrepancies in various versions of the API [15].

This is another excerpt from this summer’s 31-page intern project report (PDF). All of this was written entirely by our interns, with only some editing feedback from professional Oasis Digital developers or managers.

BitBucket

BitBucket is an hosting site for the distributed version control systems Git and Mercurial. While using Git, BitBucket allowed the team to view each commit throughout the project and to see the differences made between each commit online. BitBucket is owned by Atlassian, the company that owns JIRA. Conveniently, this allows BitBucket and JIRA to interact. The team was able to simply reference the ID of a JIRA issue in a commit message, and a link was made between JIRA and the commit. The ID in the commit message becomes hyperlinked to the JIRA issue, and the JIRA issue has an option to view commit history for each issue [5].

Git

Git is a distributed version control system. In our project, it was specifically used as a source code management tool which allowed many people to collaborate on the same project. It was originally developed by Linus Torvalds for the Linux kernel which is a firm testament to the software’s efficiency and stability [6]. Our basic use case for Git is as follows: developers are assigned specific coding tasks, the developer pulls the current source code (in our case it was stored on BitBucket), makes changes to complete their given task, commits that specific changeset, and pushes these changes to the central repository. Other team members are then able to pull these changes and continue working on their specific tasks. An important item to note here is that, the majority of the time, Git automatically handled merging conflicts between versions of code which significantly automated the collaboration process.

JavaScript

JavaScript is one of the most prolific programming languages used in the world of software. JavaScript (JS) has become the standard scripting  language of the web, creating widespread support from all modern browsers. The language was originally developed by Brendan Eich for use in Netscape. Despite its name, it bears no direct correlation with Java, but was named as an attempt to share the hype of Java. It possesses many deficiencies such as a global namespace, numerous idiosyncrasies in predication, and internal qualms pertaining to the use of prototypical or traditional class inheritance. However, at its heart, it has the ability to posses an elegant functional style. In JS, functions have first order status, and variables are dynamically typed which allows for a declarative programming style.

Heroku

Heroku is a cloud platform as a service (PaaS). It provides hosting for applications written in Java, Node.js, Clojure, Python, Ruby, and more. We utilized Heroku to publicly host our project. A Git repository and domain name is assigned when you create a new Heroku project. Code is easily pushed to the repository, and Heroku handles the rest. It automatically downloads and compiles the necessary modules listed in the package.json file and then deploys the application to the server. Heroku provides free minimal hosting that includes a domain name with a Hiroko extension. There is an option to use a domain name that has already been purchased [8]. We took advantage of the free hosting for this project and kept a free account up-to-date with our source code. You can find the Cerberus project hosted on Heroku at http://oasisdigital-cerberus.herokuapp.com/. Heroku was very easy to set-up and keep up-to-date with our current commits.

PostgreSQL

PostgreSQL is a relational database that uses the SQL database query language. The basic structure of a relational database is the table. A table consists of an arbitrary number of columns, each having a name and specified datatype to be stored within the corresponding cell. Users then inject rows into this table with values correlating to the various columns. The SQL protocol provides an intuitive interface for adding, manipulating, and retrieving information from within these tables [9].  In this project we had two tables: one to store the users and another for the tasks.

Socket.io

Socket.io is a JavaScript library that provides the ability to update data between clients in realtime. There are two parts to socket.io: the server and the client. The server half of the library is a Node.js module. Socket.io is event-driven. Socket.io uses the WebSockets protocol to keep a constant connection open between the server and client. If WebSockets is unavailable in the clients browser, socket.io seamlessly falls back to using either Adobe Flash sockets or long polling. The code does not need to be changed to support all of these methods [10]. The team used socket.io to update task and user data in realtime throughout the application. If any attributes of a task or user are edited on one client, all other clients will see the change instantly. The server sends an event after it changes the data in the database, and all clients receive the event. Although we only send events from the server, socket.io allows sending events from the client and receiving events on the server [10]. For our application, it is up to the client to determine whether the event is relevant to itself. For instance, non-managers are unable to get to the manager page in the application. Therefore there would be no need to update user information for an instance of a non-manager client. We also used socket.io to update the number of open and in progress tasks for each user, the manager order of the tasks, and whether a user is logged in or not. Socket.io was very easy to implement and use. It is very easy to comprehend the event-driven core of socket.io because it is made simple, and it closely represents the essence of the Node.js event system.

This is another excerpt from this summer’s 31-page intern project report (PDF). All of this was written entirely by our interns, with only some editing feedback from professional Oasis Digital developers or managers.

Tools

Node.js

Node.js is a server-side platform built on Chrome’s V8 JavaScript engine. Programs for the platform are written in JavaScript, meaning the average programmer does not need to learn a new language. Rather than being multi-threaded, Node.js is single-threaded,  which enables event-driven, asynchronous I/O. Most Node.js I/O functions are given callbacks as a parameter which are called when the I/O activity is complete. This allows the app to continue to run smoothly even through intensive I/O activities [1]. The team found the cons of Node.js to outweigh the pros. We decided that Node.js is a good choice for small-scale projects without a lot of server-database interaction. For larger projects, the amount of callback functions that are needed becomes foolish. A long chain of callbacks is made when the server needs to execute many functions linearly. This causes confusion while reading the code because of code-indentation and the sheer amount of callbacks. We had to nest four callbacks within each other in our project, and it was painful. Another problem with Node.js is that it can become difficult to think in an asynchronous manner for complicated processes. Unfortunately, many Node.js functions do not provide a synchronous option; asynchrony is forced upon the developer.

Node Package Manager (NPM)

Node Package Manager is a universal repository for Node.js modules (applications). NPM comes packaged with the Node.js installation. Modules are able to be imported and re-used in applications, creating a web of module dependencies. A JSON file, package.json, is used to record the modules that an application requires to function. NPM is able to download and install all dependencies for a specific module based on the contents of package.json. NPM is a wonderful tool as long as the package.json file is updated whenever a new package is added. A downside of NPM is that packages are not automatically added to the file when installed. The repository is hosted on Node’s servers and is accessible via command line or their website [2].

JIRA

JIRA is an issue-tracker which made up a large part of the project management aspect of the project. JIRA allows bugs, new features, improvements, and tasks to be created and assigned to members of the development team. JIRA includes a customizable workflow which each issue needs to flow through before completion. This allows for in-depth progress tracking for each issue and the ability to know each developer’s role in bringing an issue to completion. JIRA helped to organize daily tasks for the team and removed any chances of duplicate fixes. It provided an excellent interface for watching the progress and history of our project. JIRA includes a user-customizable dashboard that is able to include graphs or other representations of data regarding the project [3].

The image above shows two examples of JIRA graphs. The first graph displays issue delegation, and the second graph displays whether the team is keeping up with the amount of open issues.

BeeBole

BeeBole is an online timesheet service for small and medium-sized businesses. BeeBole provides a week-by-week calendar for employees to enter the hours they worked per day [4]. Each week, the employee submits their timesheet for approval. A project manager or owner of the business then processes and approves the timesheet on a bi-monthly basis and sends a paycheck through a service called SurePayroll. The BeeBole dashboard offers customizable graphs displaying personalized information regarding your timesheet. These graphs include hours worked per project, hours per day, trends throughout the month, and many other options. Managers and owners have access to charts that show the total hours of the company per project which allows more efficient management of a business.

(to be continued)

This summer’s interns have finished their project, and written a long and detailed report about it. You can read the 31-page report PDF, and we will present excerpts of it in a series of blog posts. This is the first.

All of this was written entirely by our interns, with only some editing feedback from professional Oasis Digital developers or managers.

Project Overview

Oasis Digital Solutions, Inc. is a software company that develops custom software for companies worldwide. Oasis Digital is primarily based in St. Louis, but has contributors spread throughout the United States. The success of the 2011 internship program led Oasis Digital to expand the program for the summer of 2012. This year the internship program has grown to include three interns in high school, or recently graduated and about to enter college. One of the reasons this program was
started was to allow for the developers at Oasis Digital to learn about new technologies they normally would not get a chance to work with. There is a mutual benefit between the interns and the company, as the company will have new products to show existing customers by the end of the summer, while the interns gain a once-in-a-lifetime experience in the industry.

Goals

The primary objective of the Cerberus Project was to create a workflow management system with desktop, tablet, and mobile interfaces.

Team Members

David McNeil is a freshman at Rose-Hulman Institute of Technology in Terre Haute, Indiana.
Sam Pepose is a senior at Whitfield High School in Saint Louis, Missouri.
Sarah Whelan is a senior at Whitfield High School in Saint Louis, Missouri.

Design Overview

The team discussed the global plans for the project on the first day. We discussed which languages and platforms to use that would best fit the project’s goals. Node.js was decided upon for the server because of its asynchronous nature and flexibility. JavaScript was decided upon for the client because of its simplicity and gradual learning curve. The team decided that it was beneficial to have the same language for both the client and server.

We discussed the basic layout of the application. It was decided that we will need six different pages for our application: a register page, login page, tasklist page, task entry page, task detail page, manager page. Rough sketches of each page were drawn:

(to be continued)