/rn-tv-series

Exposes all TV series in a React Native app. Show a list of everything, details, etc.

Primary LanguageTypeScript

(RN) TV Series

An app made in React Native, that exposes all TV series.

Screenshots
Screen Shot 2022-08-17 at 18 01 11 Screen Shot 2022-08-17 at 18 01 49 Screen Shot 2022-08-17 at 18 01 59
Screen Shot 2022-08-17 at 18 02 09 Screen Shot 2022-08-17 at 18 02 16

Getting started

For running this, it's super straightforward and easy.

First, clone the project

$ git clone git@github.com:IgorMing/rn-tv-series.git

move into the project folder, and install the npm dependencies

$ yarn

# or npm i

then, we're just ready for running it on the android platform.

Let's start the bundle

$ yarn start

You can easily reach it by

$ yarn android

or as I do, which is by the Android Studio. Opening it by the android folder, and using the AVD from it.

Workflow

  • create a bare RN project
  • spike out the api
  • fetch the list of shows and show the basic into the screen
  • add more details on each list's card
  • configure navigation
  • integrate the navigation library with the UI Kitten's navigation's approach
  • add search UI
  • handle the search text with debounce
  • request the proper endpoint to get the correct data after searching
  • create component for empty results
  • create show details screen
  • add episode's list to details screen
  • create new screen for showing episode details

Extras

  • list with infinite loading behavior

  • Hero animation after clicking onto an item on the list (with react navigation shared elements library)

    • As you can see below, I've implemented the hero animations through screen's navigations, but unforunately the lib mentioned uses the @react-navigation/stack, instead of the @react-navigation/native-stack, as I was using for the development. That contains the necessary implementation for the search that I've implemented, so for that reason, I decided to rid the animation out from the project. If you'd like to see this implementation, here's the commit
hero.mov

Decisions while working

  • State Management

    • I've decided to keep it simple, just using custom hooks + context API (if needed) for sharing the data.
    • Of course I know the importance of an usage of a third part library for managing this, but I think it's better applicable for bigger applications. (in other words: If the problem is simple, the solution might be simple as well)
    • On the second day, while working with the api queries, filtered data, etc, noticed that maybe I could add redux or recoil for managing data. But I think still worth keep going with ephemeral state in a custom hook.

  • CSS

    • Just wondered if I might add styled-components, but I think it's not necessary

  • Code organization

    • I've decided to keep styles, interfaces/types and component in the same file, for making easier to find where everything is placed

  • Debounce

    • For debounce, I tried lodash.debounce first, but after couple problems in the codebase using it and spiking out a hook for caring about that, I decided to install the use-debounce library.

Informative

  • Considering that the challange doc's title is "Android challenge", I put all my attention on the Android build. Of course it does work in both platforms, but maybe in iOS we could find some minor UI issues.

  • I paid attention to the summary field (into Details screen) . Removing its HTML tag fields.