Code Monkey home page Code Monkey logo

pennymac's Introduction

PennyMac React coding test

Ken McKaba

[email protected]

I attempted to utilize, for the first time, Chakra-UI for styling.

It is a popular CSS-in-JS component library that makes styling React apps with accessibility, responsiveness, custom themes and light/dark modes.

I've been wanting to try it so I studied the Chakra docs for a while, felt confident, and decided to use it in this effort, hoping to impress myself and you.

Unfortunately it did slow me down significantly and I did not complete everthing I wanted to implement in spite of spending more like 6 hours.

My app has the show search capabilities but does not show episodes. I added a modal if you click a show in the list.

I added some extra controls to demonstrate and test some of the Chakra features, such as changing light/dark modes and other features. Dark mode needs work.

I would have done more refactoring (SearchBox is too big) and added unit tests using Jest and react-testing-utils. The responsiveness needs work.

I, of course, realize now that starting a timed coding test with a new technology was risky. In my experience when picking up new tools and technologies 1 or 2 people should spend the time to master it, then present the subject, and a working model, to the rest of the team and stakeholders.

If I could start this coding test knowing what I now know of Chakra-UI, I'm confident I would have all the features including responsiveness for phones, tablets and desktop, light/dark modes, etc.

I'm grateful for the opportunity to interview and try the test. I hope you can find a spot for me there where I can help you out.

Thanks! Ken

pennymac's People

Contributors

kenmckaba avatar mend-for-github-com[bot] avatar

pennymac's Issues

CVE-2021-23362 (Medium) detected in hosted-git-info-2.8.8.tgz

CVE-2021-23362 - Medium Severity Vulnerability

Vulnerable Library - hosted-git-info-2.8.8.tgz

Provides metadata and conversions from repository urls for Github, Bitbucket and Gitlab

Library home page: https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.8.tgz

Path to dependency file: pennymac/package.json

Path to vulnerable library: pennymac/node_modules/hosted-git-info/package.json

Dependency Hierarchy:

  • eslint-plugin-import-2.22.1.tgz (Root Library)
    • read-pkg-up-2.0.0.tgz
      • read-pkg-2.0.0.tgz
        • normalize-package-data-2.5.0.tgz
          • ❌ hosted-git-info-2.8.8.tgz (Vulnerable Library)

Found in HEAD commit: d33675ecd0f5a24646b4d8196bba978b568b00da

Found in base branch: master

Vulnerability Details

The package hosted-git-info before 3.0.8 are vulnerable to Regular Expression Denial of Service (ReDoS) via regular expression shortcutMatch in the fromUrl function in index.js. The affected regular expression exhibits polynomial worst-case time complexity.

Publish Date: 2021-03-23

URL: CVE-2021-23362

CVSS 3 Score Details (5.3)

Base Score Metrics:

  • Exploitability Metrics:
    • Attack Vector: Network
    • Attack Complexity: Low
    • Privileges Required: None
    • User Interaction: None
    • Scope: Unchanged
  • Impact Metrics:
    • Confidentiality Impact: None
    • Integrity Impact: None
    • Availability Impact: Low

For more information on CVSS3 Scores, click here.

Suggested Fix

Type: Upgrade version

Origin: https://github.com/npm/hosted-git-info/releases/tag/v3.0.8

Release Date: 2021-03-23

Fix Resolution: hosted-git-info - 3.0.8

CVE-2021-23368 (Medium) detected in multiple libraries

CVE-2021-23368 - Medium Severity Vulnerability

Vulnerable Libraries - postcss-8.2.8.tgz, postcss-7.0.21.tgz, postcss-7.0.35.tgz

postcss-8.2.8.tgz

Tool for transforming styles with JS plugins

Library home page: https://registry.npmjs.org/postcss/-/postcss-8.2.8.tgz

Path to dependency file: pennymac/package.json

Path to vulnerable library: pennymac/node_modules/postcss-safe-parser/node_modules/postcss/package.json

Dependency Hierarchy:

  • react-scripts-4.0.3.tgz (Root Library)
    • postcss-safe-parser-5.0.2.tgz
      • ❌ postcss-8.2.8.tgz (Vulnerable Library)
postcss-7.0.21.tgz

Tool for transforming styles with JS plugins

Library home page: https://registry.npmjs.org/postcss/-/postcss-7.0.21.tgz

Path to dependency file: pennymac/package.json

Path to vulnerable library: pennymac/node_modules/resolve-url-loader/node_modules/postcss/package.json

Dependency Hierarchy:

  • react-scripts-4.0.3.tgz (Root Library)
    • resolve-url-loader-3.1.2.tgz
      • ❌ postcss-7.0.21.tgz (Vulnerable Library)
postcss-7.0.35.tgz

Tool for transforming styles with JS plugins

Library home page: https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz

Path to dependency file: pennymac/package.json

Path to vulnerable library: pennymac/node_modules/postcss/package.json

Dependency Hierarchy:

  • react-scripts-4.0.3.tgz (Root Library)
    • css-loader-4.3.0.tgz
      • ❌ postcss-7.0.35.tgz (Vulnerable Library)

