Code Monkey home page Code Monkey logo

tello's Introduction

A simple and delightful way to track and manage TV shows.

Product screenshots

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


Motivation and Purpose

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 :)

Technical Info and Cool React Patterns

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:

Dynamic and Responsive Routing

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

Particle Animations

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

Behavior Components

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.
Scrolling

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!

Interested in hearing more about any of these patterns? I'd love to discuss / write a blog post about them, just let me know :)


Thanks!

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

tello's People

Contributors

joshwcomeau avatar morajabi avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

tello's Issues

Favourites

On my personal account, I'm up to about 30 shows. I don't care about all these shows equally.

It'd be good to be able to mark shows as favourites, and then filter out non-favourites, to reduce the number of shows in the queue.

Email signup

Several folks have requested email signup.

Truthfully, I don't think I will have the time/energy to build this feature - auth is hard, and I like being able to delegate it to Google.

One potential solution suggested by a user is to use an email unlock, like Medium does. So you'd enter your email, it sends you a link, clicking on it creates your account and remembers you. You can also log in again with the same method. No passwords required.

But yeah, even with that, it seems like an awful lot of trouble for something most folks don't need. So, if anyone else wants to build it, I'm absolutely willing to accept PRs. Otherwise, it's not likely to be built.

Auto-watch old episodes

Some of my favorite shows are long-running ones (like NCIS), that have over a hundred episodes in the backlog. I'd like to be able to click on the latest episode I've seen and automatically have every older episode marked as watched, so I don't have to manually click hundreds of older episodes.

Optimize and Improve SEO

Currently, Tello looks like this on Google:
screen shot 2017-10-19 at 10 51 29 pm

We need to add a bunch of more meta tags (description and maybe og:XXX, twitter:XXX metas?).

I know @joshwcomeau doesn't have the time to do this, but as he said in other issues, PRs welcome!

Can't log out

Looks like I broke logout recently :( you'll have to clear cookies and localStorage for now.

Fix upcoming!

Track show progress

If we could add what episodes we finished, then this tool would be awesome.

For example, Iโ€™m on Mr. Robot Season 2 Episode 3 right now. If this shows up on my dashboard on the website, I can easily track all my shows. Could we have this feature?

Remember route on return visits

I've received feedback that the "Summary" view doesn't really make sense as the "main" view; the "Backlog" is much more suited to quickly checking what's available to watch.

I agree with this! But I also think there's something really nice about the summary view. It's like looking at your bookcase and appreciating all the stuff in it. I like it as a landing page.

I think one easy compromise is to rehydrate the last route. So if you close Tello on the backlog, when you return, that's the tab that will be selected by default.

Shows with no airdate are treated as "aired"

Sometimes, TV Maze returns shows with no airstamp.

My selectors assume any date not in the future is aired, which means null gets turned into the Unix epoch, and it thinks the episodes are super old.

Thanks!

Always enjoy looking through your OSS projects for new patterns and ideas. Thanks for linking directly into good examples

๐Ÿ™

Missing config file aws.json

Hey Josh! First of all, thanks a lot for sharing this project, it really looks interesting. I was hoping to give it a run, but when starting the server I get this:

fs.js:640
  return binding.open(pathModule._makeLong(path), stringToFlags(flags), mode);
                 ^

Error: ENOENT: no such file or directory, open './server/config/aws.json'
    at Error (native)
    at Object.fs.openSync (fs.js:640:18)
    at Object.fs.readFileSync (fs.js:508:33)
    at Object.readFileSync (/Users/luisnomad/Projects/Tello/node_modules/aws-sdk/lib/util.js:97:26)
    at Config.loadFromPath (/Users/luisnomad/Projects/Tello/node_modules/aws-sdk/lib/config.js:407:39)
    at Object.<anonymous> (/Users/luisnomad/Projects/Tello/server/helpers/image.helpers.js:12:12)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/luisnomad/Projects/Tello/server/models/User.model.js:5:50)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
[nodemon] app crashed - waiting for file changes before starting...

Since there's no installation guide, I assume there's a step/pre-requisite I am missing, right?

Thanks again!

Caching strategy

Right now, I'm accessing episode info straight from the TV Maze API. This means if you have 50 shows, on page-load I make 50 requests to TV Maze.

This is clearly not ideal, and it will likely upset the TV Maze folks if Tello continues to see actual usage.

My idea is fairly straightforward. I should add a new Mongo collection of show info, with episodes. This would be global, not connected to a specific user.

When a show is added, I check to see if the show exists. If it doesn't, I fetch it from TV Maze, and store the results in my database.

I'll need a cron job to run every night at midnight, and delete the entire collection. So the first request for a given show fetches it from TV Maze, but subsequent requests that day use the Mongo "cache".

But yeah, this is a lot of work, so I'm hesitant to do it until I need to.

Mixed Content Error

In Chrome Version 61.0.3163.100:

Console error for mixed content.

Mixed Content: The page at 'https://tello.tv/app' was loaded over HTTPS, but requested an insecure image 'http://static.tvmaze.com/uploads/images/original_untouched/120/300071.jpg?fit=crop&crop=entropy&h=96&w=334&auto=enhance&dpr=2'. This request has been blocked; the content must be served over HTTPS.

Same error for following two images:

http://static.tvmaze.com/uploads/images/original_untouched/124/311372.jpg?fit=crop&crop=entropy&h=96&w=334&auto=enhance&dpr=2

http://static.tvmaze.com/uploads/images/original_untouched/129/324431.jpg?fit=crop&crop=entropy&h=96&w=334&auto=enhance&dpr=2

image

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.