{"id":25893046,"url":"https://github.com/abhinandanmishra1/leetcode-profiler","last_synced_at":"2026-04-24T20:32:55.428Z","repository":{"id":233886254,"uuid":"787856885","full_name":"abhinandanmishra1/leetcode-profiler","owner":"abhinandanmishra1","description":"It is an npm package that allows you to integrate Leetcode components into your personal projects.","archived":false,"fork":false,"pushed_at":"2024-04-24T07:39:19.000Z","size":191,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-06-09T01:06:06.781Z","etag":null,"topics":["competitive-programming","cp","leetcode","leetcode-profiler","npm","npm-packages"],"latest_commit_sha":null,"homepage":"https://leetcode-profiler-example.vercel.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/abhinandanmishra1.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-04-17T10:07:22.000Z","updated_at":"2024-06-08T14:47:35.000Z","dependencies_parsed_at":"2024-04-20T18:25:38.233Z","dependency_job_id":"8dd0fdee-2276-4124-b7fd-54d05698733c","html_url":"https://github.com/abhinandanmishra1/leetcode-profiler","commit_stats":null,"previous_names":["abhinandanmishra1/leetcode-profiler"],"tags_count":0,"template":false,"template_full_name":"github/codespaces-blank","purl":"pkg:github/abhinandanmishra1/leetcode-profiler","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abhinandanmishra1%2Fleetcode-profiler","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abhinandanmishra1%2Fleetcode-profiler/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abhinandanmishra1%2Fleetcode-profiler/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abhinandanmishra1%2Fleetcode-profiler/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/abhinandanmishra1","download_url":"https://codeload.github.com/abhinandanmishra1/leetcode-profiler/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abhinandanmishra1%2Fleetcode-profiler/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261495462,"owners_count":23167320,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["competitive-programming","cp","leetcode","leetcode-profiler","npm","npm-packages"],"created_at":"2025-03-02T21:30:08.988Z","updated_at":"2026-04-24T20:32:55.423Z","avatar_url":"https://github.com/abhinandanmishra1.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Leetcode Profiler\n\nThe Leetcode Profiler is a React npm package that provides ready-to-use components for displaying LeetCode profile data. You can easily integrate components like contest rating graphs, solved problem statistics, badges, and submission heatmaps into your personal projects to showcase your Data Structures and Algorithms (DSA) knowledge and practices.\n\n\n## 📦 Dependencies\n\nThis package fetches data from a backend server. A running instance of the server is required for the components to function correctly. You must provide the server's URL to the `\u003cLeetcodeProfilerProvider\u003e` component for the package to work.\n\n**Backend Server Repository**: [`coding-profile-server`](https://github.com/abhinandanmishra1/coding-profile-server)\n\n## 🚀 Usage Instructions\n\n1. Initialize a React project:\n   ```bash\n   npx create-react-app my-leetcode-project\n\n2. Install the Leetcode Profiler package:\n\n   ```bash\n   npm install leetcode-profiler\n   ```\n\n3. In your `src/index.tsx` (or `src/main.tsx`) file, set up the provider:\n\n   ```tsx\n   import React from \"react\";\n   import ReactDOM from \"react-dom\";\n   import App from \"./App\"; // Your main application component\n\n   import { LeetcodeProfilerProvider } from \"leetcode-profiler\";\n\n   const SERVER_URL = \"https://your-deployed-server-url.com\"; // Replace with your server URL\n\n   ReactDOM.createRoot(document.getElementById(\"root\")!).render(\n     \u003cReact.StrictMode\u003e\n       \u003cLeetcodeProfilerProvider serverUrl={SERVER_URL}\u003e\n         \u003cApp /\u003e\n       \u003c/LeetcodeProfilerProvider\u003e\n     \u003c/React.StrictMode\u003e\n   );\n   ```\n\n## 💡 Example Usage\n\n```tsx\nimport React from \"react\";\nimport {\n  LeetcodeBadges,\n  LeetcodeContestRatingGraph,\n  LeetcodeSolvedProblemsStats,\n  LeetcodeSubmissionsHeatmap,\n  LeetcodeTopRatingHistogram,\n} from \"leetcode-profiler\";\n\nconst Example = () =\u003e {\n  const username = \"abhinandan_mishra_1\";\n\n  return (\n    \u003cdiv className=\"flex flex-col md:flex-row gap-4 bg-dark-layer-bg min-h-screen p-4\"\u003e\n      \u003cdiv className=\"flex flex-col gap-4 w-full md:w-1/2\"\u003e\n        \u003cdiv className=\"min-h-[200px] max-h-[300px]\"\u003e\n          \u003cLeetcodeContestRatingGraph username={username} /\u003e\n        \u003c/div\u003e\n\n        \u003cdiv className=\"min-h-[200px] max-h-[300px]\"\u003e\n          \u003cLeetcodeTopRatingHistogram username={username} /\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n\n      \u003cdiv className=\"relative w-full p-2 flex flex-col gap-2\"\u003e\n        \u003cLeetcodeSolvedProblemsStats username={username} /\u003e\n        \u003cLeetcodeSubmissionsHeatmap username={username} /\u003e\n        \u003cLeetcodeBadges username={username} /\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default Example;\n```\n\n## 🎨 Screenshots\n\n![image](https://github.com/abhinandanmishra1/leetcode-profiler/assets/64205626/f78ba6d5-3c9f-46b5-9269-ae564e965130)\n![image](https://github.com/abhinandanmishra1/leetcode-profiler/assets/64205626/5fe563a1-3454-4d4c-a3b8-a8d4f5b990d8)\n![image](https://github.com/abhinandanmishra1/leetcode-profiler/assets/64205626/7c34e864-423e-433b-93c3-221e8b63a20e)\n\n\n\u003e Remember to install and initialize **Tailwind CSS** to apply styling to the above component.\n\n---\n\n## ✨ Happy coding! 🚀🔥\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabhinandanmishra1%2Fleetcode-profiler","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fabhinandanmishra1%2Fleetcode-profiler","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabhinandanmishra1%2Fleetcode-profiler/lists"}