Skip to main content

NPM Package comparator

Description​

Web Application to compare and recommend the best npm package for a keyword.

Mockups​

Tap into the Figma link for a comprehensive view of project mockups and UI design.

Requirements​

Search Box to search and compare the npm packages.

  • User should be able to search and select one package independently. Search mock for package suggestions
  • User should be able to see suggestions of packages once user writes any of the input. Search mock for package suggestions
  • User shouldn't be able to select more than 2 packages. Search mock for package suggestions
  • User should be allow to compare only once user entered two packages.. Search mock for package suggestions

Recommender​

User should be able to see the recommendation among both packages based on the comparison results.

  • There should be a comparison table for both the packages.
  • User should also be able to see downloads comparison.
  • After comparison details, user should be able to see final recommendation between two packages based on package downloads,tests,carefulness and community interest .
  • Recommendation decision should follow this percentage(20 % community interest,50% downloads,30 % tests and carefulness)
  • User should be able to see languages used in the package. Search mock for Recommendation

Success metrics​

  • A complete UI of the application build using React having good UX
  • Follow best practices for React and Typescript
  • Integrate npm/github api
  • Analyze the package by comparing their key data points.
  • Deploy the app on vercel

Stretched goals​

  • Add unit tests
  • Add integration tests
  • Mobile Screen Resposiveness

Tech Stack​

  • React
  • Typescript
  • Ant Design (optional but recommended)
  • Ant Design Charts
  • CSS

API to use​

Due Period​

  • Assignment should be submitted around 3-4 working days.

Submission Guidelines​

  • Must create a separate review branch for implementing suggestions.