{"id":15723435,"url":"https://github.com/sumitbhuia/medium-clone","last_synced_at":"2026-04-17T01:31:57.675Z","repository":{"id":247856458,"uuid":"826810000","full_name":"sumitbhuia/medium-clone","owner":"sumitbhuia","description":"A fullstack clone of a famous blogging website ,MEDIUM . Here i have implemented the frontend and the backend part , replication functionalities of medium .  ","archived":false,"fork":false,"pushed_at":"2025-08-04T11:19:43.000Z","size":517,"stargazers_count":3,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-08-04T15:38:51.609Z","etag":null,"topics":["cloudflare-workers","gemini-api","hono","npm-registry-api","postgresql","prisma","react","tiptap-editor","typescript","vercel-deployment"],"latest_commit_sha":null,"homepage":"https://medium-clone-one-blush.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sumitbhuia.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-07-10T12:24:42.000Z","updated_at":"2025-08-04T11:28:16.000Z","dependencies_parsed_at":"2024-07-17T09:36:42.201Z","dependency_job_id":"eb0a6d50-776d-476c-a4ea-973247ad8ec1","html_url":"https://github.com/sumitbhuia/medium-clone","commit_stats":null,"previous_names":["sumitbhuia/medium-clone-fs","sumitbhuia/medium-clone"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/sumitbhuia/medium-clone","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sumitbhuia%2Fmedium-clone","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sumitbhuia%2Fmedium-clone/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sumitbhuia%2Fmedium-clone/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sumitbhuia%2Fmedium-clone/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sumitbhuia","download_url":"https://codeload.github.com/sumitbhuia/medium-clone/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sumitbhuia%2Fmedium-clone/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31911453,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-16T18:22:33.417Z","status":"ssl_error","status_checked_at":"2026-04-16T18:21:47.142Z","response_time":69,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cloudflare-workers","gemini-api","hono","npm-registry-api","postgresql","prisma","react","tiptap-editor","typescript","vercel-deployment"],"created_at":"2024-10-03T22:11:37.442Z","updated_at":"2026-04-17T01:31:57.650Z","avatar_url":"https://github.com/sumitbhuia.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Medium Clone\n  \u003cimg src=\"https://skillicons.dev/icons?i=sentry,githubactions,supabase,vercel,vitest,typescript,prisma,postgres,docker,cloudflare,workers,vite,react,nodejs,tailwind\"/\u003e\n\nMedium 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.\n\n\n**Live Demo:** [medium-clone-one-blush.vercel.app](https://medium-clone-one-blush.vercel.app/)\n\n[![CI/CD Pipeline](https://github.com/sumitbhuia/medium-clone/actions/workflows/deploy.yml/badge.svg)](https://github.com/sumitbhuia/medium-clone/actions)\n\n\n---\n\n## 📸 Project Showcase\n\u003cimg width=\"1285\" height=\"660\" alt=\"SIGNUP\" src=\"https://github.com/user-attachments/assets/4681155c-d0f2-49ba-8476-db398470e1d4\" /\u003e\n\u003cimg width=\"1282\" height=\"655\" alt=\"SIGNIN\" src=\"https://github.com/user-attachments/assets/85989d42-c5ca-4114-ad1f-1b335a25eb4b\" /\u003e\n\u003cimg width=\"1293\" height=\"670\" alt=\"ALL BLOGS\" src=\"https://github.com/user-attachments/assets/fae59223-6e3d-4188-befd-3d8a21417148\" /\u003e\n\u003cimg width=\"1287\" height=\"667\" alt=\"BLOG\" src=\"https://github.com/user-attachments/assets/3f244bcc-88b9-4495-af73-dafc96c7b32c\" /\u003e\n\u003cimg width=\"1285\" height=\"664\" alt=\"WRITE\" src=\"https://github.com/user-attachments/assets/43598efa-4d39-4418-b0c9-001f84959d0b\" /\u003e\n\u003cimg width=\"1273\" height=\"655\" alt=\"EDIT\" src=\"https://github.com/user-attachments/assets/5e772db2-ddb3-49f7-9635-0dffcfaff553\" /\u003e\n\u003cimg width=\"1287\" height=\"665\" alt=\"PROFILE\" src=\"https://github.com/user-attachments/assets/5a39b606-fab4-45ce-8f57-b98fdff9ed04\" /\u003e\n\u003cimg width=\"1267\" height=\"643\" alt=\"CREATED\" src=\"https://github.com/user-attachments/assets/d4ba1bb6-1982-4367-9e5f-e6eff8d6fca3\" /\u003e\n\u003cimg width=\"1279\" height=\"655\" alt=\"SAVED\" src=\"https://github.com/user-attachments/assets/12322399-c6ae-44f4-b8be-e0ce3fb71ba3\" /\u003e\n\n\n\u003cdiv align=\"center\"\u003e\n\u003cimg src=\"https://github.com/user-attachments/assets/fc759096-ad1d-443d-8d8f-380a9426faaa\" alt=\"Mobile View\" width=\"45%\"/\u003e \n\u003cimg src=\"https://github.com/user-attachments/assets/734156ac-5d4c-4473-871e-e243555544c7\" alt=\"Homepage Feed\" width=\"45%\"/\u003e\n\u003cimg src=\"https://github.com/user-attachments/assets/d3e0641f-4c11-4811-9d6e-69dd1c10d339\" alt=\"User Profile\" width=\"45%\"/\u003e\n\u003cimg src=\"https://github.com/user-attachments/assets/d011706d-a3bc-4be6-9cfa-b809f623043f\" alt=\"Mobile View\" width=\"45%\"/\u003e\n\u003cimg src=\"https://github.com/user-attachments/assets/8a6bf53e-cbb2-40c4-9cc4-f64e84c31f2f\" alt=\"Mobile View\" width=\"45%\"/\u003e \n\u003cimg src=\"https://github.com/user-attachments/assets/0ef766a2-f6bb-4bee-a6c6-1817ae1e1d1b\" alt=\"Blog Post Page\" width=\"45%\"/\u003e\n\n\u003c/div\u003e\n\n\n\n\n---\n\n## ✨ Core Features\n\n\n* **Full User Authentication:** Secure sign-up and sign-in with email/password and OAuth (Google), powered by Supabase Auth.\n* **Rich Text Editor:** A beautiful and intuitive Tiptap-based editor for writing posts, complete with formatting options and support for syntax-highlighted code blocks.\n* **Personalized \"Following\" Feed:** A custom, algorithm-driven feed that shows users the latest posts from authors they follow.\n* **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.\n* **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.\n* **Comprehensive User Profiles:** Public user profiles showcasing their posts, bio, and social stats.\n* **AI-Powered Tagging:** Posts are automatically tagged using Google's Gemini AI if no manual tags are provided, improving content discovery.\n* **Fully Responsive Design:** A clean, mobile-first UI built with Tailwind CSS that looks great on all devices.\n\n---\n\n## 🛠️ Technical Architecture \u0026 Stack\n\nThis 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.\n\n### **Frontend (Vercel)**\n\nThe frontend is a dynamic and responsive single-page application built with a focus on performance and user experience.\n\n* **Framework:** **React 18** with **Vite** for a lightning-fast development experience.\n* **Language:** **TypeScript** for end-to-end type safety.\n* **Styling:** **Tailwind CSS** for a utility-first, responsive design system.\n* **State Management:** **React Context** is used to manage global state like authentication and UI actions, avoiding prop-drilling and unnecessary re-renders.\n* **Performance:**\n    * **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.\n    * **Lazy Loading:** Components like the rich text editor are lazy-loaded to reduce the initial bundle size.\n    * **LRU Caching:** A custom LRU cache is implemented for avatars to reduce network requests and improve performance.\n* **Testing:** **Vitest** and **React Testing Library** are used to write comprehensive unit and integration tests for components and hooks, ensuring UI reliability.\n\n### **Backend (Cloudflare Workers)**\n\nThe backend is a high-performance, serverless API built to run on Cloudflare's global edge network, ensuring low latency for users worldwide.\n\n* **Framework:** **Hono**, a lightweight and incredibly fast web framework designed for edge environments.\n* **Language:** **TypeScript** for robust, type-safe API development.\n* **Database \u0026 ORM:** **PostgreSQL** (hosted on Supabase) with **Prisma** as the ORM.\n    * **Prisma Accelerate** is used for globally distributed database connection pooling and caching, dramatically reducing latency.\n* **Authentication:** **Supabase Auth** is used to handle user authentication and JWT management.\n* **File Storage:** **Supabase Storage** is used for handling all user image uploads.\n* **Error Monitoring:** **Sentry** is integrated to automatically capture and report any backend errors.\n* **Testing:** **Vitest** is used with a mocked Prisma client to write fast and reliable integration tests for all API endpoints.\n\n### **Database Architecture**\n\nThe PostgreSQL database is designed to be robust and scalable, with a key architectural feature:\n\n* **Auth \u0026 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.\n\n### **DevOps \u0026 CI/CD**\n\nTo ensure code quality and automate the deployment process, a full CI/CD pipeline is implemented using **GitHub Actions**.\n\n* **On every push to `master`:**\n    1.  The backend and frontend tests are run in parallel.\n    2.  If all tests pass, the backend is automatically deployed to **Cloudflare Workers**.\n    3.  Simultaneously, the frontend is deployed to **Vercel**.\n* **Source Map Uploads:** The pipeline automatically uploads source maps to **Sentry** for the backend, allowing for easy debugging of production errors.\n* **Secret Management:** All sensitive keys and tokens are securely managed using **GitHub Encrypted Secrets**.\n\n---\n\n## 🧠 Key Architectural Decisions \u0026 What They Demonstrate\n\nThis project goes beyond a simple implementation and showcases several key architectural decisions that reflect a deep understanding of modern web development principles.\n\n* **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.\n* **Decoupled Frontend \u0026 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.\n* **Performance by Design:**\n    * The use of a centralized `HeaderLayout` and React Context to manage state prevents unnecessary re-renders, a common performance bottleneck in React applications.\n    * 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.\n* **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.\n* **Automated \u0026 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.\n\n---\n\n## 🚀 Getting Started Locally\n\n*(You can fill in the specific steps for your environment variables here)*\n\n1.  **Clone the repository:**\n    ```bash\n    git clone https://github.com/sumitbhuia/medium-clone.git\n    cd medium-clone\n    ```\n2.  **Install dependencies :**\n    ```bash\n    npm i\n    ```\n3.  **Set up environment variables:**\n    * Create a `.env` file in the `frontend` directory.\n    * Create a `.dev.vars` file in the `backend` directory.\n    * Populate them with your Supabase, Prisma, and other necessary keys by following the `.env.example` files.\n4.  **Run the development servers:**\n    * In one terminal, run the backend: `cd backend \u0026\u0026 npm run dev`\n    * In another terminal, run the frontend: `cd frontend \u0026\u0026 npm run dev`\n\n---\n\n## 💡 What I Learned\n\nBuilding this project was a fantastic opportunity to go deep into the full-stack development lifecycle. I particularly enjoyed:\n* Designing and implementing a robust, database-backed authentication system that synchronizes perfectly with a third-party service.\n* Architecting a performant frontend with a focus on optimistic UI and efficient state management.\n* 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.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsumitbhuia%2Fmedium-clone","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsumitbhuia%2Fmedium-clone","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsumitbhuia%2Fmedium-clone/lists"}