Show IH: link shortener meets mailto links
What I built
About two weeks ago I finally finished a project that I was working on: TemplateMail. In short, it’s bit.ly meets mailto links. It allows someone to create a template for an email and share the URL wherever they want — Reddit, WhatsApp, IndieHackers, you name it. Anyone visiting the link can, with a single click, have that template as a draft in their email client, ready to send. Here’s a template so you can see it in action for yourself.
ps. It’s hosted on Heroku’s free tier, so the machine might need a few seconds to spin up on the first pageload.
Why I built it
I got the idea from scrolling Reddit. Every so often I would see comments encouraging people to mail their representative about some injustice, but I rarely saw people commenting that they actually took that step. I decided to make that step easy. Though in all honesty, I just really wanted to build something because I don't get to do that at my work. I didn’t even care about making it profitable. I also wanted to learn more about building backends and databases with Python and SQL, so this was a great project. Except for having to also build a frontend, which isn’t my strong suit and which I’m just not super interested in.
How I built it
As you can probably guess at this point: Python and PostgreSQL. I used Flask and leaned heavily on this amazing tutorial by Miguel Grinberg. For the frontend I decided to stick to plain HTML, CSS and a tiny bit of vanilla JavaScript. I at some point considered using Bootstrap to make things easier/faster, but decided against it. There was no great reasoning behind it, I just wanted to freshen up my frontend skills a bit, so I decided to not use any libraries.
Every morning before work I would spend time on TemplateMail. Sometimes just 15 minutes, sometimes 45. The important thing for me was to be consistent in my habit. I would also often work on it in the evening or on the weekend, but any work I got done then felt like a bonus, because I had also gotten some work in in the morning.
What I learned from it
This is my first real project which I actually decided to launch. Previously I had only built the projects which are part of the freeCodeCamp curriculum. I do a lot of coding at work, but since those are analyses, that falls in an entirely different category. I definitely have a way better understanding of Flask and PostgreSQL now than when I started the project (mission accomplished) and I brushed up on long forgotten frontend skills.
I’d do a few things differently if I would have to do it all over again.
- It’s my first real project that I delivered, but I’m not new to coding. I know I should think things through before starting to code, but as it turned out, I should’ve thought things through even more. One thing that I flip-flopped on quite a bit was whether to include a field for recipient in the template. In the end I decided against that, because this would mean that I would have to store email addresses without their owners having consented to this.
- I first created (most of) the backend and only then started on the design for the frontend. Probably due to my eagerness to learn about backends and my dislike for frontend development. Starting with a design first would have definitely helped me get a better idea of what I needed to include in the backend.
- Speaking of frontend: using a library like Bootstrap would probably have made my life a whole lot easier and might have led to me not being fed up with the project in the end. I’ll definitely give it a go for my next project.
What’s next
I know there’s plenty to improve frontend wise. I’m not planning on tackling that though, unless I notice that people actually start using TemplateMail. I won’t be promoting it too actively, as this was more about learning than it was about turning a profit. There's also a few things I could improve in the backend. Right now when saving a template, a randomly generated URL is created for it without checking if the URL is unique. That's obviously not ideal but with the current setup and if my math is correct, there are roughly 200 trillion potential URLs, so I think I'll be fine for a little while longer.
In the mean time I’ll continu working on other projects which I find interesting. I’ve already started a new project to brush up on my React and I’m adding a tiny amount of Node.js and Express to it.
Just some constructive comments. My first thought was that Reddit does not like link shorteners, so you might want to acknowledging that or test it. I didn't quite get what the point of this product is at first. I thought that, from your description, I would click on your shortlink and I'd get a nice and pretty formatted template in my email client, but instead of an Outlook template, I got sent to a web page with a plain box and some lorem ipsum text. To me the term "template" refers to the formatting, background, colours and so on, not so much the text. So it was my mistake, thinking it was an email template design creator, not a way to share templated text.
Perhaps a shorter, more concise and clear problem statement along with how your product solves it might help. You have a "What I Built" then "Why I Built It", this may not be the best order because you want to connect with your audience first by establishing an emotional connection with them by stating the problem that led you to building your app. I really like how stealmyidea.io outlines products, with Name of Idea, Tagline, Opportunity in a tweet, The Problem, What this is, What this isn't, and Thesis. This framework may help you in future projects.
I took a closer look and noticed the "Use Template" button. It indeed opened up the content in the box into a (sort of) ready-to-send email, however all of the spaces in the lorem ipsum text have now been changed into + signs, ie "Lorem+ipsum+dolor+..." which clearly isn't useful at all. That should be an easy fix for you I would assume.
The purpose of the social media share icons aren't clear, would I be using them to share the template, or do they share your product home page? I almost never use share buttons so didn't test it myself.
Finally, and yes I did read the rest of your post, it is definitely helpful to see your thought processes of how/why you created this the way you did. It seems to me to be a unique product along with a good learning experience, best of luck on continued success!
Thanks for taking the time to write such elaborate feedback, I really appreciate it.
I had a look and you're right about Reddit and link shorteners. I'm guessing that they filter this through a crawler which checks if the URL redirects to another URL, which is not the case for my project, so I think I should be good.
I tried to emulate the look of a draft email in Gmail, hoping that it would be something familiar, but judging from your 'plain box' comment, I didn't succeed in that. Also the fact that you didn't notice the 'Use template' button at first... sounds like I might have to go back to the drawing board. I think I can get a way cleaner look by integrating Bootstrap. I noticed inconsistencies with the look in different browsers and at some point told myself it was good enough for demo purposes.
Can you tell me which email client you opened the template with? I checked Gmail and Outlook within different browsers and those worked fine, but seems like I should test a few other major email clients as they probably don't handle the URL encoding the same way.
I added the social media buttons so that visitors are able to share the URL to the specific template on the respective social media. It's similar to for example a news website having 'share this article' buttons (I work for a newspaper, that was probably where I got the idea from). I wanted to make it easy for the person who just created the template to share it, since that's what I'd expect someone to do.
Thanks again for the feedback and also the words of encouragement!
outlook 2016