morajabi / tello Goto Github PK

It's live! Check it out: https://tello.tv

I created Tello because I was sick of hunting for TV shows. I wanted a tool that would show me which of my favourite shows had new episodes.

There are a lot of things Tello doesn't do. It doesn't tell you how to find the TV show, nor whether it's available on Netflix or Hulu. It doesn't recommend similar shows you may enjoy. It doesn't tell you what your friends are watching, or offer social integrations so you can discuss what you're watching.

This started as a simple limitation of resources: Tello is an evenings-and-weekends side project, and so the scope had to be quite narrow.

Ultimately, though, I feel like that limitation is a feature. The core competency is all about helping you figure out, when you sit down on the couch after work, what's next in your backlog. I think it succeeds quite well at this :)

Tello uses React/Redux on the front-end, and Node/Express on the back-end, persisting data in MongoDB.

It's a single-page app, and the back-end is really just a thin layer around the database, with authentication. 90% of the logic lives on the client.

I experimented quite a bit with different React patterns in this project, and some of them are pretty neat! Some of the highlights:

Because of React Router 4's dynamic routes, you can do neat things, like make responsive routes. This means that routes update when the window size changes. See:

• A MediaQuery helper, using function-as-children, and
• The AppRoutes that use the prop to render routes accordingly.

Also, dynamic routes allow for this neat abstraction to create an AuthenticatedRoute component

The logged-out homepage has floating, self-drawing particles. This is a combination of:

• Particle (for the SVG drawing), and
• Drift (for the floating).

I've been a fan of abstracting behavior into components. Here are a couple examples:

• Dead-simple Hover component using children-as-function
• HideOn selectively renders based on a device type.

React components can manage all kinds of window-level stuff, like scrolling:

• ScrollDisabler is a behavioral component which removes the ability to scroll. Useful for when modals are open, to prevent background scrolling.
• Scrollbars styles the main body scrollbars. This is how Tello has the neon pink scrollbars on Webkit browsers!

If you use Tello, please don't be shy; let me know what you think!