Reddit API Front-End on React

Good morning everyone,

Reddit is an American social news aggregation, web content rating, and discussion website.

And it opens a cool API to engineer your own front-end.

So here comes my take on it : http://reddit.webmaestro.fr.

It basically fetches JSON data, parses image and video sources, embedded players or templated content and turns it into optimized React components. The design is minimalistic and based entirely on Semantic UI.

With iframes, video players and heavy GIFs mixing over infinite scrolling, the main idea was to mount and unmount components depending on their visibility. And it was just too easy with react-lazyload.

I had some fun setting the volume of videos in relation to their position on the viewport. It works pretty well, try it out !

When deploying React Router builds without a backend, a .htaccess file can delegate all the routing logic to our index.html.

<IfModule mod_rewrite.c>
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
</IfModule>

Slide Up and Down with React Transition Group

Some UI effects are very simple, yet difficult to achieve. I already solved the vertical slide dilemma with jQuery, but I needed to implement it for React Transition Group.

When items are entering a list, we want them to fade in and smoothly slide the surrounding elements away, instead of brutally shifting our interface.

Transitions work by easing from one initial value to an other defined one. The problem with vertical sliding is that most HTML element containers do not have a predefined height, but rather auto adapt this value to fit the content. Therefor, it is quite tricky to animate the entrance of randomly sized blocks without jumping stroboscopically into the margin, padding and box-sizing soup.

My approach is to use the CSSTransition component callbacks to animate a negative margin and slide our items from the top.

The code is available on GitHub.