Hey all! I'm Jonathan, a UX designer based in the UK. I'm here to share a small side project that I've been building with a friend, Ben, over the last few weekends. The plan was to build something and launch in one weekend but it turns out that's pretty tough, so we ended up taking a coupe of weekends instead!
What and why
What we've built is www.alwaysreading.io which is a simple web app that allows you to queue up articles/blog posts (anything online) that you've been meaning to read but haven't got around to yet. The way it works is that you just paste in links to the articles you've got lined up to read and then set up a schedule for how often you'd like to be sent one of these links. We'll then send you an email, based on the schedule you set up, with a link to one of your articles. Once you read the link, we'll mark it as read and queue up the next one!
We built this for a couple of reasons. Firstly, because we both realised that we have this exact problem. We have a ton of links to great articles saved in Pocket, Evernote and Trello but never actually get round to reading many of them. The list of articles just grows and grows making it harder and harder to dive in and read one. The other reason is just because we wanted to build something and get it online! There has never been a better time to 'create' and so building something we might actually use seems like a great place to start.
Technology and tools we used
We've learnt a huge amount throughout this process and used a bunch of powerful tools that has really helped to speed up the process. We thought it might be helpful to share some of the technology/tools we've used in case it's useful for other creators building or planning to build something. This is by no means an exhaustive list of what we used, nor is it in any particular order but here are the things that come to mind:
- Node.js (Personally I think node, along with express, makes building apps incredibly accessible to pretty much anyone who wants to put in a few hours of learning. You can get something basic working in next to no time which gives you the encouragement to keep going and add more complexity progressively)
- Express - Express provides the foundation for everything you need to build your web app
- Passportjs - Along with bcrypt is one of the easiest way to add authentication to your node app without having to dive into the complex details of encryption and authentication.
- Handlebars - Super simple templating for the front end. Most importantly we used https://github.com/helpers/handlebars-helpers which gives you over a 100 extra helpers to do things like trim links, compare objects, format dates and so so much more.
- Spectre CSS framework - We used this simply because we wanted the app to look a little different, i.e not like Bootstrap. But it's also an incredibly useful, lightweight and easy to use framework that isn't bloated with lots of elements you'll never use
- Trello - We used Trello to map out all of our ideas and for our mini agile/kanban board so we could see who was working on what. See screenshot below of live board
- IconFinder - Used this to get the glasses for our logo! Incredibly useful site to find pretty much any icon you could possibly imagine. Most icons are free with attribution and then it's only a few dollars if you don't want to
- IonicIcons - Used for the mini general icons like trash, info and page icons. Font awesome would be the obvious choice but again, wanted to try something different
- Heroku - Heroku is just awesome! So easy to configure and deploy your application to it's crazy. Everything is built in and ready to go and can be utilised with just a few simple commands like "git push heroku master". I know next to NO git but was able to work with Heroku almost instantly.
- mLab - Manages our mongo database. To be honest, I don't know a huge amount about monogo or mLab but it just works! mLab also has a free tier to start with, so very easy to test out and play around with.
- GitLab - A free alternative to Github. It allows you to create as many private repositories as you need for free with exactly the same functionality as Github.
- Discord - Wouldn't necessarily recommend this, it's pretty similar to slack. We're just used it as our messaging app because we use it for gaming too!
- SendGrid - Sendgrid handles all of our emails, sign up and the articles we send out. It's great for a couple of reasons. Firstly there is a sendgrid node package which allows you to use it in your app with just a couple of lines of code. Secondly because they offer a generous free package, sending 100 emails per day without any charge.
- jQuery - Call me old school but I still think jQuery is great if you just want to get things working, there isn't much it can't do! I've looked at Angular and React before and I know they are super powerful but just a little bit too complex (and over engineered) for a small project like this
- Connect flash - Pretty old package but really handy to send flash messages in the app for things like giving users feedback on saving, deleting logging out etc
What's next
We've got a long list of things we're tweaking, fixing and adding to the app but some things we're planning to add next are:
- Import directly from pocket, medium, Trello etc
- Order the articles you've added. Currently we'll just send you the oldest one on your list
- Some reporting/stats on your reading activity
- Auto populate title and snippet from each link added
- More scheduling options like multiple articles a day or reminding you if you didn't read one that has already been sent
- Push notifications/alternative ways to receive your article
- Article suggestions based on what you've already read
That's all for now
If you have a chance to check it out and provide some feedback that would be amazing. But honestly, even if you just read this article, that's awesome too. Hopefully you've found at least one thing in here that's helpful or interesting. Please do fire over any thoughts, questions or feedback you might have or just say hi! We'll certainly provide some more updates on how things are going and anything else we learn along the way!
Jonathan & Ben
Some screenshots
Snap shot of our live Trello board
Set your schedule
Landing page
