Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/sumitbhuia/medium-clone

A fullstack clone of a famous blogging website ,MEDIUM . Here i have implemented the frontend and the backend part , replication functionalities of medium .
https://github.com/sumitbhuia/medium-clone

cloudflare-workers gemini-api hono npm-registry-api postgresql prisma react tiptap-editor typescript vercel-deployment

Last synced: 2 months ago
JSON representation

A fullstack clone of a famous blogging website ,MEDIUM . Here i have implemented the frontend and the backend part , replication functionalities of medium .

Awesome Lists containing this project

README 

          
# Medium Clone

  



Medium Clone is a feature-rich, production-ready blogging application inspired by Medium. It's built from the ground up with a modern, serverless, and type-safe technology stack, designed to be performant, scalable, and maintainable. This project serves as a comprehensive demonstration of advanced full-stack development practices, from database architecture to automated CI/CD pipelines.



**Live Demo:** [medium-clone-one-blush.vercel.app](https://medium-clone-one-blush.vercel.app/)



[![CI/CD Pipeline](https://github.com/sumitbhuia/medium-clone/actions/workflows/deploy.yml/badge.svg)](https://github.com/sumitbhuia/medium-clone/actions)



---



## 📸 Project Showcase

SIGNUP

SIGNIN

ALL BLOGS

BLOG

WRITE

EDIT

PROFILE

CREATED

SAVED





Mobile View 

Homepage Feed

User Profile

Mobile View

Mobile View 

Blog Post Page






---



## ✨ Core Features



* **Full User Authentication:** Secure sign-up and sign-in with email/password and OAuth (Google), powered by Supabase Auth.

* **Rich Text Editor:** A beautiful and intuitive Tiptap-based editor for writing posts, complete with formatting options and support for syntax-highlighted code blocks.

* **Personalized "Following" Feed:** A custom, algorithm-driven feed that shows users the latest posts from authors they follow.

* **Interactive Engagements:** Users can clap for posts, create nested comments and replies, and bookmark articles for later reading, with all interactions updating optimistically for a seamless UX.

* **Real Image Uploads:** Users can upload and manage their own profile avatars and cover images, as well as featured images for their posts, using Supabase Storage.

* **Comprehensive User Profiles:** Public user profiles showcasing their posts, bio, and social stats.

* **AI-Powered Tagging:** Posts are automatically tagged using Google's Gemini AI if no manual tags are provided, improving content discovery.

* **Fully Responsive Design:** A clean, mobile-first UI built with Tailwind CSS that looks great on all devices.



---



## 🛠️ Technical Architecture & Stack



This project was built with a focus on modern, scalable, and developer-friendly technologies. The architecture is designed to be performant and cost-effective by leveraging serverless platforms.



### **Frontend (Vercel)**



The frontend is a dynamic and responsive single-page application built with a focus on performance and user experience.



* **Framework:** **React 18** with **Vite** for a lightning-fast development experience.

* **Language:** **TypeScript** for end-to-end type safety.

* **Styling:** **Tailwind CSS** for a utility-first, responsive design system.

* **State Management:** **React Context** is used to manage global state like authentication and UI actions, avoiding prop-drilling and unnecessary re-renders.

* **Performance:**

    * **Optimistic UI Updates:** All user engagements (claps, bookmarks, comments) update the UI instantly, providing a snappy, responsive feel while the API request completes in the background.

    * **Lazy Loading:** Components like the rich text editor are lazy-loaded to reduce the initial bundle size.

    * **LRU Caching:** A custom LRU cache is implemented for avatars to reduce network requests and improve performance.

* **Testing:** **Vitest** and **React Testing Library** are used to write comprehensive unit and integration tests for components and hooks, ensuring UI reliability.



### **Backend (Cloudflare Workers)**



The backend is a high-performance, serverless API built to run on Cloudflare's global edge network, ensuring low latency for users worldwide.



* **Framework:** **Hono**, a lightweight and incredibly fast web framework designed for edge environments.

* **Language:** **TypeScript** for robust, type-safe API development.

* **Database & ORM:** **PostgreSQL** (hosted on Supabase) with **Prisma** as the ORM.

    * **Prisma Accelerate** is used for globally distributed database connection pooling and caching, dramatically reducing latency.

* **Authentication:** **Supabase Auth** is used to handle user authentication and JWT management.

* **File Storage:** **Supabase Storage** is used for handling all user image uploads.

* **Error Monitoring:** **Sentry** is integrated to automatically capture and report any backend errors.

* **Testing:** **Vitest** is used with a mocked Prisma client to write fast and reliable integration tests for all API endpoints.



### **Database Architecture**



The PostgreSQL database is designed to be robust and scalable, with a key architectural feature:



* **Auth & Profile Synchronization:** A custom **PostgreSQL trigger** automatically creates a public user profile in our `users` table whenever a new user signs up via Supabase Auth. This ensures that our application's data is always in sync with the authentication system, a common challenge in full-stack applications.



### **DevOps & CI/CD**



To ensure code quality and automate the deployment process, a full CI/CD pipeline is implemented using **GitHub Actions**.



* **On every push to `master`:**

    1.  The backend and frontend tests are run in parallel.

    2.  If all tests pass, the backend is automatically deployed to **Cloudflare Workers**.

    3.  Simultaneously, the frontend is deployed to **Vercel**.

* **Source Map Uploads:** The pipeline automatically uploads source maps to **Sentry** for the backend, allowing for easy debugging of production errors.

* **Secret Management:** All sensitive keys and tokens are securely managed using **GitHub Encrypted Secrets**.



---



## 🧠 Key Architectural Decisions & What They Demonstrate



This project goes beyond a simple implementation and showcases several key architectural decisions that reflect a deep understanding of modern web development principles.



* **Serverless-First Approach:** Choosing Cloudflare Workers and Hono for the backend demonstrates an understanding of modern, scalable, and cost-effective infrastructure. It shows I can build applications that are fast, globally distributed, and have a low operational overhead.

* **Decoupled Frontend & Backend:** The monorepo structure with a clear separation between the frontend and backend allows for independent development and deployment, which is a standard practice in modern teams.

* **Performance by Design:**

    * The use of a centralized `HeaderLayout` and React Context to manage state prevents unnecessary re-renders, a common performance bottleneck in React applications.

    * API endpoints are carefully designed to send only the data needed for a specific view (e.g., sending lightweight `snippets` for the blog list instead of the full post content), minimizing network latency.

* **A Robust Testing Strategy:** The project includes a comprehensive suite of **integration tests** for the backend and **component tests** for the frontend. This demonstrates a commitment to code quality and reliability that is critical in a professional environment.

* **Automated & Reliable Deployments:** The CI/CD pipeline is not just a "nice-to-have." It's a critical piece of infrastructure that acts as a quality gate, ensuring that only tested and verified code makes it to production. This proves I can be trusted to build and maintain a reliable deployment process.



---



## 🚀 Getting Started Locally



*(You can fill in the specific steps for your environment variables here)*



1.  **Clone the repository:**

    ```bash

    git clone https://github.com/sumitbhuia/medium-clone.git

    cd medium-clone

    ```

2.  **Install dependencies :**

    ```bash

    npm i

    ```

3.  **Set up environment variables:**

    * Create a `.env` file in the `frontend` directory.

    * Create a `.dev.vars` file in the `backend` directory.

    * Populate them with your Supabase, Prisma, and other necessary keys by following the `.env.example` files.

4.  **Run the development servers:**

    * In one terminal, run the backend: `cd backend && npm run dev`

    * In another terminal, run the frontend: `cd frontend && npm run dev`



---



## 💡 What I Learned



Building this project was a fantastic opportunity to go deep into the full-stack development lifecycle. I particularly enjoyed:

* Designing and implementing a robust, database-backed authentication system that synchronizes perfectly with a third-party service.

* Architecting a performant frontend with a focus on optimistic UI and efficient state management.

* Building a complete CI/CD pipeline from scratch, which has given me a much deeper appreciation for the importance of automated testing and deployment in a professional workflow.