[#1 - Hashnode Clone] Project introduction

ยท

3 min read

Intro

First things first. By no means my intention is to create a replica of Hashnode, because that would take me years alone, also I don't think i'm skillful enough to develop an application of the size of Hashnode by myself. What I'm trying to do here is just a personal coding challenge. I'm not an expert and I'm doing this just for the solely purpose of learning.

Well. I gotta say that I LOVE Hashnode. This guys gave developers a place to share their thoughts and knowledge. Tech experts, content creators or just curious noobs like me, found a place where the only thing that you need to do is start blogging. Yeah, the idea is not new, but the execution here was pretty neat! So, lets get just a little bit technical here. This post won't be too very long.

What is Hashnode?

For folks outside the community, Hashnode basically is a blogging platform for the tech industry. It's free of charge and it's conceived to empower developers. This post is hosted on my Hashnode blog.

Technically, Hashnode is a multi-tenant application.

Multi-tenant applications serve multiple customers across different subdomains/custom domains with a single unified codebase.

From: Platforms Starter Kit

So, basically every blog is a subdomain, the work like individual apps but all of them feed on Hashnode's ecosystem so you don't have to think about A LOT of things when building a performative, functional, beautiful, and active blog because Hashnode handles it for you.

How Hashnode is made?

Well, I have no idea, because I don't know anything about Hashnode's architecture. But here are some things I'm assuming, and since the whole point of this project is to make a Hashnode clone, I will have to be making many assumptions.

Ok, this is not an assumption: Hashnode is build on top of React & Next.js, deployed on Vercel using the platform service to handle DNS and CNAME records. I'm assuming they are using Incremental Static Regeneration (ISR) to manage new posts and post editing without redeploys. Also you can tell by inspecting their pages that they use Tailwind for styling the app. I have not idea what DB they are using but most likely they are using some flavor of SQL. They use Markdown as markup language for blogging, so they must had been using something like react-markdown to translate that markdown into HTML.

Clone specs.

Right now we have the following information about Hashnode:

  • Using React and Next.
  • Deployed on Vercel using platforms service.
  • TailwindCSS for styling.
  • Some sort of SQL DB (maybe).
  • Fetching data with ISR (potentially true)

What we don't know:

  • Their server (do they have one?).
  • How they are handling authentication/authorization (NextAuth?).
  • How they are handling DB connections & queries.
  • What kind of WYSIWYG they are using.
  • Their state management tool.
  • Their main algorithms (recommendations, featured posts, etc).

What I'm using:

  • React and Next.js.
  • Next.js API Routes.
  • Vercel's platform starter kit.
  • MySQL and Prisma as ORM.
  • Chakra-UI and Tailwind for UI (YES both, why? Because I want and can ๐Ÿ™ƒ).
  • Qull.js as WYSIWYG. (Not familiar with it, but I just read their docs and it will work for me).
  • Zustand for state management.

So this, is the first post of a series while I'm building this clone. Since this project is mainly to learn, but also to see how far I can go, I'll be using Zustand as my state manager, and probably will switch to MongoDB and Mongoose in the future. For now, that would be it.

Did you find this article valuable?

Support The Unexpected Virtue of Javascript by becoming a sponsor. Any amount is appreciated!

ย