Odinbook is a test-driven development of a Facebook clone. It was created as the final project for The Odin Project's Ruby on Rails and Javascript and jQuery courses.

See the log in/sign up page below

You are encouraged to create an account, but if you want to get a feel of Odinbook first, you may log in with any of the following emails (all having a password of password):

• [email protected]
• [email protected]
• [email protected]
• [email protected]
• [email protected]

Run the test suite with rake or rspec spec/.

1. Log in required to view content
2. Social network style friending
3. Lists of users with different friendship categories
4. Posts, comments, and likes
5. Newsfeed and timeline
6. User profile with picture
7. Customizable access
8. Email
9. Search
10. Overall look and styling

To improve user experience, several of the features listed above incorporate one or more of the following enhancing features

• Ajax requests (used extensively): When an action affects a small section of the page you are viewing (for example, if you like a post), an Ajax request is used to update just that page section without a full page reload.

• Realtime updates: When another user of Odinbook performs an action that affects the page you are viewing (for example, comment on a post you are viewing), your page is instantly notified of the change and updated to reflect the change. Realtime updates uses websockets and Ajax requests.

• Infinite scroll: For pages with potentially lots of content (for example, your newsfeed), new content is loaded as you scroll through the page. Infinite scroll uses pagination and Ajax requests.

The details of main features below states which main features have these enhancement.

Authentication checks permit a non-logged in user to see only the log in/sign up page and static pages. Log in/sign up is done with Devise including Facebook log in/sign up using OmniAuth with Devise.

Static pages include: About, Contact/Help, Privacy Policy, and Terms of Service.

Users can send friend requests, which must be accepted before two users become friends. Friend requests may also be rejected.

Realtime update for notification of friend request is shown in a user's header navbar.

A user can see lists of users in the following categories, relative to themselves

• All Users: all users of Odinbook
• Friends: all their friends
• Friend Requests: all users who have sent them a friend request
• Find Friends: users not friends with them and who have no friend request from or to them

Users in each list are displayed with buttons for friending (ie, sending a friend request), unfriending, or accepting or rejecting a friend request (depending on their category). All these lists of users use Ajax requests and infinite scroll

Users can create and delete posts, create and delete comments on posts, and like/unlike posts and comments. They all use Ajax requests and realtime updates. Liking/unliking posts or comments is implemented as a polymorphic association.

A post is associated with 2 users (a creator and a receiver) who may be the same (when a user posts on their own newsfeed or timeline) or different (when a user posts on a friend's timeline).

Newsfeed contains all posts created or received by a user or a user's friends; timeline contains all posts created or received by a user.

Infinite scroll is used for the posts in newsfeeds and timelines; realtime updates and Ajax requests are used for post and comment creation and deletion, and liking/unliking, in newsfeeds and timelines.

A user's profile may be modified at any time and consists of a few optional pieces of information and two required ones

• choice of who can access their posts and profile (all users or only friends)
• choice of whether they want to receive email of notifications (yes or no)

The form used to update profiles and the one used for sign up have both client-side validation (with jQuery Validate) and server-side validation (with the sign up form using an Ajax request to ensure that a new user's email is not already in use).

Users may upload a profile picture (limited to 500KB). Uploading a profile picture can take about 5 to 7 seconds...be patient. This picture is processed with Paperclip and stored with AWS S3 storage. If a user does not have a picture uploaded, there is a graceful degradation to the gravatar image associated with the user's email.

Odinbook implements a number of sensible authorizations, like allowing only a comment's creator, or a post's creator or receiver, or a like's creator, or the sender or receiver of a friend request to destroy the comment/post/like/friendship; and allowing only a profile's owner to edit the profile.

In addition, as stated in the preceding section, a user may restrict who can view their posts and profile information to only friends (or leave it at all users). This setting is used to guide part of the authorization in Odinbook, given below

• users have access to only their newsfeed and they may create posts, comments, and likes there
• users have access to their timeline as well as that of their friends, from where they may create posts, comments, and likes
• users may visit the timeline of non-friends who have a public profile and view posts and comments there as well as like those posts and comments, but they may not comment on those posts or create posts
• users may visit the timeline of non-friends with access restricted to friends, but they will see no posts or profile there

A onetime welcome email is sent to a new user during sign up. After that, an email is sent to a user when she/he has a new notification; however, this may be disabled from a user's profile.

Users may use the search form in the header to search for other users of Odinbook. Results are displayed in a specialized page with infinite scroll.

Overall, Odinbook is made to have a close look to Facebook (obviously, with less content and features). To achieve this, styling was done without external styling frameworks (except for jQuery UI dialog modal used to replace the default browser confirmation dialog).

A little unobtrusive Javascript is also used to

• replace pagination with infinite scroll
• shrink and expand the textarea used to make posts
• show a post's comment link and focus on the post's comment input when that comment link is clicked
• limit comments displayed for a post initially to 4 and show all comments for the post when the 'View more comments' link is clicked.

If you've made it through reading all this, congratulation...now you really should head over to Odinbook.