Built A Full React Clone of Hashnode's Home x HarperDB ! πŸŽ‰

Hey there, so in this blog, I'm gonna share how did I manage to submit this small project of mine which I was able to build in the last 7 days of the Hackathon through some ups downs in the way.
Story Time... ✍
The Hashnode x HarperDB Hackathon started almost a month ago and as I use Hashnode almost every day so obviously I got to know about it. And started to wonder well what should I make.
Then after some days, I had to appear for my college's semester exams which just made me forget the hackathon due to all the things that were going on.
So, just before a week when I visit the Hashnode homepage I see the banner of the HarperDB hackathon and I just remembered that I had to build something for it and I totally forgot about it ! And now I was also doing some remote work at a place where I was interning.
And I remember thinking either I just have to skip this hackathon as my perfectionist side would not be satisfied with what I make in this small-time or I could just
build something and that would just help me hone some skills and also learn using HarperDB!
πŸ“Œ
I literally had no obvious idea on what to build so as I was on my Twitter profile I remember tweeting saying that I would be building a Clone of Hashnode's homepage in React.
And if you are wondering why I decided to build this it was because :
  • To solidify my Frontend Skills so that I can be just done with the chaotic CSS stuff and be confident in that so that I could now focus on the Backend stuff which is very interesting.

  • And Hashnode's home feed was the perfect thing to do as it was really responsive and had really good & complex components too.

  • I love its UI as a product and also because I don't think anyone had cloned it before.

  • So, here it is a fully Responsive, Static clone of our very friendly Hashnode's Home Feed ❣ :
    Then the question was well - How would I use HarperDB in it? I thought okay, so what if instead of mapping the feed components from a dummy JSON data,
    what if I could get those data from the Harper Database.
    That was a good enough idea for me to get started as I also had to play around with HarperDB to learn how it works.
    Experience with HarperDB πŸš€
    I have seen a lot of awesome blogs that folks like have published on using HarperDB. But I thought let me just play around, read the docs and see what happens.
    And to my surprise I was able to figure whatever I needed in a short amount of time as HarperDB:
  • Has beautiful documentation .
  • Has clean code examples for how basic functions of a Database work.
  • Has even short and simple video tutorials which are super helpful.
  • This is how the data looks like in my HarperDB instance, clean & cool 😎 πŸ‘‡ :
    The HarperDB Team has really put some great work into building this Product. πŸ™Œ
    And in my situation, it also shows how HarperDB helps if you want faster development.
    Building the Server πŸ‘¨β€πŸ’»
    Then I quickly spun up an Express Server with POST and GET endpoints to store these JSON files and retrieve them on my Client side.
    If you are a code junkie here's how the **Blogs GETting **controller looks like :
    import express from "express";
    import axios from "axios";
    
    export const getBlogsData = async (req, res) => {
        const app = express();
        try {
            var body = {
                operation: "search_by_hash",
                schema: "blogs",
                table: "data",
                hash_values: [1, 2, 3, 4, 5, 6],
                get_attributes: ["*"],
            };
    
            var config = {
                method: "post",
                url: process.env.HARPERDB_URL,
                headers: {
                    "Content-Type": "application/json",
                    Authorization: process.env.AUTHORIZATION,
                },
                data: body,
            };
            const resData = await axios(config);
            res.send(resData.data);
        } catch (e) {
            console.log("Could not get data : " + e);
        }
    };
    At first, I used Postman to POST the JSON files to the HarperDB to be able to fetch them on the client-side.
    Deployment πŸ‘‡
  • I have deployed the client-side on Vercel: https://hashnode-home-clone.vercel.app/
  • I have deployed the Node Server on Heroku: https://hashnode-harper.herokuapp.com/
  • Here's the Live App on the Internet: https://hashnode-home-clone.vercel.app/ πŸŽ‰
    *Check out the full code here *:
    Contribution βš›
    *I have laid the foundation but together we can make it big, you can contribute in : *
  • Making it more functional.
  • Adding animations.
  • Adding more Pages to make a wholesome HashNode Clone.
  • ** I'll be waiting to Merge your awesome PRs.** 🎊
    Here's the just Frontend Repository you can Fork, Code & Push Pull Requests to ! :
    I have also made this video regarding this Hackathon where I could not stop but speak about my love for Hashnode and how awesome HarperDB is ! πŸ˜„πŸ‘‡
    I'm really happy that I didn't just quit and built something. πŸ™

    52

    This website collects cookies to deliver better user experience

    Built A Full React Clone of Hashnode's Home x HarperDB ! πŸŽ‰