LeetCode Card Generator

LeetCode Card Generator is a web application built using Next.js, ShadCN UI, and LeetCode's GraphQL API. The app allows users to generate personalized cards displaying their LeetCode stats and progress, which they can share on social media or use as badges on platforms like GitHub.

🌟Features

• Real-Time Stats: Fetch and display LeetCode user stats, including total problems solved, ranking, and streaks.
• Customization: Customize card appearance with themes, colors, and layout options.
• Responsive Design: Optimized for all screen sizes.
• Shareable Links: Generate a shareable link or downloadable image of the card.
• SEO Optimized: Fast and discoverable using Next.js.

Tech Stack

• Framework: Next.js
• UI Components: ShadCN UI
• Data Source: LeetCode GraphQL API
• Styling: Tailwind CSS
• Deployment: Vercel

Getting Started

Prerequisites

• Node.js (v18 or higher)
• npm or yarn
• A valid LeetCode account

Installation

1. Clone the Repository:

   git clone https://github.com/Suhelkhan12/Leetcode-stats-visualiser
   cd leetcode-card-generator

2. Install Dependencies:

   npm install
   # or
   yarn install

3. Set Environment Variables: Create a .env.local file in the root directory and add the following:

   NEXT_PUBLIC_LEETCODE_API=https://leetcode.com/graphql

4. Run the Development Server:

   npm run dev
   # or
   yarn dev

   Visit http://localhost:3000 to view the app in development mode.

Build for Production

To create an optimized production build:

npm run build
npm run start

Usage

1. Enter your LeetCode username in the input field.
2. Customize your card using the available options.
3. Preview your card and copy the shareable link or download the image.

Screenshots

Home Page

Generated Card Example

API Integration

The app communicates with LeetCode's GraphQL API to fetch user data. Make sure the LeetCode API endpoint is accessible and functional. If you encounter issues, check your network and endpoint configuration.

Deployment

The app is designed to be deployed on Vercel:

1. Push your code to a GitHub repository.
2. Connect your repository to Vercel.
3. Configure environment variables on Vercel.
4. Deploy the app with a single click.

Acknowledgments

• LeetCode for the API
• Next.js and ShadCN UI for the tech stack
• Tailwind CSS for styling

---

Feel free to explore the app and share your feedback! 🎉