Built A Full React Clone of Hashnode's Home x HarperDB ! 🎉

#react #css #webdev #programming

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.