Skip to content

πŸ¦‰ A real-time, customizable Duolingo widget that you can embed on your website or markdown files ✨

Notifications You must be signed in to change notification settings

KevzPeter/Duolingo-Stats-Card

Repository files navigation


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)

About

πŸ¦‰ A real-time, customizable Duolingo widget that you can embed on your website or markdown files ✨

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published