T.I.N.T. is a micro-blogging platform app in the vein of Tumblr, with similar core functionality and a few re-skinning twists. The back-end foundation consists of the Rails framework with a Postgresql database, and the frontend is built with the React-Redux implementation of the flux coding paradigm.
One of the key features of Tumblr implemented here is the use of kinds
of post with differential displays for each kind. Since a lot of the
core functionality of a post is shared across all kinds of posts (ie.
has a user_id, some form of text content, probably a piece of media),
a single post table contains all of the data for the various posts,
which are then differentiated with an entry in the post_type column.
As the text style of post in Tumblr, also has the ability to contain
various media types, a media_type column is implemented to differentially
render whichever kind of media is has been input by the user. This allows
for a media switcher function to process what link or media attached to a
post is meant to be displayed as:
mediaSwitcher(){
switch (this.props.post.media_type) {
case "image":
return (
<img id="media" src={this.props.post.media_link} />
)
case "video":
return (this.props.post.media_link.indexOf('youtube') > -1 ) ? (
<iframe id="media" src={this.props.post.media_link} allowFullScreen></iframe>
) : (
<video id="media" controls>
<source src={this.props.post.media_link} />
</video>
)
case "audio":
return (
<audio controls src={this.props.post.media_link} />
)
default:
return "";
}
}It is also worth noting that having a single set of information common to all post types allows for a single container to hold all of the necessary information from the store which can then be passed via a base post element to the correct type of React component for the type of post, allowing for a modular structure that can accommodate additional post types or modification of existing structures more easily than separate containers and components for every possible post type. Similarly, all post forms receive their props from their own universal container, and switch between create vs. edit properties based on the url location from which they render.
The reblog feature has some of the same challenges as the textpost in that it by necessity has various kinds of information in it from its parent post in addition to the comment potentially added by the user, which also would need to be viewed during post creation. This is addressed by abstracting the content display logic from within the various other post types and integrating it into the post form with a similar content switch function, and then by saving the reblog with all the same info from its parent in the database and appending added comments to the comment column in progress. Displaying similarly uses the borrowed display logic for the original post and then appends the comments to the end.
The home feed consists of a series of reduced-sized posts ordered into columns by a bricks.js masonry layout. The plugin allows you to specify the number of columns to be displayed at various breakpoints of screen width and dynamically adjust the display as elements are added or as screen dimensions change.
The current user feed by contrast shows only posts from users followed by the current user at a greater size. Follows are stored in their own join table relating a follwer and followee. In the event a user unfollows a user from their feed page, that user's posts are immediately removed from the feed and on subsequent visits are not added to the feed.
Below are the next steps in further implementing Tumblr-esque functionality:
Tumblr also has the ability to view blogs by individual users, featuring their posts and reblogs.
Post page would show the content of the post in question as well as list the users who have liked or reblogged the post.
Allow the home and user feeds to hold an initial count of posts and then fetch more as the user approaches the bottom of the list.