Introducing HackrNews 🎉 ! Read HN with Ease.
Tags: webdev, programming, nextjs, react
Published: 2021-09-02 14:10:45

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 & what not. 🧡 

Okay, enough talking let me show you the Product!

## Introducing HackrNews ! 🎉

![ezgif.com-gif-maker.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1630348186381/nL3yJaWuQ.gif)

### 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 ](https://hackrnews.vercel.app/). You can check out it's Source Code here : [Github](https://github.com/saumya66/hackr-news) 

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! 🤗 

![mockupfull (1) (1).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1630348230398/KTE3C4dpR.png)

### 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 📱:
 
![fasf.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1630351678994/ijFQjEl_4.png)

### 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. 👇

![nighpro.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1630352105766/YveFzjD7Q.png)

- You can also tap on the Comments to read the comments made on a post to know the various perspectives of people. 👇

![desknighcomm.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1630352117530/yE9_JYimn.png)

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

![1d.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1630352589461/kW_wJ6nsM.png)

That brings me to  [Auth0](https://auth0.com/), 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](https://youtu.be/c5X-2E4wFKw) on how to add Authentication to a NextJS app using Auth0. 🤯

{% youtube c5X-2E4wFKw %}

And I will definitely be using it further in my projects and will be ranting to people to use it as I also do with Hashnode! 😄

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 in to 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 the 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!
- 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. 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!🚀**

**Would love to connect with you ! 👋:**
-  [Youtube](https://www.youtube.com/c/saumyanayak)
-  [Twitter ](https://twitter.com/saumya4real) 
-  [Github](https://github.com/saumya66)
-  [LinkedIn ](https://www.linkedin.com/in/saumya66/) 
-  [Hashnode](https://saumya.hashnode.dev/)