├── .gitignore ├── CODE_OF_CONDUCT ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── package-lock.json ├── package.json ├── postcss.config.js ├── public ├── _redirects ├── dotPackages banner.png ├── favicon(2).png ├── index.html ├── manifest.json └── robots.txt ├── src ├── App.js ├── components │ ├── PackageDependencies.js │ └── PackageInfo.js ├── helpers │ ├── convertToObject.js │ ├── convert_date.js │ └── encodeGithubStats.js ├── index.css ├── index.js └── pages │ └── Home.js └── tailwind.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | # dependencies 2 | /node_modules 3 | /.pnp 4 | .pnp.js 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env.local 15 | .env.development.local 16 | .env.test.local 17 | .env.production.local 18 | 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT: -------------------------------------------------------------------------------- 1 | # Code of Conduct - dotPackages: GitHub Repository Explorer and Code Viewer 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as 6 | contributors and maintainers pledge to make participation in our project and 7 | our community a harassment-free experience for everyone, regardless of age, body 8 | size, disability, ethnicity, sex characteristics, gender identity and expression, 9 | level of experience, education, socio-economic status, nationality, personal 10 | appearance, race, religion, or sexual identity and orientation. 11 | 12 | ## Our Standards 13 | 14 | Examples of behavior that contributes to a positive environment for our 15 | community include: 16 | 17 | - Demonstrating empathy and kindness toward other people 18 | - Being respectful of differing opinions, viewpoints, and experiences 19 | - Giving and gracefully accepting constructive feedback 20 | - Accepting responsibility and apologizing to those affected by our mistakes, 21 | and learning from the experience 22 | - Focusing on what is best not just for us as individuals, but for the 23 | overall community 24 | 25 | Examples of unacceptable behavior include: 26 | 27 | - The use of sexualized language or imagery, and sexual attention or 28 | advances 29 | - Trolling, insulting or derogatory comments, and personal or political attacks 30 | - Public or private harassment 31 | - Publishing others' private information, such as a physical or email 32 | address, without their explicit permission 33 | - Other conduct which could reasonably be considered inappropriate in a 34 | professional setting 35 | 36 | ## Our Responsibilities 37 | 38 | Project maintainers are responsible for clarifying and enforcing our standards of 39 | acceptable behavior and will take appropriate and fair corrective action in 40 | response to any behavior that they deem inappropriate, 41 | threatening, offensive, or harmful. 42 | 43 | Project maintainers have the right and responsibility to remove, edit, or reject 44 | comments, commits, code, wiki edits, issues, and other contributions that are 45 | not aligned to this Code of Conduct, and will 46 | communicate reasons for moderation decisions when appropriate. 47 | 48 | ## Scope 49 | 50 | This Code of Conduct applies within all community spaces, and also applies when 51 | an individual is officially representing the community in public spaces. 52 | Examples of representing our community include using an official e-mail address, 53 | posting via an official social media account, or acting as an appointed 54 | representative at an online or offline event. 55 | 56 | ## Enforcement 57 | 58 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 59 | reported to the community leaders responsible for enforcement at <>. 60 | All complaints will be reviewed and investigated promptly and fairly. 61 | 62 | All community leaders are obligated to respect the privacy and security of the 63 | reporter of any incident. 64 | 65 | ## Enforcement Guidelines 66 | 67 | Community leaders will follow these Community Impact Guidelines in determining 68 | the consequences for any action they deem in violation of this Code of Conduct: 69 | 70 | ### 1. Correction 71 | 72 | **Community Impact**: Use of inappropriate language or other behavior deemed 73 | unprofessional or unwelcome in the community. 74 | 75 | **Consequence**: A private, written warning from community leaders, providing 76 | clarity around the nature of the violation and an explanation of why the 77 | behavior was inappropriate. A public apology may be requested. 78 | 79 | ### 2. Warning 80 | 81 | **Community Impact**: A violation through a single incident or series 82 | of actions. 83 | 84 | **Consequence**: A warning with consequences for continued behavior. No 85 | interaction with the people involved, including unsolicited interaction with 86 | those enforcing the Code of Conduct, for a specified period of time. This 87 | includes avoiding interactions in community spaces as well as external channels 88 | like social media. Violating these terms may lead to a temporary or 89 | permanent ban. 90 | 91 | ### 3. Temporary Ban 92 | 93 | **Community Impact**: A serious violation of community standards, including 94 | sustained inappropriate behavior. 95 | 96 | **Consequence**: A temporary ban from any sort of interaction or public 97 | communication with the community for a specified period of time. No public or 98 | private interaction with the people involved, including unsolicited interaction 99 | with those enforcing the Code of Conduct, is allowed during this period. 100 | Violating these terms may lead to a permanent ban. 101 | 102 | ### 4. Permanent Ban 103 | 104 | **Community Impact**: Demonstrating a pattern of violation of community 105 | standards, including sustained inappropriate behavior, harassment of an 106 | individual, or aggression toward or disparagement of classes of individuals. 107 | 108 | **Consequence**: A permanent ban from any sort of public interaction within 109 | the community. 110 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to dotPackages 2 | 3 | First off, thanks for taking the time to contribute! ❤️ 4 | 5 | All types of contributions are encouraged and valued. See the [Table of Contents](#table-of-contents) for different ways to help and details about how this project handles them. Please make sure to read the relevant section before making your contribution. It will make it a lot easier for us maintainers and smooth out the experience for all involved. The community looks forward to your contributions. 🎉 6 | 7 | > And if you like the project, but just don't have time to contribute, that's fine. There are other easy ways to support the project and show your appreciation, which we would also be very happy about: 8 | > 9 | > - Star the project 10 | > - Tweet about it 11 | > - Refer this project in your project's readme 12 | > - Mention the project at local meetups and tell your friends/colleagues 13 | 14 | ## Table of Contents 15 | 16 | - [Code of Conduct](#code-of-conduct) 17 | - [I Have a Question](#i-have-a-question) 18 | - [I Want To Contribute](#i-want-to-contribute) 19 | - [Reporting Bugs](#reporting-bugs) 20 | - [Suggesting Enhancements](#suggesting-enhancements) 21 | - [Your First Code Contribution](#your-first-code-contribution) 22 | - [Improving The Documentation](#improving-the-documentation) 23 | - [Styleguides](#styleguides) 24 | - [Commit Messages](#commit-messages) 25 | - [Join The Project Team](#join-the-project-team) 26 | 27 | ## Code of Conduct 28 | 29 | This project and everyone participating in it is governed by the 30 | [dotPackages Code of Conduct](https://github.com/pradeeptosarkar/dotpackages/blob/master/CODE_OF_CONDUCT.md). 31 | By participating, you are expected to uphold this code. Please report unacceptable behavior 32 | to <>. 33 | 34 | ## I Have a Question 35 | 36 | > If you want to ask a question, we assume that you have read the available [Documentation](). 37 | 38 | Before you ask a question, it is best to search for existing [Issues](https://github.com/pradeeptosarkar/dotpackages/issues) that might help you. In case you have found a suitable issue and still need clarification, you can write your question in this issue. It is also advisable to search the internet for answers first. 39 | 40 | If you then still feel the need to ask a question and need clarification, we recommend the following: 41 | 42 | - Open an [Issue](https://github.com/pradeeptosarkar/dotpackages/issues/new). 43 | - Provide as much context as you can about what you're running into. 44 | - Provide project and platform versions (nodejs, npm, etc), depending on what seems relevant. 45 | 46 | We will then take care of the issue as soon as possible. 47 | 48 | 62 | 63 | ## I Want To Contribute 64 | 65 | > ### Legal Notice 66 | > 67 | > When contributing to this project, you must agree that you have authored 100% of the content, that you have the necessary rights to the content and that the content you contribute may be provided under the project license. 68 | 69 | ### Reporting Bugs 70 | 71 | #### Before Submitting a Bug Report 72 | 73 | A good bug report shouldn't leave others needing to chase you up for more information. Therefore, we ask you to investigate carefully, collect information and describe the issue in detail in your report. Please complete the following steps in advance to help us fix any potential bug as fast as possible. 74 | 75 | - Make sure that you are using the latest version. 76 | - Determine if your bug is really a bug and not an error on your side e.g. using incompatible environment components/versions (Make sure that you have read the [documentation](). If you are looking for support, you might want to check [this section](#i-have-a-question)). 77 | - To see if other users have experienced (and potentially already solved) the same issue you are having, check if there is not already a bug report existing for your bug or error. 78 | - Also make sure to search the internet (including Stack Overflow) to see if users outside of the GitHub community have discussed the issue. 79 | - Collect information about the bug: 80 | - Stack trace (Traceback) 81 | - OS, Platform and Version (Windows, Linux, macOS, x86, ARM) 82 | - Version of the interpreter, compiler, SDK, runtime environment, package manager, depending on what seems relevant. 83 | - Possibly your input and the output 84 | - Can you reliably reproduce the issue? And can you also reproduce it with older versions? 85 | 86 | #### How Do I Submit a Good Bug Report? 87 | 88 | > You must never report security related issues, vulnerabilities or bugs including sensitive information to the issue tracker, or elsewhere in public. Instead sensitive bugs must be sent by email to <>. 89 | 90 | 91 | 92 | We use GitHub issues to track bugs and errors. If you run into an issue with the project: 93 | 94 | - Open an [Issue](https://github.com/pradeeptosarkar/dotpackages/issues/new). (Since we can't be sure at this point whether it is a bug or not, we ask you not to talk about a bug yet and not to label the issue.) 95 | - Explain the behavior you would expect and the actual behavior. 96 | - Please provide as much context as possible and describe the _reproduction steps_ that someone else can follow to recreate the issue on their own. This usually includes your code. For good bug reports you should isolate the problem and create a reduced test case. 97 | - Provide the information you collected in the previous section. 98 | 99 | Once it's filed: 100 | 101 | - The project team will label the issue accordingly. 102 | - A team member will try to reproduce the issue with your provided steps. If there are no reproduction steps or no obvious way to reproduce the issue, the team will ask you for those steps and mark the issue as `needs-repro`. Bugs with the `needs-repro` tag will not be addressed until they are reproduced. 103 | - If the team is able to reproduce the issue, it will be marked `needs-fix`, as well as possibly other tags (such as `critical`), and the issue will be left to be [implemented by someone](#your-first-code-contribution). 104 | 105 | ### Suggesting Enhancements 106 | 107 | This section guides you through submitting an enhancement suggestion for dotPackages, **including completely new features and minor improvements to existing functionality**. Following these guidelines will help maintainers and the community to understand your suggestion and find related suggestions. 108 | 109 | #### Before Submitting an Enhancement 110 | 111 | - Make sure that you are using the latest version. 112 | - Read the [documentation]() carefully and find out if the functionality is already covered, maybe by an individual configuration. 113 | - Perform a [search](https://github.com/pradeeptosarkar/dotpackages/issues) to see if the enhancement has already been suggested. If it has, add a comment to the existing issue instead of opening a new one. 114 | - Find out whether your idea fits with the scope and aims of the project. It's up to you to make a strong case to convince the project's developers of the merits of this feature. Keep in mind that we want features that will be useful to the majority of our users and not just a small subset. If you're just targeting a minority of users, consider writing an add-on/plugin library. 115 | 116 | #### How Do I Submit a Good Enhancement Suggestion? 117 | 118 | Enhancement suggestions are tracked as [GitHub issues](https://github.com/pradeeptosarkar/dotpackages/issues). 119 | 120 | - Use a **clear and descriptive title** for the issue to identify the suggestion. 121 | - Provide a **step-by-step description of the suggested enhancement** in as many details as possible. 122 | - **Describe the current behavior** and **explain which behavior you expected to see instead** and why. At this point you can also tell which alternatives do not work for you. 123 | - You may want to **include screenshots and animated GIFs** which help you demonstrate the steps or point out the part which the suggestion is related to. You can use [this tool](https://www.cockos.com/licecap/) to record GIFs on macOS and Windows, and [this tool](https://github.com/colinkeenan/silentcast) or [this tool](https://github.com/GNOME/byzanz) on Linux. 124 | - **Explain why this enhancement would be useful** to most dotPackages users. You may also want to point out the other projects that solved it better and which could serve as inspiration. 125 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) Major League Hacking Fellowship, Inc. and its affiliates. 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 6 | ![Banner](./public/dotPackages%20banner.png) 7 | 8 | This project is a submission to MLH Fellowship Fall Batch Orientation Hackathon by Pradeepto Sarkar (POD FALL 23.10.A member). 9 | 10 | *Do consider giving a :star: to the repository if you like the concept.!* 11 | 12 | ## Introduction 😄 13 | Numerous developers utilize the abundant packages available within the third-party package ecosystem for their respective projects. Nevertheless, the task of handling these packages can become burdensome, exhausting, and, at its worst, expose one's project to potential attacks. 14 | 15 | I created this project with the intention of assisting developers in more effectively managing their packages, thereby facilitating smooth and secure development devoid of malware. 16 | 17 | --- 18 | 19 | ## What it does 😦 20 | 21 | The main and fundamental objective of dotPackages is to assist you in monitoring and overseeing the NPM packages and dependencies of your Node project. dotPackages provides information about Github statistics, the most recent update date, and the connections to the Github repository and issues related to each package. Its purpose is to aid you in recognizing possible inconsistencies and security vulnerabilities that may arise from outdated packages. 22 | 23 | This will prove advantageous for not only the project's creator and maintainers but also for contributors and users involved. 24 | 25 | --- 26 | 27 | ## How I built it 😍 28 | 29 | This application was built with: 30 | 31 | - React Js 32 | - Tailwind css 33 | - Node Js 34 | - Javascript 35 | - NPM API 36 | - GitHub API 37 | 38 | --- 39 | 40 | ## Challenges I ran into 😖 41 | 42 | Numerous obstacles were encountered throughout the journey, with the central difficulty residing in the integration of the project's diverse endpoints, ensuring their harmonious collaboration. Apart from this the public APIs used have issues of thier own which hampered the development and debugging process multiple times. 43 | 44 | --- 45 | 46 | ## What I learnt 🤓 47 | 48 | Regarding the technical aspects, I acquired the skill of executing chained API calls using JavaScript, which involves the intricacies of working with its renowned Promises feature. Additionally, I gained knowledge about date formatting and the conversion of date values from milliseconds after Jan 1, 1970, 0:00 UTC, to human-readable formats such as "25, Sep, 2022." Furthermore, I encountered challenges during the integration of the front-end and backend components. Striving for a minimalist and functional UI/UX, I put forth significant effort. It's worth noting the valuable assistance I found in documentation and resources from Google, related to the technologies I employed. 49 | 50 | --- 51 | 52 | ## Scope for further development 😛 53 | 54 | The current version is able to fetch and display the most important details about the NPM packages. In the future I wish to include more functionalities such as viewing the source code in a built-in editor right in your own browser, improving aesthetics and incorporating more data analytics of the used packages. 55 | 56 | This project is open to any improvements or contributions from the community. To do so, one may raise an issue or drop an email at pradeeptosarkarmail@gmail.com. 57 | 58 | --- 59 | 60 | ## Getting Started 61 | 62 | ### Prerequisites 63 | 64 | The project needs npm installed. If you don't have it already, install it using below comamnd: 65 | 66 | ```sh 67 | npm install npm@latest -g 68 | ``` 69 | 70 | ### Installation 71 | 72 | 1. Clone the repo 73 | ```sh 74 | git clone https://github.com/pradeeptosarkar/dotpackages.git 75 | ``` 76 | 2. Install the required NPM packages 77 | ```sh 78 | npm install 79 | ``` 80 | 3. Run the project 81 | ```sh 82 | npm start 83 | ``` 84 | ### Public API endpoints I have used: 85 | * https://raw.githubusercontent.com/:username/:repo/:branch/package.json 86 | * https://api.npms.io/v2/:package/ 87 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "node-packages-checker", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.5", 7 | "@testing-library/react": "^13.4.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "axios": "^0.27.2", 10 | "karma": "^6.4.2", 11 | "react": "^18.2.0", 12 | "react-dom": "^18.2.0", 13 | "react-router": "^5.3.3", 14 | "react-router-dom": "^5.3.3", 15 | "react-scripts": "5.0.1", 16 | "web-vitals": "^2.1.4" 17 | }, 18 | "scripts": { 19 | "start": "react-scripts start", 20 | "build": "react-scripts build", 21 | "test": "react-scripts test", 22 | "eject": "react-scripts eject" 23 | }, 24 | "eslintConfig": { 25 | "extends": [ 26 | "react-app", 27 | "react-app/jest" 28 | ] 29 | }, 30 | "browserslist": { 31 | "production": [ 32 | ">0.2%", 33 | "not dead", 34 | "not op_mini all" 35 | ], 36 | "development": [ 37 | "last 1 chrome version", 38 | "last 1 firefox version", 39 | "last 1 safari version" 40 | ] 41 | }, 42 | "devDependencies": { 43 | "autoprefixer": "^10.4.12", 44 | "postcss": "^8.4.16", 45 | "tailwindcss": "^3.1.8" 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } -------------------------------------------------------------------------------- /public/_redirects: -------------------------------------------------------------------------------- 1 | /* /index.html 200 -------------------------------------------------------------------------------- /public/dotPackages banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pradeeptosarkar/dotPackages/6156898122407a66871ec6982695498f1817d314/public/dotPackages banner.png -------------------------------------------------------------------------------- /public/favicon(2).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pradeeptosarkar/dotPackages/6156898122407a66871ec6982695498f1817d314/public/favicon(2).png -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 16 | 17 | dotPackages 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon(2).png", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "favicon(2).png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "favicon(2).png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import { BrowserRouter as Router, Route } from "react-router-dom"; 2 | import PackageDependencies from "./components/PackageDependencies"; 3 | import Home from "./pages/Home"; 4 | function App() { 5 | return ( 6 | <> 7 | 8 | 9 | 14 | 15 | 16 | ); 17 | } 18 | 19 | export default App; 20 | -------------------------------------------------------------------------------- /src/components/PackageDependencies.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | import { useParams } from "react-router"; 3 | import encodeGithubStats from "../helpers/encodeGithubStats"; 4 | 5 | function PackageDependencies() { 6 | const { slug } = useParams(); 7 | const [packages, setPackages] = useState(null); 8 | 9 | 10 | useEffect(() => { 11 | 12 | const fetch_details = async () => { 13 | const url = `https://api.npms.io/v2/package/${slug}` 14 | const resp = await fetch(url); 15 | const body = await resp.json(); 16 | return body 17 | } 18 | fetch_details().then(async res => { 19 | const results = await encodeGithubStats(res); 20 | setPackages(results); 21 | }) 22 | 23 | }, []) 24 | 25 | 26 | return ( 27 |
28 |
29 |

