I couldn’t think of a clearer way to title this post, other than describing the action I was trying to accomplish.  It took me 4 days to sort this out from hints I received online (Free Code Camp Gitter Help channel), the MDN Javascript documentation and a host of Stack Overflow questions.

The project I am working on is the Free Code Camp Voting App project. it’s the first of the full-stack apps, I used MEEN (Mongo ,Express,  EJS (or your choice of binding script), Node).

I first attempted this app 18 months ago, and failed miserably. Normally failure is an opportunity for learning, but it was so painfully challenging at that point because I barely grasped each component of the stack and getting them to work together was incredibly confusing for me.   I even used Yoeman, which SHOULD make it easier…but in reality it just made it more confusing for me. I was not ready to use that framework since I had a very thin grasp of how all the parts connected to each other.

Prior to this my only experience with full-stack was using Rails.   Some familiarity (but far from expertise) with Rails gave me a perspective of what I could / should be doing in terms of modularizing my application code.   JavaScript, however, allows you to make those decisions on your own about how you would like to configure your folders, scripts, public assets, routes, etc.

I ended up with what i felt was a reasonable blend of decent modularization, but also chunks of code contained in one file so that I was able to keep the parts straight. Perhaps future projects I’ll feel more comfortable making things more modular.

So here is the basic folder structure I opted for in my applicatoin. I’m NOT suggesting you do it the same way…this is simply how I ended up doing it and it’s working OK for right now. I’m sure i’ll make modifications , or possibly go back to yoeman, clementine.js or maybe try Sails.js for my next app.

fccVote2
-app
--poll.js  (this was catch all JS for the app..>I ended up not using it at all)
-bower_components  (front end scripts stored locally)
--chart.js
--chroma.min.js
-config  (files for authorization & authentication using passport)
--auth.js
--passport.js
-models (models for mongoose/mongo collections)
--index.js  (ties the other two in)
--poll.js  (poll model)
--user.js  (user model)
-public
--assets
---favicon.ico
---styles.css
--js
---chartPoll.js (again I ended up not using this, instead used embedded script tags)
-routes  (self explanatory)
--index.js
--polls.js
--users.js
-views
--pages (ejs templates)
--partials  (ejs partials for nav bar, header, footer, etc)
.gitignore
package.json
server.js
todo.txt (used webstorm's "TODO:" syntax to track bugs and todo items)

I started the project by working from the Scotch.io tutorial, Node Authentication with Passport.   I had done that tutorial once in the past, and it went well, so I rushed through it more quickly than I should have this time to get something propped up real quickly that i could use.  But once i got it working, I ignored the user sessions until after I had the voting routes & controller code working well.  That served me well, because once the app was mostly functioning I could then concentrate on allowing actions only for authorized users depending on the route (posting a new poll should only be allowed for authorized users for example)

The next task I tackled was using mongoose for the first time in an app, that is, not a tutorial.  This was not as difficult as I imaged it would be and I think in time it will be easier in the long run.  I think one of the big advantages is transparency of making the connection and closing the database…all that is done for you with Mongoose.  I’m still not fully aware of what other steps it saves, since straight vanilla node.js driver mongo is not really all that challenging (minus callback hell).

At this point I needed to get some data into my database (using mLab, but could easily use local installation of mongod), and I didn’t want to fuss with the front end.  In all the mongo documentation, they provide a small database collection creation script that you run prior to running the commands.  

========================

This post is a draft I started a few months ago and can’t readily recall all the details I wanted to include. However there is some good reminders in here and hopefully they will help some others, so I am publishing it anyway