DEV Community

Cover image for I created a Wrapped for Dev.to
DrPrime01
DrPrime01

Posted on

20 3 5 2 3

I created a Wrapped for Dev.to

Looking at several wrapped from my Spotify to my friends' YouTube Music and the designers' Figma, and also inspired by a community member's Hashnode Wrapped'24 project, I decided to create a wrapped for Dev.to so my fellow technical writers could see how they performed this year.
Read through this piece to learn how I did it.

The Birth of Dev.to Wrapped

As an active of ArticleStreak, a WhatsApp community for technical writers, I decided to drop one more project before the year runs out that aligns with the theme of the community—a wrapped. A group member already created one for Hashnode, but not everyone uses Hashnode so some people were left out. That was where I came in. Straight to ChatGPT, "I want to create a Dev.to wrapped. How do I get an API with every Dev.to users' stats?" That was the prompt that helped me find out about https://dev.to/api. I should have known, but you can't know all and that's why you research.

The Building Process (or its Summary)

I played around the settings page on the Dev.to website and found the OpenAPI docs. That was all I needed. I wanted a Wrapped that consisted of the articles published for the year, number of comments and reactions, and the number of views, but I couldn't get the last stat because the API currently doesn't allow users OAuth to access information as such. Perhaps in the future, it'll be added.

In Conclusion

To cut the long story short, I created a React application with Vite and joined the pieces together to beget this: Dev.to Wrapped. You'll have to forgive my simple design for I'm not a good designer.

You can contribute to the project here: https://github.com/DrPrime01/dev-to-wrapped and give the repo a star 🌟.

Thanks for reading this short story. I'm Dr Prime.

Billboard image

Deploy and scale your apps on AWS and GCP with a world class developer experience

Coherence makes it easy to set up and maintain cloud infrastructure. Harness the extensibility, compliance and cost efficiency of the cloud.

Learn more

Top comments (2)

Collapse
 
lovestaco profile image
Athreya aka Maneshwar • Edited

Good start! Looks neat.

You can take inspiration from this as well.
@code42cate had done a pretty solid art.

Collapse
 
drprime01 profile image
DrPrime01

Thank youuu

The Most Contextual AI Development Assistant

Pieces.app image

Our centralized storage agent works on-device, unifying various developer tools to proactively capture and enrich useful materials, streamline collaboration, and solve complex problems through a contextual understanding of your unique workflow.

👥 Ideal for solo developers, teams, and cross-company projects

Learn more

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay