Introduction

In order to facilitate the development of this React PWA, I’ll be doing my best to go through the following design process. I’m also currently writing this post after already completing this project, so the process may have differed from what I’ve shown, but only since this was my first experience with ReactJS and was still learning its ins and outs as I was going :)

Development Process

  1. Define purpose, description, and goals of the project
  2. Draw out wireframe and user flow of project
  3. Create HTML Mockup of the site
  4. Draw out ReactDOM graph of the site and define the following
    • Changing state values and where they live
    • Where to define functions and propagate downward towards
  5. Initialize the React Project
  6. Create the necessary React Components
  7. Add functions and functionality to React Components
    • Start with importing a local JSON file for data and transition towards querying the API last
  8. Add more styling, transitions, and animations to application

Purpose/Functions

  1. “Star” shows and get notifications when new episodes for a show is aired
  2. Browse shows and their descriptions airing in the current season and sort them by their rating and stats
  3. Search and browse for shows using text search and genre filters

Wireframing

WireFrame

Static HTML Mock-Up

MockUp :)