devspace : get top posts from the best developer platforms
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.
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.
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
π©βπ» 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!
Full-stack Developer
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!
Hey, Thank you so much. π I didn't know about that. It's helpful. Thanks for sharing π€
Software Engineer
Nice one and well done for the project!
Btw, you can curate your feed on daily.dev too! :-)
Thank you Catalin. π€ I see, I think I haven't explored daily.dev much. Will try it.
Cogito Ergo Sum!
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 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!
β UI/UX/ML | βοΈ Technology Blogger | π€ Speaker
Great work, Rutik. Nice execution of the project with rich UI/UX.
Front-End Developer
Hi, very nice project. I am using the Panda extension. UI looks similar. You can check it out. usepanda.com
This is great. Didn't know about it. Thanks for sharing. π Mine is very basic and simple.
#android-dev #js-dev
Goodidea and nice project.
I was looking for something like excalidraw for a long time! Thanks for sharing. Also, I'll be using Devspace quite a lot!
Student@GEU
Wow, Great work.. really awesome UI.
Frontend Developer | UI/UX design Enthusiast
great project man, All the best.
Software Engineer junior @ Lifen
Awesome project !
Congrats !!!!
Learning and Sharing | Aspring Full Stack Web Developer
Awesome idea, and the design is also A+ π
Software Developer
Excellent Job!! ππ
Comments (32)