{slug}

30 |
31 | 32 |
33 | {packages === null ? ( 34 |

Loading...

35 | ) : ( 36 | <> 37 | 38 |
42 |
43 | 44 | { 45 | packages.github === "undefined" ? ( 46 | 47 |

48 | {packages.name} 49 |

50 | 51 | ) : ( 52 | 53 |

54 | {packages.name} 55 |

56 | 57 | ) 58 | } 59 | 60 | 61 | 62 |
63 |

Last updated

64 |

{packages.date}

65 |
66 |
67 | 68 |
69 |

License

70 |

{packages.license}

71 | 72 |
73 | 74 |

75 | {packages.description} 76 |

77 |

78 | Github Stats 79 |

80 |
81 |
82 | 83 | {packages.starsCount} 84 |
85 | 86 |
87 | 88 | {packages.forksCount} 89 |
90 | 91 |
92 | 93 | {packages.subscribersCount} 94 |
95 |
96 | 97 | { 98 | packages.issues === "undefined" ? ( 99 |
100 |

Welp... Can't seem to find its github page

101 |
102 | ) : ( 103 | 104 |
105 |

See all issues

106 | 107 |
108 | 109 | ) 110 | } 111 | 112 | 113 | 114 |

Dependencies:

115 |
116 | {packages.dependencies.length === 0 ? (

No dependencies found

) : 117 | ( 118 | packages.dependencies.map((i, k) => { 119 | if (i.includes('@')) { 120 | 121 | return ( 122 | 123 |

127 | {i} 128 |

129 | 130 | ) 131 | } 132 | else { 133 | return ( 134 | 135 |

139 | {i} 140 |

141 | 142 | ) 143 | } 144 | 145 | }) 146 | ) 147 | } 148 | 149 |
150 |
151 | 152 | 153 | )} 154 |
155 | 156 |
157 | ); 158 | } 159 | 160 | export default PackageDependencies; 161 | -------------------------------------------------------------------------------- /src/components/PackageInfo.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | import encodeGithubStats from "../helpers/encodeGithubStats"; 3 | 4 | function PackageInfo({ item }) { 5 | 6 | const [encodedPackage, setEncodedPackage] = useState(null); 7 | 8 | useEffect(() => { 9 | const load = async () => { 10 | const results = await encodeGithubStats(item); 11 | setEncodedPackage(results) 12 | } 13 | 14 | load(); 15 | }, []) 16 | 17 | 18 | return ( 19 | <> 20 | {encodedPackage === null ? ( 21 |

Loading

22 | ) : ( 23 |
26 |
27 | 28 | { 29 | encodedPackage.github === "undefined" ? ( 30 | 31 |

32 | {encodedPackage.name} 33 |

34 | 35 | ) : ( 36 | 37 |

38 | {encodedPackage.name} 39 |

40 | 41 | ) 42 | } 43 | 44 | 45 | 46 |
47 |

Last updated

48 |

{encodedPackage.date}

49 |
50 |
51 | 52 |
53 |

License

54 |

{encodedPackage.license}

55 |
56 | 57 | 58 | 59 | 60 | 61 |

62 | {encodedPackage.description} 63 |

64 | 65 |

66 | Github Stats 67 |

68 | 69 | 70 |
71 |
72 | 73 | {encodedPackage.starsCount} 74 |
75 | 76 |
77 | 78 | {encodedPackage.forksCount} 79 |
80 | 81 |
82 | 83 | {encodedPackage.subscribersCount} 84 |
85 |
86 | 87 | 88 | 89 | { 90 | encodedPackage.issues === "undefined" ? ( 91 |
92 |

Welp... Can't seem to find its github page

93 |
94 | ) : ( 95 | 96 |
97 |

See all issues

98 | 99 |
100 | 101 | ) 102 | } 103 | 104 | 105 | 106 |

Dependencies:

107 |
108 | { 109 | 110 | encodedPackage.dependencies === "undefined" ? 111 | 112 | (

No dependencies found

) 113 | 114 | : 115 | ( 116 | encodedPackage.dependencies.map((i, k) => { 117 | if (i.includes('@')) { 118 | 119 | return ( 120 | 121 |

125 | {i} 126 |

127 | 128 | ) 129 | } 130 | else { 131 | return ( 132 | 133 |

137 | {i} 138 |

139 | 140 | ) 141 | } 142 | 143 | }) 144 | ) 145 | } 146 | 147 |
148 |
149 | )} 150 | 151 | 152 | 153 | 154 | ); 155 | } 156 | 157 | export default PackageInfo; 158 | -------------------------------------------------------------------------------- /src/helpers/convertToObject.js: -------------------------------------------------------------------------------- 1 | function convertToObject(name, description, dependencies, github, issues, date, license, starsCount, forksCount, subscribersCount) { 2 | return { 3 | name, 4 | description, 5 | dependencies, 6 | github, 7 | issues, 8 | date, 9 | license, 10 | starsCount, 11 | forksCount, 12 | subscribersCount 13 | }; 14 | } 15 | export default convertToObject; -------------------------------------------------------------------------------- /src/helpers/convert_date.js: -------------------------------------------------------------------------------- 1 | const convert_date = (date) => { 2 | const display_date = new Date(Date.parse(date)); 3 | const options = { year: 'numeric', month: 'short', day: 'numeric' }; 4 | return display_date.toLocaleDateString("en-GB", options); 5 | } 6 | 7 | export default convert_date; -------------------------------------------------------------------------------- /src/helpers/encodeGithubStats.js: -------------------------------------------------------------------------------- 1 | import convertToObject from "./convertToObject"; 2 | import convert_date from "./convert_date"; 3 | 4 | export default function encodeGithubStats(obj) { 5 | 6 | let starsCount_c = "", forksCount_c = "", subscribersCount_c = ""; 7 | const name_c = obj.collected.metadata.name === undefined ? "undefined" : obj.collected.metadata.name; 8 | const description_c = obj.collected.metadata.description === undefined ? "undefined" : obj.collected.metadata.description; 9 | const dependencies_c = obj.collected.metadata.dependencies === undefined ? [] : Object.keys(obj.collected.metadata.dependencies); 10 | const date_c = obj.collected.metadata.date === undefined ? "undefined" : convert_date(obj.collected.metadata.date); 11 | //const maintainers_c = obj.collected.metadata.author.nametainers === undefined ? [] : Object.keys(obj.collected.metadata.maintainers); 12 | 13 | const license_c = obj.collected.metadata.license === undefined ? "undefined" : obj.collected.metadata.license; 14 | 15 | if (obj.collected.github === undefined) { 16 | starsCount_c = "undefined"; 17 | forksCount_c = "undefined"; 18 | subscribersCount_c = "undefined"; 19 | } else { 20 | starsCount_c = obj.collected.github.starsCount === undefined ? "undefined" : obj.collected.github.starsCount; 21 | forksCount_c = obj.collected.github.forksCount === undefined ? "undefined" : obj.collected.github.forksCount; 22 | subscribersCount_c = obj.collected.github.subscribersCount === undefined ? "undefined" : obj.collected.github.subscribersCount; 23 | } 24 | 25 | const repository_c = obj.collected.metadata.links.repository === undefined ? "undefined" : obj.collected.metadata.links.repository; 26 | const bugs_c = obj.collected.metadata.links.bugs === undefined ? "undefined" : obj.collected.metadata.links.bugs; 27 | 28 | let data = convertToObject( 29 | name_c, description_c, dependencies_c, repository_c, bugs_c, date_c, license_c, starsCount_c, forksCount_c, subscribersCount_c 30 | ) 31 | 32 | return data; 33 | 34 | } -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | import "./index.css"; 4 | import App from "./App"; 5 | 6 | const root = ReactDOM.createRoot(document.getElementById("root")); 7 | root.render(); 8 | -------------------------------------------------------------------------------- /src/pages/Home.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import { useRef } from "react"; 3 | import { useEffect } from "react"; 4 | import PackageInfo from "../components/PackageInfo"; 5 | 6 | function Home() { 7 | const [repos, setRepos] = useState([]); 8 | const [finished, setFinished] = useState(false); 9 | const githubLink = useRef(); 10 | const branch = useRef(); 11 | 12 | let arr = []; 13 | 14 | async function handleSubmit() { 15 | setRepos([]); 16 | setFinished(false); 17 | let username, repo; 18 | username = githubLink.current.value.split("/")[3]; 19 | repo = githubLink.current.value.split("/")[4]; 20 | 21 | const url = `https://raw.githubusercontent.com/${username}/${repo}/${branch.current.value}/package.json`; 22 | const resp = await fetch(url); 23 | if (resp.status !== 200) { 24 | alert("Please insert github repo link in right format"); 25 | return; 26 | } 27 | localStorage.setItem("githubLink", githubLink.current.value); 28 | localStorage.setItem("branch", branch.current.value); 29 | 30 | const body = await resp.json(); 31 | 32 | Object.keys(body.dependencies).map(async (item) => { 33 | if (item.includes("@")) { 34 | let p = item.split("/")[0].slice(1); 35 | const url = "https://api.npms.io/v2/package/" + p; 36 | const resp = await fetch(url); 37 | const body = await resp.json(); 38 | if (!arr.includes(body.collected.metadata.name)) { 39 | arr.push(body.collected.metadata.name); 40 | setRepos((current) => [...current, body]); 41 | } 42 | } else if (!item.includes("@")) { 43 | const url = "https://api.npms.io/v2/package/" + item; 44 | const resp = await fetch(url); 45 | const body = await resp.json(); 46 | if (!arr.includes(body.collected.metadata.name)) { 47 | arr.push(body.collected.metadata.name); 48 | setRepos((current) => [...current, body]); 49 | } 50 | } 51 | }); 52 | 53 | setFinished(true); 54 | } 55 | 56 | const finishLine = async () => { 57 | await handleSubmit(); 58 | const res = await Promise.all(repos); 59 | console.log(res); 60 | }; 61 | 62 | useEffect(() => { 63 | if ( 64 | localStorage.getItem("githubLink") !== null && 65 | localStorage.getItem("branch") !== null 66 | ) { 67 | githubLink.current.value = localStorage.getItem("githubLink"); 68 | branch.current.value = localStorage.getItem("branch"); 69 | finishLine(); 70 | return; 71 | } 72 | }, []); 73 | 74 | return ( 75 | <> 76 |
77 |

dotPackages

78 |

NPM Packages Manager

79 |

80 | Do you possess knowledge about the npm packages you've incorporated? Are you familiar with their functionalities, update history, problems, and interdependencies? 81 |
82 | dotPackages serves as an all-observant tool for your npm packages, designed to assist you in recognizing packages that might be risky or outdated. 83 |

84 | {/*

85 | Developed by{" "} 86 | 91 | Pradeepto Sarkar 92 | {" "} 93 | for {" "} 94 | 95 |

96 | MLH 97 |
98 | 99 | 100 | 101 | {" "}Fellowship - Software Engineering Track: Orientation Hackathon, Fall 2023. Github link is{" "} 102 | 107 | here 108 | 109 |

110 | */} 111 |
112 |

113 | Insert a link to your Github repo and get a list of the NPM packages used.! 114 |

115 |
116 |
117 | 118 | 126 |
127 |
128 | 129 | Enter the complete URL of your GitHub repo which contains the "package.json" file at root 130 |
131 | 132 |
133 | 134 | 142 |
143 |
144 | 145 | Enter the name of the branch 146 |
147 | 148 | 154 |
155 |
156 |
157 | 158 |
159 | {finished ? ( 160 | repos.map((item, index) => ( 161 | 162 | )) 163 | ) : ( 164 |

Packages you have used will appear here.

165 | )} 166 |
167 | 168 | ); 169 | } 170 | 171 | export default Home; 172 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: [ 4 | "./src/**/*.{js,jsx,ts,tsx}", 5 | ], 6 | theme: { 7 | extend: {}, 8 | }, 9 | plugins: [], 10 | } --------------------------------------------------------------------------------