[Entry] Instagram clone

What I built

Here's a link to a video on Google Drive: https://drive.google.com/file/d/1q9rITDg4XdbAoCbNTGmzkDWNTHXf6Vpr/view?usp=sharing

I built an Instagram clone. You can upload pictures and others can view them in realtime. You can also heart pictures. The Instagram clone uses Pusher to update the pictures and likes in realtime

Demo Link

https://pushergram.herokuapp.com/
The app is responsive and can be viewed on mobile and desktop devices.

Link to Code

https://github.com/9jaswag/instaclone

How I built it (what's the stack? did I run into issues or discover something new along the way?)

Stack

• Ruby on Rails
• Pusher
• Devise
• Bootstrap
• Carrierwave
• Heroku for hosting
• AWS for holding the images

I built this app in 4 hours 😴 😪. I built it using Ruby on Rails and handled user authentication with Devise.

Issues

The two issues I faced while building this app were handling image uploads and updating both likes and new posts in realtime.

After different tries with the image upload, I settled for Paperclip and it was all smooth sailing until I deployed to Heroku and couldn't find the images uploaded after 1 minute of uploading them and after minutes of Googling, I found out that Heroku does not store images.
I ended up using Carrierwave for image upload since it integrated well with AWS.

When it came to updating image likes in realtime, I had to find a way to identify the image in the DOM whose likes was to be updated. To solve this, I used data attributes to locate the posts via their ids and update their likes.

Additional Resources/Info

-Carrierwave and Devise are life savers. I was able to handle user authentication and images uploads easily with them.
-Pusher makes implementing realtime features as easy as ABC

Update: Here's a post on how I built the app:

Build an Instagram Clone with Ruby and Pusher

Chuks Opia ・ Jun 1 '18

#pushercontest #rubyrails #instagram #pusher