/Duolingo-Stats-Card

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

Primary LanguageTypeScript


Logo

Duolingo Stats Card

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

✨ View Demo · 🐛 Report Bug · 💁🏽 Request Feature



⭐ 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)

The card displays your top 3 languages based on the number of crowns you've unlocked. If you'd like to sort it based on the XP you've gained, add "sort" parameter like so:

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

The current version is 1.2.0. For versions <= 1.1.0, you need to add your Duolingo ID instead of username. Click here to get your Duolingo ID

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

🎨 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"/>
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

💡 Getting your Duolingo ID

  1. Login at duolingo.com

  2. Go to Developer Tools in your browser (hit F12 key)

  3. Go to Application tab ➡️ Local Storage ➡️ duolingo.com

  4. The number that you see here 👇🏽 repeated multiple times is your Duolingo profile id

    Devtools

🔧 Built With 🔧

  • Next
  • React
  • Duolingo
  • Docker

🐋 Deploy using Docker 🐋

  • Using docker compose

🙌🏼 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)