Introducing HackrNews ๐ŸŽ‰ -Now Read Hacker News with Ease.

Saumya Ranjan Nayak
6 min readSep 2, 2021

Hey there welcome to this special blog where I launch an app I have been working on!

This app is really special for me as this is probably the most complete thing I have built as it is not only a web app but also a Cross-Platform working Progressive Web App.

I have also added a Landing Page, produced some mockups for it & whatnot. ๐Ÿงก

Okay, enough talking let me show you the Product!

Introducing HackrNews ! ๐ŸŽ‰

New Hacker News !

I know you love reading HackerNews so why not read it with ease!

Iโ€™ll not make you wait till the whole post get over, here you go: HackrNews.

You can check out its Source Code here: Github.

We have also launched on Product Hunt: HackrNews in Product Hunt

With HackrNews you can enjoy reading the best of Tech in a more convenient and cool way as compared to the original HN with features like โšก:

Super Clean UI ๐ŸŒ„

๐Ÿšฉ We all love reading HackerNews due to its invaluable content but its UI always was a pain point for many. For example, it has a really small font which becomes really hard to read on a small screen.
The result being we mostly read it on our Laptops/PC while slacking off our work.๐Ÿ˜…

And all this is pretty understandable as Paul Graham๐Ÿ™Œ made it more than a decade ago!

โœ… But not anymore I have tried to fix that in HackrNewsโ€™s, with a Clean, Responsive, and a Feed Focused UI. So that you can just open it and start absorbing it!

PS: Iโ€™m not a designer but I have a good eye for one, probably as I used to love drawing a lot as a kid. Thus what you see is just my imagination of what would look good. So looking forward to your feedback on the look.๐Ÿ˜ƒ

Dark/Night Mode ๐ŸŒ“

๐Ÿšฉ I mean common being techies we need Night Mode at such a holy place like Hacker News right! ๐Ÿ™‡โ€โ™‚๏ธ

โœ… So there you go, HackrNews has Dark/Night mode toggle on all the devices. Thus you donโ€™t have to strain your eyes anymore while enjoying your reading sessions! ๐Ÿค—

Read Anywhere ๐ŸŒŒ

๐Ÿšฉ Now you can either :

  • Use your PC all the time or at any place.
  • You can open your browser, go to the bookmarks or type the link.

And then start reading orโ€ฆ๐Ÿ™„

โœ… You can just tap once on any device of yours & start reading!

Exactly for this reason I made HackrNews a Progressive Web App!

Or in other words, HackrNews will work as a native app in whatever OS you install it in!

Hereโ€™s how you can install HackrNews on your phone ๐Ÿ“ฑ:

More than A Feed!โšก

It is not only a feed where one can just scroll and read the headlines.

  • You can also tap on the User to see the all-time posts of the user on HN & their Karma. ๐Ÿ‘‡
HackrNewsโ€Šโ€”โ€ŠRead HackrNews with Ease
  • You can also tap on the Comments to read the comments made on a post to know the various perspectives of people. ๐Ÿ‘‡
HackrNewsโ€Šโ€”โ€ŠRead HackrNews with Ease Comments
HackrNews Comments
  • Wait itโ€™s not over, You can Sign Up easily into HackrNews and start Bookmarking Posts, you Love! ๐Ÿš€

Then you can go to your profile to check those saved Posts.

Save HackerNews stories

That brings me to Auth0, I loved implementing authentication with this and NextJS as HackrNews is built with it.

In fact, I found the process so clean and fast that I created and published a video on how to add Authentication to a NextJS app using Auth0. ๐Ÿคฏ

How to Add Auth0 Authentication to NextJS App?

And I will definitely be using it further in my projects and will be ranting to people to use it! ๐Ÿ˜„

Wait.. I also found a very interesting thing that with Auth0- You can easily store the Signing Users in a Custom Database too !

You can enable it by the following steps ๐Ÿ‘‡:

  • Log-in into your Auth0 dashboard.
  • Go to Authentication in the sidebar & select Database from its submenu.
  • Then Click the Custom Database tab and enable it!
  • Now you can just select the type of Database you have and Auth0 has all the necessary functions already set up. You just have to add the Credentials of your DB!

I have used that to store the signing-up users into HackrNews into a MongoDB instance for any future features/use. ๐Ÿ“Œ

Why did I build HackrNews? ๐Ÿ› 

Now that you enough about the app now let me share what inspired me to build HackrNews.

Personally, I love reading HN but I thought that if HN is such a great site with great content, it should be revamped.

As the ones who just discover it would just simply ignore it just by judging how it looks.

And then I also found this conversation that made me know that some people really find it difficult to read ๐Ÿ˜ž : https://news.ycombinator.com/item?id=7614167

So, I thought why not then try to combine the power of HackerNewsโ€™s content with todayโ€™s best Web Technologies !

Around this time I also wanted to learn NextJS and what better way to learn something than building something with it!

So everything just seemed to fit together nicely leading me to use NextJS to build HackrNews. As itโ€™s the fastest and super optimized Framework in the market.

Thus HackrNews is Server-Side-Rendered and enjoys benefits like Fast Loading, SEO, and whatnot.

And officially making HackrNews my first NEXT Project of many to come!

Future Plans ๐Ÿน๐ŸŒˆ

Let me share some future plans or features I have in mind for HackrNews ๐Ÿ‘‡:

  • A Feature above the feed to Sort/Filter the Feed according to Popularity, Time, and stuff.
  • Make it more personalized for the Auth0 authenticated User with a Special Feed according to the Userโ€™s interest.
  • Make a HackrNews Twitter Bot that automatically puts out interesting Tech Tweets!
  • A Newsletter for the Developer Community!
  • Will be saving up some money to buy a domain for it. ๐Ÿ˜„

Conclusion

I had an awesome time building HackrNews!

Your Feedbacks, Comments, and Recommendations are what Iโ€™m eagerly waiting for. And would love to know your thoughts on the product or any feature ideas you would love to have. ๐Ÿงโ€โ™‚๏ธ

I will definitely be more than happy to implement those and make HackrNews better iteratively!๐Ÿš€

Do Comment if you have read it till now. It means a lot!

Would love to connect with you! ๐Ÿ‘‹:

--

--

Saumya Ranjan Nayak

20 | Jr. Full Stack Engg. | Youtube Creator | Reader | Writing my learnings on Programming & Self-Improvement.