From Idea to Conception – The Road of Warriors



So you have an idea, great!  But at this point, even if your idea is amazing, nothing separates you from the billions of other people out there who also have a GREAT idea.  Ideas sadly are easy to come across, it’s execution where true success becomes attainable.  So how do you go from an idea, either yours or someone else’s, to an actual profitable product.  The answer lies just below.

Step 1 – Create a concrete idea


It is very common that people who have an idea don’t necessarily have something that they can do anything with.  For example, a persons idea may be: “Wouldn’t it be awesome if we could share pictures with a whole bunch of people at the same time.”  This is an awesome idea, but with just this line, you’re a far cry from Instagram.  So what needs to be done, is the idea needs to be actually thought out in terms of, what exactly do we want this concept to achieve, and how?


So for example, the idea is: “Wouldn’t it be awesome if we could share pictures with a whole bunch of people at the same time.” Now try and answer these questions:

Why? – Why is this idea a necessary need?

People love sharing pictures, but they always have to send pictures to friends, or invite them over to watch a slideshow.  Often times, people just don’t have the time to do this, and their friends never get to share in this experience.

How? – How do you hope to satisfy this need?

We will allow the most simple way to post images using an app, and allow friends and family, and potentially anyone else who wants to view these images to view them using the app.

What? – What will you do to satisfy the need?

It will be a social networking application.  Users will be able to post images using their account.  When users like their image, they can in an easy way say that they like the image and leave a comment if they would like.  You can invite friends to view your images, or you can make the images public so that everyone can view them.

Those few lines above are now a concrete idea.

Step 2 – Create your plan of attack

How are you going to take this from an idea to an application/website?  Here is where decide things such as: Will I develop this myself, or will I hire someone else to do so for me?  Will I hire someone overseas, or do I want to work with someone here?  How much do we want to spend on this?  Should we try and get investors, or some sort of funding, or should we try to do this out of pocket? (You should probably go with funding btw)  Should we make this application run on all platforms?  Should we hire different developers for different areas, or should we hire one developer who can do it all?  How much do we WANT to spend on this?

This is when things start to get serious!  Now you’re going from just an idea, to actual work.  Most people will stop by this step if they’re not serious, especially as they start to do research on the cost of development.

Step 3 – Simplify the idea

“It’s easier to do 2 things great, than it is to do 20 things good.”

What does that mean?  Well, put simply, if you try and create a product with 20 premier features, you’re almost bound to have an extremely buggy app, with poor user experience on the first go around.  But if you just have a very small amount of features, you can focus on these, and knock ’em out the park.  So you have to simplify the idea.  Find out what your app’s nitch is, and then try to focus only on that.

For example, back to our Instagram example.  Maybe you want to allow users to post videos, and audio, and make a lot of edits to their images.  And then you want people to be able to save certain images as favorites, and have facial recognition to be able to tell if any of your Instagram friends are in the image, etc, etc, etc.

Now that may sound awesome, but if you try and do all that, you’ll spend a lot of money and time on a product that you don’t even know if it’s going to do well or not.  Save those features for later when your product is very popular, and you can implement them one at a time.  But for now, just focus on posting images, commenting, and liking those images.

Step 4 – Wireframes, Blueprints & Mockups

You’re probably very anxious to start developing this thing as soon as you get a developer.  But you want to hold off on that and get some wireframes and mockups first.  Wireframes basically are the skeleton of the application.  Where will buttons, text boxes, labels, icons, images be placed etc.  Wireframes typically are in greyscale because you still haven’t decided on all you want graphically.  But a wireframe will give you what the overall product layout will be.  After you do the wireframes, you draw out a blueprint.  This blueprint contains everything that has to do with the User Experience.  Explaining what each button does, and how all screens work together.  Here’s a sample of a beautiful blueprint from

Fueled Blueprint

Fueled Blueprint

After you’ve done the Blueprint, you do the mockups.  The mockups are the images of the way different screens will actually look within the application.  By the end of the mockups, basically you know exactly what the app will look like.  Here’s another example from

