How I Built: Envivo Social
Earlier this week, after a few months of on and off development, I brought my new Twitter application Envivo Social out of beta. The source code is available here but I wanted to write a little blog article about how I put it together and why I wrote it.
I needed to learn the Twitter API for a bigger project I intend to launch later this year. I wanted to prototype it so that I wasn't diving too much into the deep end. I also wanted to play a little bit with vue.js.
I often tweet live from events such as the Darlington FC Fans Forum that took place last week. This often involves remembeing to paste in a given hashtag and, while there are ways to do this through Twitter natively, I wanted to see if I could come up with a better way - to help myself as much as other people.
How it works
When you first go to the site, all you've basically got is a Twitter sign in button. Authenticating through your Twitter account then presents you with this form (after some optional onboarding using intro.js):
You can see your username and a remaining character count, and then two boxes for "prefix" and "suffix". You would put any hashtags or other content in these that needs to appear at the beginning and end of every tweet. Finally, you have the main body of your tweet.
To send a new tweet, you just type into this box and hit Enter (if you have enabled that option) or press Send. You can optionally attach an image to the tweet. In the background, this fires off an AJAX request through vue-resource which grabs the form and sends it to another controller function that sends the tweet and reports back on whether it succeeded. Vue is then used to display a notification confirming the success of the tweet.
I've been "dogfooding" Envivo for a while and, after sending 181 tweets through it without error at the Fans Forum, I decided it was ready for launch. There's a lot of work to do - I've got a roadmap for the next four versions planned out which should keep me busy until the end of August - and I need to send out some e-mails and tweets to try and get it out there and get people using it and feeding back.
I have no intention of launching any premium services on Envivo. This was a fun little side project for learning and experimenting. There's a Google ad at the bottom of the form when signed in and, if it gets enough traffic to generate the impressions to pay the server costs, then great. If not, I'll not lose any sleep over it.
What's this bigger project you've got planned?
Not telling. :)
- Upload more than one image
- Fancier uploader
- Show tweet, retweet and favourite counters so you can see the impact your tweets are having
- Update to vue.js 2.x, and shrink the Bootstrap to a locally hosted copy that only has what it needs
- Show reply notifications and allow you to reply to them in-app
- Allow "threading" of tweets (so each tweet is a reply to the last one you sent)
- ....and more!
What I Used
- Laravel 5.4
- vue.js 1.x
- Bootstrap 3.x
- Font Awesome 4.x
- Hosted by Linode
- Source code on GitHub
- Deployed with Forge