Git Product home page Git Product logo

rn-tvmaze's Introduction

TVMaze assignment

Requirements

  • Should work on both ​Android and iOS.
  • Should give the end user feedback concerning errors or very slow internet connection
  • Should have at least two screens, one for the detailed information about the series and one for the search and result
  • Must contain documentation about how to run the application in a simple manner
  • Should be written using Typescript

Nice-To-Have Requirements

  • Create a favorite shows list
  • Persistence, store the API response data and read it for repeated requests. Even when offline.
    • API responses are chached locally for repeated requested
    • API repsonses are persisted accross restarts
    • Favourites are persisted accross restarts
  • Endless scroll or pagination

Run App

  • Make sure you have setup the React Native enviroment: Setting up the development environment · React Native
  • npm install the dependencies (add the --legacy-peer-deps flags if encountering conflicting peer dependencies)
  • npx pod-install ios to install cocoapods (ios only)
  • npx react-native run-ios to run iOS app
  • npx react-native run-android to run andoird app

Comments

  • I intentionally chose inline styling over React Native's Stylesheet API because I personally find colocating styles with React elements easier to work with in small components. I know that this is a polarizing topic :)
  • If have setup an event listener for connection state in App.tsx by using @react-native-community/netinfo. It is supposed to show a react-native-flash-message upon connection loss (and hide that message again when the connection has been re-established). Unfortunatly the events did not fire as expected when testing in the simulator. I have not spent any time debugging this. Might be related to this open issues: addEventListener not updated when connection change · Issue #573 · react-native-netinfo/react-native-netinfo

If more time

  • Debugging the @react-native-community/netinfo issue.
  • Show loading indicator first after an timeout to prevent flickering of the loading indicator when typing into the search bar
  • Integrate useSWR with @react-native-community/netinfo as described here
  • Uncompleted nice-to-haves

Screenshots

Search Shows Show Details Favourites Feature No Results Offline Indicator & Error Feedback

Android screenshots can be found here

rn-tvmaze's People

Contributors

thorbenandresen avatar

Watchers

 avatar

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.