Elevatr app by Fueled Mockups.

Elevatr app by Fueled Mockups.

Once you have the mockups you’re ready to develop right? Almost, but no.  Now you need to polish the application.  Polishing the application is the final touch that only some designers/developers will do.  Here we perfect the design, and make sure that it contains all the animations, and transitions perfectly as desired.  This is the step that people who truly value their craft will take.  This is the step that will take your app from, ‘ooh’, to ‘aaaaahhhh’, and take you from the path of common men, to the roads of kings.  From a good app of our time, to a product of legend.  Yes, this is the step of all steps!

Honestly though, this is important, because it puts you right above the competition, because most people don’t do this.  Check out this video to see how fueled does it.

Step 5 – Develop it

Now, develop the application.  You’ve got everything decided, now you simply implement.  Either do this yourself, or get someone else, but you should have already decided that by now.

Step 6 – Test and Make revisions

Great apps have been thoroughly tested.  So make sure that you test as much as possible, and with as many people as possible.  Give it to old people, young people, programmers, artists, fast food workers, bank tellers, CEO’s.  Everyone will use your app, so everyone needs to test it to make sure that it’s good.  Keep making revisions and testing until you have a GREAT product.

Step 7 – Market and Ship

After all that hard work, now comes the time you’ve been waiting for.  Ship that beast!  Push it to whatever stores it needs to go to.  Now notice though, I put market first.  That’s because you should start getting the word out there before the product is shipped.  That’s because you want people to be kind of expecting it, that way you won’t lose momentum once it’s live.  There’s a ton of ways to market your product, look here for some advice.

And viola, you have now taken your product from nothing, to something!

Using jQuery Datatables with NodeJS and MongoDb using mongoose-datatables

Web Development

So what exactly is this long name all about?  Well let’s just dive right into it. jQuery Datatable is an awesome tool to use as a table for your website.  It offers some nice features right off the bat such as sorting, and searching mechanisms.  So using it can save you a lot of development time. I realized rather quickly though when implementing this tool in my website that using the jQuery datatable with Node and MongoDb was a little difficult, mainly because of the lack of documentation.  That’s why I decided to write a blog post about how to create a datatable with NodeJS as the server, and MongoDb as the back end database.  Keep in mind, there are a lot of details that I will not go into that have to do with NodeJS.  So if you’re unfamiliar with Node you may want to look into it first.   So here we go! So we’re going to have four files.

  • index.html – The web page itself
  • mongo.js – This will handle all our database manipulations using mongoose
  • node.js – This will be where we write our Node server
  • main.js – This is where we handle all the client side javascript.

The example that I have here is using a document that I created entitled reservations with four fields.  The Json looks like this.

