## front end

==================================================
```
  ### components and userstory

    `/landing` landing site
        -> <Landing />
        ** users should be informed what does the app do ( about section )

         `/landing/local`
        ** users should be able to sign up locally (signUp form)
        -> <LocalSignUpForm />:
                (front end validation)                   (back end validation)
            if fields were entered correctly -> send user info to server -> passport local -> passport jwt-> go to '/dashboard'
            if fileds were entered incorrectly -> show error -> auto focus error fields

        `/landing/login`
        ** users should be able to log in (login form)
          -> <LoginForm />:
                 (front end validation)                   (back end validation)
            if fields were entered corectly -> find user in database -> pass data to passport jwt strategy(token) -> go to '/dashboard'
            if fileds were entered incorrectly -> show error -> auto focus error fields

  ================================================================================================

  `/:id/dashboard` main page
      ** users should not be able to visit this page if not authorized( Redirect HOC)
        -> <Redirect /> HOC:
          if authorized: grant permission to stay on this page
          if unauthorized: redirect to '/login'
      ** (extension) users should see his/her activity chart over days , weeks. months
      ** users should see current training
        -> new user: no report -> init a new set training
        -> returned user: display question
        *** click the module to redirect to '/trainning/:id
      ** users should see favorate collections
      -> <FavorCollection />
      *** users should allow to add his/her own comment on each card
      *** users should allow to unfavor

================================================================================================

`/:id/trainning `
  ** users should be able to start out new training programs as first time users
  ** users should be able to continue off where he left last time or opt to reset progress
    -> <InteractiveTraining />
`/:id/training/report`
  ** upon completing training users were given report on words they feel easy, moderately challange, struggling with.
  ** users should be able to save the words so they can revisit whenever they want.
      ->  <Report />

============================================================================

  ### component hierachy
   <Landing />
        <NavBar />
        <About>
        <Route
          path = '/:id/local'
          component = <LocalSignUp />
         />
        <Route
          path = '/:id/login'
          component = {Login}
        />
   <Redirect component = <Dashboard /> />
        <NavBar />
        <FavorateCollection />
            <Card mode="onShow" word = {} comment={} />
               ** (extension ) click speak button will hear pronounciation using  api call to google translate api
        <HUD />
        ***(extension)<activity chart />
   <Trainning />
      <Card mode="onTrain"/>

  ### redux state, action and reducer
    ** favorReducer
      loading: false,
      error:null
      collections:[],
      currentCard: {object},
      addComment:false

    ** trainningReducer
      loading: false,
      error:null,
      currentQuestion: String,
      userInput: String,
      currentAnwser: String
      reports:[]

    `