This post is quite long, this is an outline so you can navigate easily.
- Bootstrap your idea
Bootstrap your idea
This project started on August 11, 2017
Like levels.io’ Hoodmaps project — which is a great source of inspiration — I wanted to show how easy it is to build a functioning web service from the idea to the first sign of traction.
This post is not to brag about me or anything like that, but instead show you that you can do it too. I made few videos so you can follow the technical parts. These videos are not here for you to copy that project but more to give you inspiration and a sense of the time it takes.
First of all I came up with a problem, it is better if it is a problem you personally have.
It has not to be some game changing idea, start small. The objective is to find people that have the same problem as you.
My problem was that it is a pain to read Twitter threads (or Tweetstorm) on the official twitter website/app and I think that all the Tweets put one after another in a medium.com alike page could be better.
I made up a description of the idea plus a one-liner to check if it could interest anyone.
I will try to expose many people to that message and see how they react.
Read Twitter threads with easeDetail:
The base idea is to allow people to better read Twitter threads.
Let say one person needs to say more than can fit in a tweet, the way of doing that is to start a “thread”. A thread is a tweet followed by many replies to each others. So when you read the first one the others are linked and you can follow the full story, but in reality Twitter is not meant to be used that way, the UX is less than optimal.
What about a service that helps you unroll a full Twitter thread on a dedicated beautifully designed page to allow an easy read of the whole story?
Want to test it follow => @ThreadReaderApp
For that specific idea, because it targets Twitter, I will use that medium to start gather users.
But depending on your idea you could build a quick landing page to try to convince user with your message and ask for emails. To make a landing page you could use launchrock.com (mostly free with paying upgrades)
We need to prepare a minimum of graphic assets to make it credible. Of course nothing exists yet so we will have to fake it.
To illustrate the service I will take a real Twitter thread on web and show a fake result that looks like the final page.
For that I will use medium.com as an inspiration (design side) and Photoshop to copy/paste elements from Twitter and make the illusion working.
I am not a pro of Photoshop 😆
To get that material online I created a new Twitter account @ThreadReaderApp then use the bio, the header (for the image) and a Twitter thread to display the message. (inception)
The base idea that is meant to evolve is to allow people to better read twitter threads. Let say one personne need to say more than can 1/x— Thread Reader (@threadreaderapp) August 11, 2017
So now we have our message ready and online, how can we reach potential users?
It is quite tricky, I guess you don’t want to bother your friends (but still you should) and they won’t be honest with you.
Where are you supposed to get those people?
Betalist.com (and alike) are ok but it has a selection process that could last a few months.
The solution is to think hard and find the right niche.
For Thread Reader I decided to target people using the #thread hashtag on Twitter!
You could use Google adwords to drive some customers on your landing and check the conversion rate (that's another way to do it).
With the first positive user feedbacks I got, I decided to give that idea a chance!
Let’s start building!
During all the process you should stay close to your first users (prospects) and include them in the progress loop.
It could be with update on Twitter, email, polls or anything. We must build some with minimum effort so it would be easy to iterate and to deploy. At that point it CAN be buggy, but it must be online.
For that project we will need a Twitter account and Twitter App
My choice will be the LAMP stack with the Silex framework, Silex is a very minimal php framework. I chose it because I like to work with it, but also because it is very close to raw php so you can understand the code (no specific framework code on our way).
Now that our web App is ready and our Twitter App is created,
we are going to spend some time with the Twitter API and get around the official documentation.
See: https://dev.twitter.com/rest/public and https://dev.twitter.com/overview/api/tweets
Of course in our process we want to leverage the existing
and do not reinvent the wheel we will choose an existing PHP library that will allow us to interact with Twitter.
The choice of any library could be tricky, the best is to check if the platform has an official version and if not if they recommend any. For Twitter they list multiple PHP libraries.
So you have to check by yourself, see if the project is active, and how many stars it has on Github for example. I choosed j7mbo/twitter-api-php after some testing.
This project is built live and you will see that, like any real project, we will encounter unexpected feasibility issues.
The next step is to get the replies to a specific tweet.
My opinion is that this feature should be exposed somewhere in the API, so let’s read the documentation.
Ok, I can not find anything talking about “replies” in the documentation, I’m quite sure I’m missing something but let’s check that on Google.
Ooops, as seen on a recent post of Stack overflow the Twitter API does not provide replies to a specific tweet. OMG that’s a shame 😔
People suggest to use the Search API with specifics queries to get tweets related to the one we want.
We have no choice, let’s try that.
During the building phase you’re going to have a lot of feature ideas.
DO NOT IMPLEMENT THEM
Note them in a todo/idea list but you should be focused on something minimal and go live instead of a bigger project that will never hit the server.
Let’s continue the code for now, a working proof of concept could be online soon, then it will be easy to iterate and add features.
The code quality is far from perfect but it is not the goal here, refactoring will be fun and cheap as we don’t put much features in it. And to be honest in 90% of the time projects won’t succeed and you’re going to trash everything.
Trust me on this one.
You should fail fast.
Getting the data works!
Now it is time to put that in a great design, then add some caching to prevent long loading time and Twitter API rate limitation.
For that I will look for a public free template with a medium.com look and built a static HTML+CSS page which I will integrate after.
After spending some time on the Internet looking for a free template, I realize that it is not that easy, so I’m going to get some “inspiration” (cough copy cough) from medium.com
Design is always important so let’s use a good tool from the start:
Bootstrap and use one of their example as a starting base
Now that the data are in the template, we need to put some basic caching in place. It is mainly because the Twitter API is quite slow and we do have quotas to respect too.
Expiry time has to be tweaked to get an optimal value, I would say between 3 and 5 minutes.
Be careful as the caching mechanism is not proof to the dogpile effect and need some more work but it is enough for a MVP.
We are almost ready to go live, let the user add some content to the site and it will be done.
Great the user can unroll his URL, now it is time to test with few real use cases and check if everything is alright…
In this project the data is user generated, so we will encounter many edge cases. Either the user will do something wrong, or we have a real bug, in both cases we will have to help our users understand why they don’t get the expected result.
The way to handle that could be an error message saying that it does not seems to be a thread and to ask the user to make a report if he thinks it is one indeed.
I put that in the todo list 😀
For a small PHP+MySQL MVP project you don’t need expensive server at start. I checked for you 000webhost.com hosting and it looks like it can do the trick.
I’ll let you check how you can push a project online, it is not that complicated but you will have to pay a little to get a domain and an great service.
On my side I’ll use my personal server for now. If you have AWS it would do too of course.
I did prepare a few video about pushing a project online but because I already have my server it is not relevant so I decided to not publish it.
Unfortunately the twitter search API has major limitation that goes on our way:
- First it does not index all tweets
- Then the index expires quite early (about 10 days)
- Finally we can not get more than 100 entries per call
Remember that working on a specific platform is always risky. We can hit platform limitations or even be banned or get our API point modified, that is the game.
Let’s do our last technical improvement: remove twitter search and work with timeline instead.
We also put in place a minimum of analytics,
the choice of a KPI could be important too.
Here because it is a website based service I will watch for users sessions (Google Analytics) and as a second KPI I’ll take the number of unrolled thread (as seen in the database).
At this point it misses many features: https, a domain name, display media, follow author, polish design, share the page, replies, favicon, extension version, trends and more… but we need to resist and take some time to communicate and ask for feedback.
Everything is online now, it is communication time!
I’m not a marketing guy, like not at all.
But for this service, because it is on Twitter, it seems easy to find a few growth hacks or dropping the buzzword: automated marketing.
Here are some idea I got, as usual it takes time to implement so I will test it manually first:
- When a thread has been unrolled on the service, the Twitter account could follow the main user and reply to the thread with a link to read it on the website.
- Use Twitter search to look for thread related keywords like #threads #unroll and so on, then unroll the thread if applicable and message the author.
That’s right, I’m taking some human time to contact people and unroll thread by hand to get the tool some traction.
Also it allows me to talk with the user and see if they are interested.
I spent about 2 × 3h to do that.
Basically I search for “#thread” or “tweetstorm”, and it is not so easy to find great content (something that our bot will have to deal with)
As a rule of thumb we have to ask people to pay early to see if the service has value, but for this service I decided to offer it for free.
Now that we are on tracks and can iterate fast, let’s ask user for feedbacks and start implements new features.
You should contact every user you have and ask them for feedback,
I did contact many of them on Twitter and I got some interesting thoughts:
- “Can it be a browser extension so I don’t have to leave Twitter?”
- “How can you be sure that people will remember about your product each time they need it, and how to be sure they will take the time to use it resisting the urge to see the story in the first place”
- “Hey can you make it so if you have a pic in first tweet it shows up w/in blue box?”
- “I like the idea but how you’re going to handle the mobile version?”
- “Maybe it needs a refresh thread button?”
In the second episode (coming soon) we will talk more in depth about communication and traction.
👉 Meanwhile you can check the Thread Reader website.
- Create a Twitter account and App
- Setup PHP and Silex framework
- Get your first Tweet from the Twitter API
- Get replies from a given Tweet with the Twitter search API
- Loop over each Tweet plus testing and debug
- Template using example from Twitter bootstrap
- Implement a caching mechanism
- Allow use to post new content to the site
- Switch from Twitter Search to Timeline
This is an example of my todo list at some point,
it is here to show you that you don’t have to worry about having many thing to do, it goes by:
- Show media
- Sometime people write “1/x” we could remove/lighten that?
- When a thread is too old the API does not allow to retrieve it
- Extended tweets has all the @mentions at the start of the tweet text, put them aside
- If the thread has only one tweet, show an error message (try to be explicit about the reason)
- Beautiful error pages
- Show embedded tweets/youtube videos
- Sometime expended links are to long and break the design
- Add suggestion of what to read next in the bottom of the page
- Add a big CTA “share this thread” on top of the page
- Full twitter user badge on each page
- Make a Twitter bot to do the job and explain that on the homepage
- Allow people to reclaim and/or remove a specific tttthreads (and block it)
- Sondages are not shown, that’s ok but explicit it someway
- Make some gif to show how it works (bot and full service)
- Make a waiting page if the thread had never been retrieved because it can be super long
- Block specific #hashtag (including for example #thread)
- Prepare the communication for diverses websites
- Automated marketing, look for #thread and try to unroll, if the result is > 3 send the link to the user
- Preview should show textual information and hashtags instead of image
- Add trends on homepage
- If possible merge bots so mention would work with both or keep only one
- And so on…