/swapi-ts-react-app

Primary LanguageTypeScript

miniproject

Screen Design

Setup

cd ./app
yarn install

Development

cd ./app

The React Storybook is a UI test harness to isolate and develop components within. To start it run the script:

yarn run ui

NOTE: There is currently a temporary issue with the StoryBook running in Safari.

To build the Typescript in the background run the transpiler in watch mode:

yarn run build:watch

This builds the Typescript into ES5 within the /lib folder. It's these built resources which in turn Storybook is watching and hot reloading.

The running Storybook development environment should look like this:

Storybook

Technical Brief

  • Language

    • TypeScript -
      • Configuration already setup, see the /app folder.
      • NOTE VSCode has extremely good support for TypeScript.

  • View

    • React
    • Components isolated and decomposed into Storybook (this is a major deal - and the discussion around your development approach will center alot around how you tackle this)
    • Final site served to browser (your call on how you want to do this, but create-react-app or the typescript fork of it will save you a ton of time mucking around with Webpack. This project is not that interested in how well you can wrangle Webpack, more on how you design and write code).

  • Style

    • Inline styles (Glamor) - installed as part of configuration.
    • Use Flexbox where appropriate.

  • State management

    • You choose, it may be as simple as setState within React, or alternatively Redux or Mobx.

  • Github

Design Brief

Callouts

Behavior

  • The CategoryList in the left-hand IndexPanel changes the visual state in the main ContentPanel
  • The ContentPanel loads a list of items retrieved from the SWAPI.
    • Your call on how you do this, either totally client side, via your server.
    • There is a GraphQL version of this API too, but dont' get bogged down on GraphQL yet unless you want to explore that. If so, reach out and we can chat.
  • This design avoids any overly complex or fiddly UI component development, but is complex enough to require you to do something with state (namely the selected index panel item).
  • Extra points if you do something smart with the delay when calling out to the external API (eg. a spinner of some kind).

View

  • All images to construct this design can be found in /assets.
  • The web-font used is Roboto, weights Regular (400) and Black (900).
  • Other details in callouts in the image above, and jump on the Slack channel and chat with me!!!