50
loading...
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.
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! 📌
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.
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:
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.
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.
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 : *
** I'll be waiting to Merge your awesome PRs.** 🎊
I'm really happy that I didn't just quit and built something. 🙏
50