devspace : get top posts from the best developer platforms

Just FYI, github actually offers an endpoint to get the popular repositories. Even though it is not listed in their API documentation, you could mix the queries and get the expected result. I have came up with something like this:

https://api.github.com/search/repositories?q=stars:>1+language:${desired_language}&sort=stars&order=desc&type=Repositories

Hope it helps!

Rutik Wankhade5y ago

Hey, Thank you so much. 😊 I didn't know about that. It's helpful. Thanks for sharing 🤗

Viren Suthar5y ago

great project man, All the best.

Rutik Wankhade5y ago

Thanks buddy! 🙌 I was hoping to see you participate this time.

Viren Suthar5y ago

Rutik Wankhade just finished my exam so didn't get time to build hope next time.

Rutik Wankhade5y ago

I see. Hope to see a lot more hackathons coming along the way. Wish you the best!

Hussein Kizz5y ago

Hmm, I will be using this myself, I love dev news and somehow daily dev isn't enough!

By the way, I searched it on product hunt to give my upvote but didn't find it!

Rutik Wankhade5y ago

Thank you 😊 That means a lot. It's not on product hunt yet, but now I do think it should be. 🤗

Hussein Kizz5y ago

Rutik Wankhade and things don't hover, that's a minor fix required but hey I've been using it since I read the post here, it's amazing and if you add on like more 5, we will be good!

Rutik Wankhade5y ago

Thank you for the feedback Hussein Kizz 🙌 I will work on it

Sonia Manoubi5y ago

Awesome project !

Congrats !!!!

Rutik Wankhade5y ago

Thank you so much 😀

After an awesome experience with Hashnode ChristmasHackathon, Hashnode announced a new hackathon in partnership with Vercel. This time it was a 3 week-long hackathon. I wanted to build a full-stack app this time, but I didn't know a thing about how the backend works, so I started learning it.

More than 2 weeks passed and I didn't even start working on the project. Everything was new and a bit intimidating and I couldn't build it in time.

But I still wanted to participate! So I decided to pivot at the last moment and come up with something else. I was running out of both ideas and time. What should I build? a recipe app? a movie app? Nope. It had to be something that would be useful for me in my life.

💡 The idea

Did you hear of daily.dev ? It's a new tab extension that curates blogs and news for developers from different platforms. I have used it. But it was too much content for me. I realized I check only 4-5 developer platforms daily. And sometimes I don't stay for long, I just want to peek, see top posts and get back to my work.

Wait, what if I build something so that I won't need to search and switch tabs for these websites? Well, that sounds like a good idea.

🚀 Introducing devspace

Get top posts from the best developer platforms in one place.

https://youtu.be/83dKsOsx4as

The app is deployed on Vercel and the code is open-sourced on Github.

Demo

See live : https://devspace.vercel.app/
Github : https://github.com/rutikwankhade/devspace

📰 UI/UX

Even though it was a small app, creating a basic design prototype is always a plus. It helps to move in the right direction. I used excalidraw. it's a great tool to create quick sketches.

Layout

For the layout, I divided the screen into two parts. One for navigation and another for the main content. I thought of it as an open book.

Colors

I tried to be consistent with the colors and used colors that complement each other. Also, made it super clean and intuitive.

Screenshots

devspace (1).png

devspace (2).png

👩‍💻 Technologies used

React
TailwindCSS
APIs - Hashnode, dev, HackerNews, Github, and Product Hunt
svg-loaders-react for displaying a loader while the app fetches data
react-reveal for smooth animation on scroll

🌧 Challenges faced

Implementing the APIs was a bit frustrating. Reading the docs thoroughly helped a lot. APIs of Hashnode, Dev, and Product Hunt was easy to use and implement. But Github doesn't have any endpoint for getting trending repositories in its official API. Luckily, I found an unofficial API. Thanks to the open-source developer community.
HackerNews API provides an endpoint to get only the ids of top posts. So I had to fetch individual posts with these ids.
Few blog posts didn't have a cover image, so I used Lorem Picsum's API to set random images for default.

✨ Conclusion

I built this in a very short period of time and still made it look good and useful, at least for me. That's an achievement! So this is my submission for the #VercelHashnode Hackathon. 🙌 Cheers!

I keep writing about the things I learned and applied. So you can connect with me on Twitter, Github or Linkedin. Also, subscribe to my newsletter and stay up-to-date with my latest blog posts.

⚡ Happy learning!

devspace : get top posts from the best developer platforms

Comments (13)

Side Projects

How I built my own productivity app

More from this blog

Dev Retro 2022 - From feeling imposter to feeling confident

Say goodbye to boring new tabs

A beginner's guide to server-side rendering

I built an app to crowdsource internet's best side project ideas