devspace : get top posts from the best developer platforms

devspace : get top posts from the best developer platforms

ยท

3 min read

Featured on Hashnode

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!

Did you find this article valuable?

Support Rutik Wankhade by becoming a sponsor. Any amount is appreciated!

ย