Built A Full React Clone of Hashnode's Home x HarperDB ! 🎉
Tags: react, css, webdev, programming
Published: 2021-07-09 05:16:24

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](https://hashnode.com/) x [HarperDB](https://harperdb.io/) 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. 

![giphy.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1625038643357/uOpYCGmMN.gif)

**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 ❣ :**  

![Hashnode Responsive Clone - Saumya Ranjan Nayak](https://cdn.hashnode.com/res/hashnode/image/upload/v1625055725684/UmRioTLTg.png)

**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](https://harperdb.io/developers/documentation/overview/) .
- Has clean  [code examples](https://studio.harperdb.io/resources/examples/)  for how basic functions of a Database work.
- Has even short and simple  [video tutorials](https://studio.harperdb.io/resources/tutorials)  which are super helpful.

This is how the data looks like in my HarperDB instance, clean & cool 😎 👇 :

![HarperDB data](https://cdn.hashnode.com/res/hashnode/image/upload/v1625044018814/rkiMxXxEd.png)

**The  [HarperDB Team](https://harperdb.io/company/the-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.

![Hashnode CLone - Saumya Ranjan Nayak](https://cdn.hashnode.com/res/hashnode/image/upload/v1625039777135/1QJUR3NDS.gif)

### 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 **: 

%[https://github.com/saumya66/Hashnode-HarperDB-Hackathon]

### 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 ! :

%[https://github.com/saumya66/HashnodeHome-Clone]

#### 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 ! 😄👇

%[https://youtu.be/8UPtFTS4MWE]

**I'm really happy that I didn't just quit and built something.** 🙏