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.
Sounds good! Thanks for sharing this with the world.
I’m totally with you on this. It’s hard to get passed by the “so what to do with this hammer” phase.
This sounds an awesome project thanks for sharing! Just marked on GitHub 🙂