Skip to content

Latest commit

 

History

History
42 lines (32 loc) · 1.48 KB

README.md

File metadata and controls

42 lines (32 loc) · 1.48 KB

Smartmon Product Overview Page POC

Smartmon product overview page demo, GIF image

Prerequisite environment

  • npm: 10.8.2
  • node: 20.18.0

Run a Smartmon Product Overview Page POC

  1. Install dependencies.
npm i
  1. Run the development server & browse components in Storybook:
npm run dev
npm run storybook
  1. Open http://localhost:5173 for product preview in localhost with your browser to see the result. Open http://localhost:6006 to browse components in Storybook.
  • src/api/poke-api.ts is the endpoint related interactions from PokeAPI.
  • src/components/pokemon-list.ts is the pokemon list component. (With type filter function.)
  • src/stories/pokemon-list.stories.ts is the Storybook story for pokemon list.

Warning

Style is not implemented to due to the time measurement for this coding challenge task. Also, I made a decision of prioritizing the feature implementation for demonstrating technical skills to the client for presentation.

Requirements Achievement

  • Use lit-ts template
  • Use Storybook
  • Use Lit
  • Use PokeAPI to fetch monster info
  • Display all fetched monsters visually to insist as the most important component
  • Monster type filter function (i.e. fire, water, earth, etc)

Future Improvements

  • Styling
  • Clean up stories from default template
  • Component reusability planning (in-depth)