Medium Blog Clone Project

Creating clones of popular websites helps me to experiment with new web development technologies and get ideas of how I can implement the latest software trends in my own projects. This week I recreated the popular blog platform website called Medium.

A modern blog website benefits from many development technologies to improve the user's experience. In this project I used the Next.js JavaScript framework's Incremental Static Regeneration (ISR) capability to dynamically generate and cache static webpages based on data from Sanity CMS.

Sanity CMS

Sanity is a headless content management system that treats content like data simplifying the creation and modification of website content by anyone in the organization. Traditional CMS such as WordPress include front-end components for displaying content. This simplifies the development process but also limits customization and control over the user's experience. A headless CMS only provides back-end services and interfaces with completely custom front-ends through API calls.

Relational vs Graph Database

Sanity is my first time using a graph database. I am familiar with traditional relational databases, data normalization, defining table relations with foreign keys, and writing SQL queries. Sanity uses its own query language called GROQ (Graph-Relational Object Queries).

Relational databases and graph databases are two distinct types of databases with different strengths and use cases. Relational databases excel at handling structured data and complex queries involving multiple tables, while graph databases are better suited for highly interconnected datasets where relationships between entities are as important as the entities themselves. Relational databases use tables with rows and columns to store data, while graph databases use nodes and edges to represent entities and relationships. Ultimately, the choice between the two depends on the specific requirements of the application and the nature of the data being stored.

GROQ is a powerful and flexible query language designed to query structured and unstructured data from various sources. It is an expressive and intuitive language that supports a wide range of data types, including objects, arrays, strings, numbers, and booleans. GROQ allows users to query complex data structures using features like filtering, sorting, pagination, and aggregation, and supports joining data from multiple sources. Its versatility and ease of use make it an ideal choice for developers who need to work with diverse data sources and build complex queries with ease.

GitHub Repo and Live App

You can check out this project's code repository here and you can view the live website here.

This project was based on a project by Sonny Sangha with added support for Next.js 13 and Sanity Studio v3. Check out Sonny's channel here for more of his work.