Found in HEAD commit: d33675ecd0f5a24646b4d8196bba978b568b00da

Found in base branch: master

Vulnerability Details

The package postcss from 7.0.0 and before 8.2.10 are vulnerable to Regular Expression Denial of Service (ReDoS) during source map parsing.

Publish Date: 2021-04-12

URL: CVE-2021-23368

CVSS 3 Score Details (5.3)

Base Score Metrics:

  • Exploitability Metrics:
    • Attack Vector: Network
    • Attack Complexity: Low
    • Privileges Required: None
    • User Interaction: None
    • Scope: Unchanged
  • Impact Metrics:
    • Confidentiality Impact: None
    • Integrity Impact: None
    • Availability Impact: Low

For more information on CVSS3 Scores, click here.

Suggested Fix

Type: Upgrade version

Origin: https://cve.mitre.org/cgi-bin/cvename.cgi?name=CVE-2021-23368

Release Date: 2021-04-12

Fix Resolution: postcss -8.2.10

CVE-2021-23382 (Medium) detected in multiple libraries

CVE-2021-23382 - Medium Severity Vulnerability

Vulnerable Libraries - postcss-8.2.8.tgz, postcss-7.0.21.tgz, postcss-7.0.35.tgz

postcss-8.2.8.tgz

Tool for transforming styles with JS plugins

Library home page: https://registry.npmjs.org/postcss/-/postcss-8.2.8.tgz

Path to dependency file: pennymac/package.json

Path to vulnerable library: pennymac/node_modules/postcss-safe-parser/node_modules/postcss/package.json

Dependency Hierarchy:

  • react-scripts-4.0.3.tgz (Root Library)
    • postcss-safe-parser-5.0.2.tgz
      • ❌ postcss-8.2.8.tgz (Vulnerable Library)
postcss-7.0.21.tgz

Tool for transforming styles with JS plugins

Library home page: https://registry.npmjs.org/postcss/-/postcss-7.0.21.tgz

Path to dependency file: pennymac/package.json

Path to vulnerable library: pennymac/node_modules/resolve-url-loader/node_modules/postcss/package.json

Dependency Hierarchy:

  • react-scripts-4.0.3.tgz (Root Library)
    • resolve-url-loader-3.1.2.tgz
      • ❌ postcss-7.0.21.tgz (Vulnerable Library)
postcss-7.0.35.tgz

Tool for transforming styles with JS plugins

Library home page: https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz

Path to dependency file: pennymac/package.json

Path to vulnerable library: pennymac/node_modules/postcss/package.json

Dependency Hierarchy:

  • react-scripts-4.0.3.tgz (Root Library)
    • css-loader-4.3.0.tgz
      • ❌ postcss-7.0.35.tgz (Vulnerable Library)

Found in HEAD commit: d33675ecd0f5a24646b4d8196bba978b568b00da

Found in base branch: master

Vulnerability Details

