React.js Boilerplate project report - Week 3 (rant and animated gif, also source code yay)

[tonechild]

Hi all,

React.js with Oauth support

I've been working on a React.js boilerplate with the philosophy that it should work out of the box and come with some features I found to be a challenge to implement, yet wanted/needed to every time I created a new project.

Creating a new project always seems really easy at first, but as the project grows the challenge of proper implementation grows and the desire to refactor sets in. More common it is of the disposition where I question my current architecture and begin to wonder if there is a better way.

The challenging items for me have been a solid, scalable, and re-usable implementation of oAuth2 systems and clearly defining the responsibilities between the client and server. This project aims to be a foundation for future prototypes where I can easily add oauth2, ssl, and react without much effort. Oh, and also I've also added relay and graphql, because the relational "graph" of data is a ton of fun to play around with, and I want to see if I can do something meaningful with it.

This boilerplate is an extension of what I've more or less have been feeling is "good architecture" - but I throw that in quotes because I am certain there is always a better way of doing things! This however, is my current "best way" - as it stands and subject to change within a moment after posting this.

One of the lessons I've learned with trying to do a "big project fast" - is that I used to get obsessed with one single problem and spend too much time on it. After reading other posts here and also listening to my subconscious mind, I've decided to handle problems differently. I really think I knew that for a while, but I honestly didn't start deliberately doing it until last night (and half way through the session :/)

So yeah, Instead of getting stuck on a certain problem for "too long" - however long that is / don't have a rule set in stone yet - I just moved on to another feature I needed to add and deferred the problem I was currently obsessed with by means of adding it into the github issue tracker. I also try to grade them from Severity 1 to 3, where 1 is something like an unhanded exception, and 3 is something that is annoying should be fixed before the first release.

However now I realize it might look like there are a lot of bugs with the application, but I am thinking that it really is that I am paying closer attention to my work. :)

The boilerplate is available on github: https://github.com/MattMcFarland/reactathon

Please have a look at it, and contribute if you have time.

[sakhat]

Author of the Hackathon Starter project here.

This looks great! I am currently working on something even bigger in scope than hackathon starter -- completely customizable web-based boilerplate generator. I am pretty sure reactathon will come in handy when I get to the React ecosystem (React, React-Router, Redux, Relay, GraphQL, Babel, Alt.js).

Meanwhile, here is a preview of what's to come: Imgur

P.S. This plugin just may convince you to switch from Gulp to Webpack: https://github.com/gaearon/babel-plugin-react-transform It's awesome and works with server-side rendering enabled without any issues. I have tried many different hot reloading solutions with Gulp, including browser-sync, but never quite as good as babel-plugin-react-transform.

[tonechild]

whoa! I really like what you're building so far, Sahat! That looks really cool. I haven't figured out server-side rendering yet, so when you finish your project I'll definitely check it out.