https://github.com/abhinandanmishra1/leetcode-profiler
It is an npm package that allows you to integrate Leetcode components into your personal projects.
https://github.com/abhinandanmishra1/leetcode-profiler
competitive-programming cp leetcode leetcode-profiler npm npm-packages
Last synced: about 2 months ago
JSON representation
It is an npm package that allows you to integrate Leetcode components into your personal projects.
- Host: GitHub
- URL: https://github.com/abhinandanmishra1/leetcode-profiler
- Owner: abhinandanmishra1
- Created: 2024-04-17T10:07:22.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-04-24T07:39:19.000Z (about 2 years ago)
- Last Synced: 2025-06-09T01:06:06.781Z (about 1 year ago)
- Topics: competitive-programming, cp, leetcode, leetcode-profiler, npm, npm-packages
- Language: TypeScript
- Homepage: https://leetcode-profiler-example.vercel.app/
- Size: 187 KB
- Stars: 2
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Leetcode Profiler
The 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.
## 📦 Dependencies
This 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 `` component for the package to work.
**Backend Server Repository**: [`coding-profile-server`](https://github.com/abhinandanmishra1/coding-profile-server)
## 🚀 Usage Instructions
1. Initialize a React project:
```bash
npx create-react-app my-leetcode-project
2. Install the Leetcode Profiler package:
```bash
npm install leetcode-profiler
```
3. In your `src/index.tsx` (or `src/main.tsx`) file, set up the provider:
```tsx
import React from "react";
import ReactDOM from "react-dom";
import App from "./App"; // Your main application component
import { LeetcodeProfilerProvider } from "leetcode-profiler";
const SERVER_URL = "https://your-deployed-server-url.com"; // Replace with your server URL
ReactDOM.createRoot(document.getElementById("root")!).render(
);
```
## 💡 Example Usage
```tsx
import React from "react";
import {
LeetcodeBadges,
LeetcodeContestRatingGraph,
LeetcodeSolvedProblemsStats,
LeetcodeSubmissionsHeatmap,
LeetcodeTopRatingHistogram,
} from "leetcode-profiler";
const Example = () => {
const username = "abhinandan_mishra_1";
return (
);
};
export default Example;
```
## 🎨 Screenshots
> Remember to install and initialize **Tailwind CSS** to apply styling to the above component.
---
## ✨ Happy coding! 🚀🔥