The package postcss before 8.2.13 are vulnerable to Regular Expression Denial of Service (ReDoS) via getAnnotationURL() and loadAnnotation() in lib/previous-map.js. The vulnerable regexes are caused mainly by the sub-pattern /*\s* sourceMappingURL=(.*).

Publish Date: 2021-04-26

URL: CVE-2021-23382

CVSS 3 Score Details (5.3)

Base Score Metrics:

  • Exploitability Metrics:
    • Attack Vector: Network
    • Attack Complexity: Low
    • Privileges Required: None
    • User Interaction: None
    • Scope: Unchanged
  • Impact Metrics:
    • Confidentiality Impact: None
    • Integrity Impact: None
    • Availability Impact: Low

For more information on CVSS3 Scores, click here.

Suggested Fix

Type: Upgrade version

Origin: https://cve.mitre.org/cgi-bin/cvename.cgi?name=CVE-2021-23382

Release Date: 2021-04-26

Fix Resolution: postcss - 8.2.13

CVE-2021-28092 (High) detected in is-svg-3.0.0.tgz

CVE-2021-28092 - High Severity Vulnerability

Vulnerable Library - is-svg-3.0.0.tgz

Check if a string or buffer is SVG

Library home page: https://registry.npmjs.org/is-svg/-/is-svg-3.0.0.tgz

Path to dependency file: pennymac/package.json

Path to vulnerable library: pennymac/node_modules/is-svg/package.json

Dependency Hierarchy:

  • react-scripts-4.0.3.tgz (Root Library)
    • optimize-css-assets-webpack-plugin-5.0.4.tgz
      • cssnano-4.1.10.tgz
        • cssnano-preset-default-4.0.7.tgz
          • postcss-svgo-4.0.2.tgz
            • ❌ is-svg-3.0.0.tgz (Vulnerable Library)

Found in HEAD commit: d33675ecd0f5a24646b4d8196bba978b568b00da

Found in base branch: master

Vulnerability Details

The is-svg package 2.1.0 through 4.2.1 for Node.js uses a regular expression that is vulnerable to Regular Expression Denial of Service (ReDoS). If an attacker provides a malicious string, is-svg will get stuck processing the input for a very long time.

Publish Date: 2021-03-12

URL: CVE-2021-28092

CVSS 3 Score Details (7.5)

Base Score Metrics:

  • Exploitability Metrics:
    • Attack Vector: Network
    • Attack Complexity: Low
    • Privileges Required: None
    • User Interaction: None
    • Scope: Unchanged
  • Impact Metrics:
    • Confidentiality Impact: None
    • Integrity Impact: None
    • Availability Impact: High

For more information on CVSS3 Scores, click here.

Suggested Fix

Type: Upgrade version

Origin: https://cve.mitre.org/cgi-bin/cvename.cgi?name=CVE-2021-28092

Release Date: 2021-03-12

Fix Resolution: v4.2.2

CVE-2021-27290 (High) detected in ssri-6.0.1.tgz

CVE-2021-27290 - High Severity Vulnerability

Vulnerable Library - ssri-6.0.1.tgz

Standard Subresource Integrity library -- parses, serializes, generates, and verifies integrity metadata according to the SRI spec.

Library home page: https://registry.npmjs.org/ssri/-/ssri-6.0.1.tgz

Path to dependency file: pennymac/package.json

Path to vulnerable library: pennymac/node_modules/webpack/node_modules/ssri/package.json

Dependency Hierarchy:

  • react-scripts-4.0.3.tgz (Root Library)
    • webpack-4.44.2.tgz
      • terser-webpack-plugin-1.4.5.tgz
        • cacache-12.0.4.tgz
          • ❌ ssri-6.0.1.tgz (Vulnerable Library)

Found in HEAD commit: d33675ecd0f5a24646b4d8196bba978b568b00da

Found in base branch: master

Vulnerability Details

ssri 5.2.2-8.0.0, fixed in 8.0.1, processes SRIs using a regular expression which is vulnerable to a denial of service. Malicious SRIs could take an extremely long time to process, leading to denial of service. This issue only affects consumers using the strict option.

Publish Date: 2021-03-12

URL: CVE-2021-27290

CVSS 3 Score Details (7.5)

Base Score Metrics:

  • Exploitability Metrics:
    • Attack Vector: Network
    • Attack Complexity: Low
    • Privileges Required: None
    • User Interaction: None
    • Scope: Unchanged
  • Impact Metrics:
    • Confidentiality Impact: None
    • Integrity Impact: None
    • Availability Impact: High

For more information on CVSS3 Scores, click here.

Suggested Fix

Type: Upgrade version

Origin: https://cve.mitre.org/cgi-bin/cvename.cgi?name=CVE-2021-27290

Release Date: 2021-03-12

Fix Resolution: ssri - 6.0.2,8.0.1

CVE-2021-23364 (Medium) detected in browserslist-4.14.2.tgz, browserslist-4.16.3.tgz

CVE-2021-23364 - Medium Severity Vulnerability

Vulnerable Libraries - browserslist-4.14.2.tgz, browserslist-4.16.3.tgz

browserslist-4.14.2.tgz

Share target browsers between different front-end tools, like Autoprefixer, Stylelint and babel-env-preset

Library home page: https://registry.npmjs.org/browserslist/-/browserslist-4.14.2.tgz

Path to dependency file: pennymac/package.json

Path to vulnerable library: pennymac/node_modules/react-dev-utils/node_modules/browserslist/package.json

Dependency Hierarchy:

  • react-scripts-4.0.3.tgz (Root Library)
    • react-dev-utils-11.0.4.tgz
      • ❌ browserslist-4.14.2.tgz (Vulnerable Library)
browserslist-4.16.3.tgz

Share target browsers between different front-end tools, like Autoprefixer, Stylelint and babel-env-preset

Library home page: https://registry.npmjs.org/browserslist/-/browserslist-4.16.3.tgz

Path to dependency file: pennymac/package.json

Path to vulnerable library: pennymac/node_modules/browserslist/package.json

Dependency Hierarchy:

  • react-scripts-4.0.3.tgz (Root Library)
    • postcss-normalize-8.0.1.tgz
      • ❌ browserslist-4.16.3.tgz (Vulnerable Library)

Found in HEAD commit: d33675ecd0f5a24646b4d8196bba978b568b00da

Found in base branch: master

Vulnerability Details

The package browserslist from 4.0.0 and before 4.16.5 are vulnerable to Regular Expression Denial of Service (ReDoS) during parsing of queries.

Publish Date: 2021-04-28

URL: CVE-2021-23364

CVSS 3 Score Details (5.3)

Base Score Metrics:

  • Exploitability Metrics:
    • Attack Vector: Network
    • Attack Complexity: Low
    • Privileges Required: None
    • User Interaction: None
    • Scope: Unchanged
  • Impact Metrics:
    • Confidentiality Impact: None
    • Integrity Impact: None
    • Availability Impact: Low

For more information on CVSS3 Scores, click here.

Suggested Fix

Type: Upgrade version

Origin: https://cve.mitre.org/cgi-bin/cvename.cgi?name=CVE-2021-23364

Release Date: 2021-04-28

Fix Resolution: browserslist - 4.16.5

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.