/zemoga-fe-test

Primary LanguageTypeScript

Getting Started

Install dependencies

pnpm i

Run json-server and development server:

pnpm run dev

You can check the tests coverage by running:

pnpm run test --coverage

Possible improvements

  • Add a toast to show when an operation/interaction fails
    • Currently, if the server is not running or it fails, we can trigger the action to update the vote and to continue the flow - Thanks for your vote appears. That's my bad. I should've priotized it.
  • Reaching 100% of coverage testing
    • alt text
  • Add e2e testings

UI

Toggle view

  • Dropdown

Buttons

  • Vote now
  • Vote again
  • Thumbs up / down

People Card

  • Vote section
  • Name
  • Description
  • Gauge bar

People Card List

  • Vote section

  • Name

  • Description

  • Gauge bar

  • People List

Features

  • Get the data and map it into People List
  • Implement toggle view
  • Map people list for different visualizations/list view type
  • Map people list as Grid view for mobile devices - out at 768px
  • Implement thumbs up and down actions + revalidate
  • Implement Vote Now for confirming vote
  • Implement Vote again to reset button to default state

Unit testing

  • People list title renders
  • Toggle view component renders
  • Toggle view component has a value
  • Toggle view component is clickable
  • Toggle view component changes the value

People list

  • Renders
  • Renders all the cards

People Card

  • Renders
  • Render title and description
  • Render posted people days label
  • Render vote section
  • Render gauge bar
  • Renders the correct thumb up/down state based on the data

Voting

  • Thumbs up / down is clickable
  • Vote now is initially disabled
  • Vote now is enables after thumbs up / down is clicked
  • Vote again is clickable
  • Vote again resets to default state when clicked