Getting started with React/Flux Node/MongoDB – Open Source

Almost a year ago I started an ambitious project to create a website from scratch using React and Flux (Redux) as well as Node.js and MongoDB.  I was also writing a companion book parallel to writing the actual code for the project and made some really good progress.  Since I basically stopped completely and just let the book sit and linger, I decided that I should at least open source the book so you can check it out and hopefully learn from it.

There are, so far, 10 complete(ish) chapters out of the 20 that I planned.  I really hope that I can get motivated again to jump back in and finish the book, but for now this should be more than enough to get anyone going.

The book contents can be found here:

https://github.com/shorttompkins/writing/tree/master/building-react-fullstack

And the accompanying source code for the website that gets built:

https://github.com/shorttompkins/mrw.lol

Here is the TOC that is complete so far:

  • Introduction/Demo – Welcome to the project, tech stack overview, and what to expect.
  • Up and Running – Get the tools and dependencies you need to get the app up and running on your local development workstation.
  • Tour of the App and Codebase – Take a quick tour of the app and its primary features as well as browse through the structure of the project codebase.
  • Introduction to ES2015 – Brief introduction to the new features introduced with the latest version of JavaScript; ES2015 (a.k.a ES6)
  • Getting Started with Webpack – Webpack is the tool that will build our React.js app.
  • ExpressJS Server 101 – Bootstrapping a basic ExpressJS web server and understanding configuration, middleware, controllers and view rendering.
  • MongoDB and Mongoose Models – Establish a database connection via our web server and build out data models using Mongoose.js.
  • Writing Your First React Components – Write a core App container component as well as layout and header components.
  • URLs with React Router – Support custom URLs and navigation with React Router.
  • Using Flux with React – Introduction and understanding of the Flux architecture pattern, its core features, and using it in the project.

Its very important to note that some of the technical specifics might be slightly out of date, however the concepts discussed should still be very relevant. (Also note that it is/was a work in progress so theres a good possibility that I’m wrong about stuff.)

The remaining chapters that I haven’t written yet (but could get back into if theres enough demand):

  • Image Upload Component – Build the React component that will allow users to upload an image to the site.
  • Image Upload API Endpoint – The associated API endpoint that the image upload component communicates with.
  • Image Search Component – Build the React component that allows users to type into a search input field and perform a filter of images by tag.
  • Image Search API Endpoints – The associated API endpoints that the search component requires.
  • User Authentication Component – Build the React component that will handle user login via Social Networking sites.
  • User Authentication w/ Passport.js – Use Passport.js to enable Social Networking user registration and login.
  • Unit Testing React.js Components – Use shallow rendering to test React components.
  • Unit Testing Node.js Modules – Writing unit tests for your Node.js controllers.
  • Deploying using Docker and Digital Ocean – Introduction and understanding of Docker and how it’s being used to manage our infrastructure as well as deployment to Digital Ocean.
  • React DevTools – Brief tour of the awesome Chrome React DevTools plugin.

Again Im providing all of this pretty much as-is with the hopes that you can take something from it, learn something maybe, or just snag a piece of the source code or even just have that simple “ah ha!” moment when something finally clicks!

As always I’m open to any/all feedback and want to hear what you think.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s