A journey through the creation of an app with Node, MongoDB, React, Gulp

February 9th, 2015 | expressjs, gulp, javascript, mongodb, nodejs, react |

So, being so interested in React, I wanted to create something, something useful, not just a single page with a Hello World in the middle, no, that does tell you how to really use a framework, what are its pros and cons.

To really evaluate it, you need at least to have a design of some application, with some links here and there (routing), some dynamic rendering (events), some webservice calls (server, async), a database, and a process to build the project (because you don’t want to manually add a reference in the .html everytime you add a .js file for instance, this is especially true when you deal with React components, every component should have its own file). Then it should have some testing.

So, my only constraint was : use React. After watching so many videos and read many things, I needed to write that down and see how I’m doing.
From that, I needed to store some data on a server that would connect to a DB. So for the server, I picked NodeJS. I barely used it, just for some tutorials I think. But nevermind, I’ll learn. Now a database, at first, I decided on NeDB, because I didn’t want to install a true database server at the beginning. But, I was going to have some many rows later (>300k) that I had to switch to a more powerful one. I through of MongoDB. Never used it, but I knew it integrates easily with NodeJS (using Mongoose) and NeDB has the same exact syntax so no code changes! I only used relational databases until now, so it was going to be a good learning curve ! Finally, as a build system, I used Grunt a bit back then, but I heard about Gulp being much nicer. Go for it. (I’ve added it at the end actually :-))
And of course, I did of all my coding in my new favorite editor, Atom!

I’m going to explain step by step how I did from scratch, what I’ve learned and give some tips and pointers.

Continue reading A journey through the creation of an app with Node, MongoDB, React, Gulp