41
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.
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.
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.
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.
- 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 *:
*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.** π
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. π
41