View the source or see it live

One of the biggest pains I hear from new and old developers alike is that once they’ve learned the basics of a new technology, they struggle to apply them to an actual project.

Actually, this isn’t just a problem I’ve heard about – I’ve experienced it myself. In particular, learning React has been as much about figuring out what to do with it as learning the API itself. So to cut a long story short – I’ve built a single-page app with React and Rails-api. And I’d like to share it with you. And it’s not a todo list!

Memamug is a tiny app to help you remember people you meet. However, putting it together wasn’t a tiny job. It demonstrates a number of patterns and techniques which apply to larger projects, including how to:

structure your app

write concise code with ES6

handle Facebook-based login

implement client-side routing

organise your CSS

store uploaded content with S3

serialise rails models to JSON

produce a deployment-ready build

I’ll be putting together a number of tutorials over the coming months detailing the process involved in putting Memamug together, starting with one I’ve just released on how to setup a simple ES6/LESS build-system with webpack.

Of course, I still have a lot to learn, so pull requests would be greatly appreciated! And if you have any feedback or questions, I can’t wait to answer them – you can send me an e-mail, or leave a comment here.

Lastly, if you’re interested in learning to build real web apps and value your time, subscribe to my newsletter! You’ll receive my guide to building Single Page Apps like Memamug as it’s released. And in return for your e-mail, you’ll also immediately receive 3 bonus print-optimised PDF cheatsheets – on React, ES6 and JavaScript promises.

I will send you useful articles, cheatsheets and code. I won't send you useless inbox filler. No spam, ever. Thanks! Please check your email for the link to your cheatsheets.

Read More