Greetings people! 👋

Hackathons can be real fun in the middle of our mundane life, given the work-from-home scenario life has become pretty monotonous. It has been ages since I worked with hackathons and I was pretty excited when I came across this hackathon just a week ago and it was great to work on it in a full war room mode and build a decent looking product that I’m definitely very proud of. I have always been a fan of HarperDB and its huge potential and this Hackathon gave me a platform to understand and build a beautiful product that utilizes all of HarperDB’s SQL and NoSQL utilities.

---

What inspired me to create this? 🤩

When I first read about the hackathon in Hashnode, the first thought that popped up in my head was - Why not try and build Hashnode with HarperDB’s support?. And, we’d like to call it "HarperNode" 🥁(Do you notice the wordplay we did here? Cool right?). HarperNode is a mini or a lite version of Hashnode that’s solely supported by HarperDB in the backend. Being a tech blogger myself, I knew what the expectations of a writer would be and I could design the product with all the ease that I’d expect from any blogging platform.

HashNode

Though Hashnode is not very new to you all, I still would like to give a brief intro on what my product does. Harpernode basically is a collaborative tool for writers to write, share and view articles written by other writers. One can view content that they’d like to see by following their favorite articles or tags (about articles) that they’re most interested in. It provides a platform for sharing and viewing great content and in-turn it ends up being a huge database of technical articles.

HarperDB

HarperDB has the potential for a lot of greatness. If not to its fullest capabilities, I believe that we have done our bit of justice to utilize the mighty HarperDB. Having written an article about HarperDB earlier, gave me a head start to understand how it works. All of the models used in the product such as - posts, users, tags, bookmarks, and other data are all stored and queried from the DB based on the need. We have used multiple NoSql Queries when we did not require extensive querying and we have used Vanilla SQL queries with multiple IFs, WHEREs, and GROUP BYs to query data. I was personally impressed by the performance when we tried to hit multiple query calls to the DB for a single request itself.

---

How’s HarperNode special? ⚡

Though from our perspective we’d like to see the whole of our product very special, here are a few standouts that are our favorites.

• Side By Side Markdown Editor with Preview 📖

HarperNode's markup editor does not require multiple clicks for one to see the preview of the content they type. In our editor, you can preview the content as you type and format any content in the editor.

• Multi-tag search 🏷️

Ever been struggling to find posts with multiple tags? We've got you covered. Thanks to HarperDB’s hash search we can search for multiple tags and fetch posts that are associated with the tags that are searched for.

• Global search 🔍

Search using any keyword or phrase, and you'll get a list of users/ post matching them. Thanks to HarperDB's SQL querying capabilities which made this a piece of cake for us.

• Trending Posts & Top Users 🔥

We have an Explore page that shows us the currently trending posts as well as Top users.

• Neat & clean UI 🧹

The UI itself has been designed with a lot of care and ease for the end-user. We also have dark theme support as well.

We also find the product’s logo pretty cool. Can you see the image merge play that we’ve done here as well? Trust me, a lot of thought went into it and we wanted every element of our product to be meaningful and thus we have crafted each and every aspect of it very thoughtfully. I learned Figma to design this logo that we’ve used and I believe it’s a great job considering it’s my first time. The rest of the features are pretty much similar to Hashnode but our tag search is pretty awesome.

---

Demo and Repositories 💻

A live version of the App can be found here.

Client Side Repo

Server Side Repo

---

Tech stack 🛠️

• React - Front end
• Express/ Node.js - Back end
• Harper DB - Database
• Ant Design - UI Framework
• Vercel - Deployment

---

Difficulties faced 🤨

We faced a couple of hiccups in the HarperDB studio’s UI.

• We couldn't find a way to delete/add a column/attribute or to delete multiple columns. So, we had written custom APIs to perform the operation. It would have been easier if we could do it in the UI itself, if you know a way or a hack to do this please do drop a comment - I’d love to know-how.
• We also couldn't find options to bulk-select and delete rows/entries from the database.

---

What's next? 👀

Since I had very little time to work on this Application, I wasn't able to complete the full version of it. Here are some of the features which you can expect in the upcoming weeks.

• Developer community
• In app chat
• Notifications
• Github, LinkedIn, Twitter, Facebook Auth
• Commenting & Reply
• Share post
• Sponsor user
• Mentions
• Draft articles
• Custom Theme
• Mobile app

---

Wrap Up 🙌

Thanks a lot for reading till the end. Let us know your feedback or improvements on our product if you have any and do not hesitate to tell us if you liked it too. You can check out the other articles I’ve written in my Medium page and very shortly I'll begin my blogging journey with Hashnode. Looking to collaborate with me or share your ideas or thoughts? You can find other links to connect with me here. Hope you had fun knowing our product, happy hackathon-ing! 😎

Are you a caffeine addict? So am I 😉