Making a Medium.com clone in Laravel and AngularJS
A few months ago, I was inspired to create a self improvement platform by self help guru’s like Dr. Wayne Dyer, Les Brown, Earl Nightingale and so forth. I also wanted to become a guru myself.
I decided to create a blog to share my own perspective on how one can become a better version of themselves. I started with mental health articles and wanted to later write on how to be financially independent.
Being only twenty years old and having little to share as far as life experiences, writing became increasingly difficult because I wanted to share genuine information that has worked for me or someone I know. After writing about 25 articles — which took months to write because of the dry spells — I decided I wanted to turn my blog into a platform for other like-minded people to share.
I began starting my transition from a single-purpose blog for use only by myself, to a social network. Weeks into brainstorming and coding, I found Medium. It was actually pretty shocking— in both good and bad ways. I pivoted and instead decided to make a Medium.com clone as a learning experience! :)
I wanted to recreate Medium just as it is. I looked through the medium source and stole some of their images, colors, layout dimensions and so forth. The goal was to make as much of a twin as possible.
I had never built a project this large by myself before — but I made it happen. The app is not completely finished, however. Here are some of the main things I left out:
- Uploading images in a story/profile image
- …and other little things like handling various other domains, social authentication, bookmarking/sharing a story, the analytics they collect, etc.
Most of the items on that list would take no longer than a day or so for something crappy that works, but I just haven’t gotten to it yet.
I tried to keep it looking as similar as possible, but I created my own look for the authentication and settings views. The Medium team also makes changes to little things like the spacing/sizing of things so often and that makes it hard to keep up.
The technology I used
I built a single page application, similar to that of Medium.
Heres a list of all languages/frameworks I used:
- PHP (Laravel)
- HTML (some HTML5)
- CSS (Some CSS3, a lot of SASS)
- Twitter Bootstrap (mostly just for the grid system)
My development environment includes the following:
- Vagrant (for managing/provisioning vhosts)
- Laravel Homestead (used as a vagrant box; includes Nginx, PHP 7.0, MySQL, Postgras, Redis, Memcached, Node, etc.)
- Windows 10
For those of you who are familiar with the UI of Medium, some of the features I have implemented on my version are from their older versions (a couple of months back). I haven’t updated to their more recent UI, but things still look pretty close in my opinion!
Watch me use it
Here’s a video of me playing around in my version and showing all the cool stuff I built, starting with the signup process and ending at publishing a draft which will show up on the home page. Here it is!
Get the code
Feel free to clone/play around with the code on this Github repo.
Thanks for making such a cool app, Medium.