MCPcopy Index your code
hub / github.com/KevzPeter/Duolingo-Stats-Card

github.com/KevzPeter/Duolingo-Stats-Card @main

Chat with this repo
repository ↗ · DeepWiki ↗ · + Follow
20 symbols 40 edges 13 files 3 documented · 15%
What it actually does AI analysis from the code graph — generated when you open this
loading…
README

Logo

Duolingo Stats Card

🦉 A real-time, customizable Duolingo widget that you can embed on your website or markdown files ✨






<a href="https://duolingo-stats-card.vercel.app/">✨ View Demo</a>
·
<a href="https://github.com/KevzPeter/duolingo-stats-card/issues">🐛 Report Bug</a>
·
<a href="https://github.com/KevzPeter/duolingo-stats-card/issues">💁🏽 Request Feature</a>

🚀 How to add to your page

Add the following line to your Github README.md page / website / any markdown file and replace {your-duolingo-username} ⤵️

<img src="https://duolingo-stats-card.vercel.app/api?username={your-duolingo-username}" alt="Duolingo Stats" />

Or even this way ⤵️

![Duolingo Stats](https://duolingo-stats-card.vercel.app/api?username={your-duolingo-username})

For example, if your Duolingo username is "John_Smith", add the following line:

![Duolingo Stats](https://duolingo-stats-card.vercel.app/api?username=John_Smith)

🎨 Themes

Want to spice up the look and feel of your stats card? You can choose your favorite among 15 different themes!

Simply add the theme parameter to the url like so:

<img src="https://duolingo-stats-card.vercel.app/api?username={your-duolingo-username}&theme={your-theme}" alt="Duolingo Stats" />

[!NOTE] If you don't specify a theme, it would be rendered like how it's displayed at the top of this doc!

light light dark dark github-dark github-dark
monokai monokai tokyonight tokyonight nightowl nightowl
onedark onedark shades-of-purple shades-of-purple dracula dracula
cobalt2 cobalt2 sky sky beach beach
purple-gang purple-gang mint mint leafy leafy
jolly jolly

🔧 Built With

  • Next
  • React
  • Duolingo
  • Docker

🐋 Deploy using Docker

  • Using docker compose
  • Run docker compose -f docker-compose.production.yml up -d
  • Go to http://localhost:3000 to use the app

🙌🏼 Contributing

If you wanna add your custom theme or suggest enhancements, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

  1. Fork the Project
  2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
  3. Commit your Changes (git commit -m 'Add some AmazingFeature')
  4. Push to the Branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

(back to top)

Extension points exported contracts — how you extend this code

Params (Interface)
(no doc)
utils/models.ts
DisplayOptions (Interface)
(no doc)
utils/models.ts
Metadata (Interface)
(no doc)
utils/models.ts
Course (Interface)
(no doc)
utils/models.ts

Core symbols most depended-on inside this repo

formatCreationDate
called by 1
components/SvgWidget.tsx
sortCourses
called by 1
utils/sort.ts
numberFormatter
called by 1
utils/numberFormatter.ts
generateSvg
called by 1
utils/generateSVG.tsx
renderPreviewContent
called by 1
pages/index.tsx
handleCopy
called by 1
pages/index.tsx
getDuoGifDataUri
called by 1
pages/api/index.ts
fetchImageAsBase64
called by 1
pages/api/index.ts

Shape

Function 16
Interface 4

Languages

TypeScript100%

Modules by API surface

utils/models.ts4 symbols
utils/sort.ts3 symbols
pages/index.tsx3 symbols
pages/api/index.ts3 symbols
components/SvgWidget.tsx3 symbols
utils/numberFormatter.ts1 symbols
utils/generateSVG.tsx1 symbols
pages/_app.tsx1 symbols
next.config.js1 symbols

For agents

$ claude mcp add Duolingo-Stats-Card \
  -- python -m otcore.mcp_server <graph>

⬇ download graph artifact