PHOTOGRAM

Introduction

My employee has a chance to demonstrate a Ruby on Rails’s potentials as per our client’s request regarding a prototype sample application emphasizing on social network photo sharing, hence Photogram was designed.

Although the application can be continuingly developed and contributed, it shows the majority interactions of modern user social network functionality. Ultimately, it could also demonstrate the efficiency of Ruby on Rails.

Research and ideas

Most of modern social network applications share some of the common components, such as followings, likes, upload photos and comments. The building process for photogram would break into backend part which interact between users request and server response, and front-end part, which mostly interacts with Jquery and Ajax. For further implementation, React or other front-end framework could come into use, if preferred.

As stated above, photogram was decided to be built with Rails TDD principle for the back-end, implemented by Jquery/Ajax on the front-end, with future expectation on implementing some React on Rails. Below is the tests that are used for the app.

Find out more on how I normally work with TDD workflow.

Additionally, the app also focusing on mobile and resposive design.

Features for non-registered users

Visitors will be forced to land on login/register page.

Registration authentication is implemented without Devise, some manual logic includes required unique username and specific fields upon signup.

Live search for users(manually implemented without gem)

Visit each user profile page at /user_name, view profile information, posts count, followers/followings count and uploaded photo in thumbnails format.

Visit and view user’s photo post.

Each post permalink is encrypted and randomly generated by unique token.

Features for registered users

After user registration; with unique username, user will be redirected to the user profile page, with the default avatar photo.

User can update avatar and include information such as name, website, bio and email address.

All uploaded photos are stored remotely with Amazon S3 services, using Carrierwave.

Ability to create new post, by navigate to add photo shortcut.

Create post with image, location and caption.

User can create hashtags with # following by letters or numbers in caption field, the app will find existings tags in the database and group posts with the same hashtags at /tags/hashtag_name.

Hashtag will be newly created if not yet existed in the database.

User can comment, like or unlike on any user’s post(including own posts), as well as hashtag on comment. Additionally, user can also mention other user on comment by prepend other username with @.

Hashtags and mentions are handled by implementing rails view logic, which will create a link inside comment for #hashtag_name, @user_name to /tags/hashtag_name and /user_name.

Photogram limited user to be able to like only one time per post(create like in DB for the new like). If liked on the same post again, like will be updated(update like DB to false), then render view accordingly.

Noted that like will not be destroyed but updated its value instead, preventing DB from unnecessarily creating and destroying Like table in DB for repeatedly like from the same user.

User can follow other users dynamically via other user profile page, or by visiting own/others followers, followings link on the profile page.

Followers and Followings link in user profile page will show a popup modal when vistied; implemented with Rails Ajax to get view from another template, which user can follow or unfollow user within a popup modal.

Follow and unfollow will update Rails relation DB as well as render view accordingly.

Notification for users when user’s post gets commented or liked, user gets mentioned or followed. Also, will notified user when user’s following user posted a new post.

Additionally, displaying new notifications count when user login back to account. Notification will resets to zero after user visits notification button, then restart the count for new notification if received as stated per event above.

Notifications logic also handles some edge cases. For example, if user_1 comments or mentions on user_2 at the same post multiple times, will only considered comment/mention notification to count as one.

Notification displays the unread notice(heart icon).

When clicked, the notification modal will display, then show the new notification and reset noticfication’s count to zero.

Displaying user’s following users feed at root path; /.

User’s feed can be implemented further to display posts from specified users, such as, from a user that has the most followings or user that shares similar hashtags/mentions.

For a better user’s experience; comment, like, and follow functionality are implemented with Rails Unobtrusive JavaScript, which includes updating its value without reloading page via Rails’s Ajax process.