devspace : get top posts from the best developer platforms

Featured on Hashnode
Listen to this article

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. joeyy.gif

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.

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

Demo

See live : devspace.vercel.app
Github : 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.

devspace.png

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.png

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!

Interested in reading more such articles from Rutik Wankhade?

Support the author by donating an amount of your choice.

Recent sponsors
Emin Aydin's photo

Hey Rutik Wankhade,

This is a great project, thanks a lot for the effort!

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 Wankhade's photo

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

Tapas Adhikary's photo

Great work, Rutik. Nice execution of the project with rich UI/UX.

Rutik Wankhade's photo

Thank you so much! ☺

Hussein Kizz's photo

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!

Show +1 replies
Hussein Kizz's photo

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 Wankhade's photo

Thank you for the feedback Hussein Kizz πŸ™Œ I will work on it

Catalin Pit's photo

Nice one and well done for the project!

Btw, you can curate your feed on daily.dev too! :-)

Rutik Wankhade's photo

Thank you Catalin. πŸ€— I see, I think I haven't explored daily.dev much. Will try it.

Anuradha Aggarwal's photo

Excellent Job!! πŸ‘πŸ‘

Rutik Wankhade's photo

Thank you 😊 πŸ‘

Favourite Jome's photo

Awesome idea, and the design is also A+ πŸ‘

Rutik Wankhade's photo

Thank you buddy. πŸ€— Glad you liked it

Sonia Manoubi's photo

Awesome project !

Congrats !!!!

Rutik Wankhade's photo

Thank you so much πŸ˜€

Viren Suthar's photo

great project man, All the best.

Show +1 replies
Viren Suthar's photo

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

Rutik Wankhade's photo

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

Gaurav Tewari's photo

Wow, Great work.. really awesome UI.

Rutik Wankhade's photo

Thank you buddy! You did great job too. πŸ₯³ Sitesheet is impressive.

Gaurav Tewari's photo

Rutik Wankhade
🀩🀩 Glad to see you liked it...

Pankaj's photo

I was looking for something like excalidraw for a long time! Thanks for sharing. Also, I'll be using Devspace quite a lot!

Rutik Wankhade's photo

Yeah, It's super easy to use for quick sketches. 😊Thank you.

Roger Colque Calcina's photo

Goodidea and nice project.

Hulya Karakaya's photo

Hi, very nice project. I am using the Panda extension. UI looks similar. You can check it out. usepanda.com

Rutik Wankhade's photo

This is great. Didn't know about it. Thanks for sharing. πŸ‘ Mine is very basic and simple.

Yogesh Kumar's photo

Nice work Rutik πŸ‘

Rutik Wankhade's photo

😊 Thank you!