reservation : {
   name : String,
   startDate : String,
   endDate : String,
   confirmationCode : String

The first thing you need to do is create a table with the columns already specified.  This is an example of what you can do.  Keep in mind though that this table will not be too pretty, I’m not showing any fancy design with this.


<!--We need these two js files included. You need jquery 1.7.2 because for some reason the newer versions have issues with datatables. The second will be the js file for the datatable itself.-->
<script type="text/javascript" src="path/to/1.7.2.jquery.min.js"></script>
<script type="text/javascript" src="path/to/jquery.dataTables.js"></script>
<table id="example" cellpadding="0" cellspacing="0" border="0" >
    <th>Start Date</th>
    <th>End Date</th>
    <th>Confirmation #</th>

So this is just a simple table, with column names:

  • Name
  • Start Date
  • End Date
  • Confirmation #

Now here’s what you need in your Node Javascript file.  I always name mine node.js.


function start ()
   var http = require("http");
   var fs = require("fs");
   var express = require('express');
   var app = express();
   var mongo = require("./mongo"); 
   app.configure(function () {
     app.use(app.router); app.all('/', function(req, res, next) {
       res.header("Access-Control-Allow-Origin", "*");
       res.header("Access-Control-Allow-Headers", "Content-Type");

  app.get('/mongo/get/datatable', mongo.getDataForDataTable) //Here's the line that we're looking at specifically
  app.listen(process.env.PORT || 8080);

exports.start = start;

Here’s the line that we really need to look at.

app.get('/mongo/get/datatable', mongo.getDataForDataTable)

So here is our GET request. What this line does, if you’re not really familiar with Node, is it will route a GET request to the method getDataForDataTable in my mongo.js file. Now lets move onto our mongo.js file.


First off, you want these variables to be global.

var mongoose = require('mongoose');
var DataTable = require('mongoose-datatable');
var MyModel;

Configuring is optional, but if you do, make sure you configure the datatable and initialize it on start up.

DataTable.configure({ verbose: false, debug : false });
mongoose.plugin(DataTable.init); var dbURI = 'mongodb://localhost/test';

Once again, I set these variables you see below as global, but they don’t have to be, just make sure they can be reached in the db.once method, which we will be writing below.

var db = mongoose.connection;
var reservations;
var dates; var reservationsSchema;
var dateSchema;

db.on('error', console.error.bind(console, 'connection error:'));
db.once('open', function callback ()
  console.log('Connection has succesfully opened');
  var Schema = mongoose.Schema;
  reservationsSchema = new Schema(
    reservation :
       name : String,
       startDate : String,
       endDate : String,
       confirmationCode : String
 reservations = mongoose.model('reservations', reservationsSchema);
 MyModel = require('mongoose').model('reservations');

So here what we’re doing is creating the Schema (reservationsSchema) which is necessary in order to create the model (MyModel) object. The following line retrieves the model.

reservations = mongoose.model('reservations', reservationsSchema);

And in the line below we set the model MyModel, which will be using later.

MyModel = require('mongoose').model('reservations');

So so far we’ve:

  1. Created a small table with the columns specified.
  2. Wrote a router which will route our get request to the proper method in the mongo.js file.
  3. Created our model and schema which both are necessary in order to retrieve the documents from the Mongo database.

Now here is our code to get the data from the Mongo database.

exports.getDataForDataTable = function getData (request, response) {
  //"type.typeName" : "Trolley"
  //console.log("Get Request for Data Table made with data: ", request.query);
  MyModel.dataTable(request.query, function (err, data) {

So what did I just do? We

  1. Called the dataTable method on the MyModel object, and sent request.query (JSON) as the query for what data we want to receive.  For now, we aren’t going to mess with that query at all, so that will be the default setting.
  2. Returned the data object which contains our documents that we just searched for.

And here’s the final part of our code.

  "bProcessing" : true,
  "bServerSide" : true,
  "sAjaxSource" : '/mongo/get/datatable',
  "aoColumns" : [
    { "mData" : "" },
    { "mData" : "reservation.startDate" },
    { "mData" : "reservation.endDate" },
    { "mData" : "reservation.confirmationCode" }

So here’s what we got going on.

  1. bProcessing” : “true” – Enable or disable the display of a ‘processing’ indicator when the table is being processed (e.g. a sort). This is particularly useful for tables with large amounts of data where it can take a noticeable amount of time to sort the entries.
  2. bServerSide” : “true” – Configure DataTables to use server-side processing. Note that the sAjaxSource parameter must also be given in order to give DataTables a source to obtain the required data for each draw.
  3. sAjaxSource” – This is the address of our GET request.
  4. aoColumns” – Used to give DataTables specific instructions for each individual column.
  5. mData” – This property can be used to read data from any JSON data source property, including deeply nested objects / properties.

So basically what I’m doing here is setting the table up to show when it’s processing data, also telling it that we’re going to be doing server side processing, and that the GET request address is /mongo/get/datatable.  Then I’m saying that the column data is going to be taken from the response to the GET request, and we want from the returned JSON,, reservation.startDate, reservation.endDate and reservation.confirmationCode. And that’s it, if you run the website now on the server you’ve created, you will see that it’s populated with data.