A full-stack blogging platform inspired by Medium, where users can write, publish, and engage with stories in a clean and responsive interface.
🔗 Live Demo:medium-clone-by-ankit.vercel.app
- 🔐 Authentication — Register, login, and logout securely with JWT-based sessions
- 📝 Rich Text Editor — Create and format stories using the Jodit Editor with full rich text support
- 📖 Story Management — Create, update, and delete your own stories effortlessly
- 💬 Comments — Add and delete comments on any story to engage with the community
- 👤 Profile Management — Update your profile info and avatar via Cloudinary
- 👥 Follow / Unfollow — Follow other writers and explore their profiles
- 🖼️ Image Uploads — Smooth media handling via Cloudinary CDN
- 📱 Responsive Design — Fully optimized across all devices with Tailwind CSS
- 🔔 Toast Notifications — Real-time feedback using React Hot Toast
| Technology | Purpose |
|---|---|
| React.js | UI library and component architecture |
| React Router DOM | Client-side routing and navigation |
| Tailwind CSS | Utility-first responsive styling |
| Jodit Editor | Rich text editor for story creation |
| React Hot Toast | Toast notifications for user feedback |
| Technology | Purpose |
|---|---|
| Node.js | Server runtime |
| Express.js | REST API framework |
| MongoDB | NoSQL database for storing users, stories, and comments |
| Mongoose | MongoDB ODM for schema modeling |
| Cloudinary | Cloud-based image storage and delivery |
| jsonwebtoken | JWT-based authentication |
| cookie-parser | HTTP cookie parsing middleware |
medium-clone/
├── frontend/ # React.js client application
│ ├── src/
│ │ ├── components/ # Reusable UI components
│ │ ├── pages/ # Route-level page components
│ │ ├── context/ # Auth and global state context
│ │ └── utils/ # Helper functions
│ └── package.json
│
├── backend/ # Node.js + Express server
│ ├── routes/ # API route definitions
│ ├── controllers/ # Business logic handlers
│ ├── models/ # Mongoose schemas (User, Story, Comment)
│ ├── middleware/ # Auth middleware
│ └── package.json
- Node.js >= 18.x
- MongoDB (local or Atlas)
- Cloudinary account
- npm or yarn
git clone https://github.com/ankitjhagithub21/medium-clone.git
cd medium-clonecd backend
npm installCreate a .env file in the backend/ directory:
PORT=5000MONGO_URI=your_mongodb_connection_stringJWT_SECRET=your_jwt_secretCLOUDINARY_CLOUD_NAME=your_cloudinary_cloud_nameCLOUDINARY_API_KEY=your_cloudinary_api_keyCLOUDINARY_API_SECRET=your_cloudinary_api_secretCLIENT_URL=http://localhost:5173Start the backend server:
npm run devcd ../frontend
npm installCreate a .env file in the frontend/ directory:
VITE_API_URL=http://localhost:5000Start the frontend dev server:
npm run devThe app will be running at http://localhost:5173.
- Register / Login — Users sign up and authenticate via JWT stored in HTTP-only cookies
- Create a Story — Write and format content using the Jodit rich text editor with image support
- Publish & Manage — Stories can be updated or deleted by their author at any time
- Engage — Readers can comment on stories; authors can delete comments on their posts
- Connect — Follow other writers, explore their profiles, and discover new content
- Profile — Update your name, bio, and profile picture via Cloudinary upload
| Layer | Platform |
|---|---|
| Frontend | Vercel |
| Backend | Your preferred Node.js host (Render, Railway, etc.) |
| Database | MongoDB Atlas |
| Images | Cloudinary CDN |
Contributions are welcome! Feel free to open an issue or submit a pull request.
- Fork the repository
- Create your feature branch:
git checkout -b feature/your-feature - Commit your changes:
git commit -m 'Add your feature' - Push to the branch:
git push origin feature/your-feature - Open a Pull Request
Ankit Kumar Jha
- Portfolio: ankitjha.vercel.app
- GitHub: @ankitjhagithub21
- LinkedIn: linkedin.com/in/ankitjha3731
This project is open source and available under the MIT License.