A full-stack blogging platform inspired by Medium, built with modern web technologies. This project was born from my passion for creating scalable web applications and my desire to understand the intricacies of building a production-grade blogging platform.
When I started this project, I wanted to challenge myself by building a complex application that would help me grow as a developer. The goal wasn't just to clone Medium, but to understand the architectural decisions that go into building a scalable content platform while putting my own spin on it.
- 📚 Browse through a curated collection of articles
- 🏷️ Category-based article organization
- 👤 User profile Updation with real-time updates
- 📱 Fully responsive design optimized for all devices
- 🌙 Dark mode support for comfortable reading
- ✍️ Rich text editor with markdown support
- 📤 Publish/unpublish articles with draft saving
- 📚 Browse through a curated collection of articles
- 🏷️ Category-based article organization
- 📝 Interactive comment system with threading support
- TypeScript: Chose for type safety and better development experience
- React: Selected for its robust ecosystem and component reusability
- Tailwind CSS: Enabled rapid UI development with utility-first approach
- Lucide Icons: Provided consistent and lightweight iconography
- Vercel: Chosen for its seamless deployment and excellent DX
- Cloudflare Workers: Opted for edge computing benefits and global distribution
- PostgreSQL: Selected for robust relational data management
- JWT Authentication: Implemented secure, stateless authentication
- Hono: Chose for its lightweight and performant nature
- Prisma: Selected for type-safe database operations
- Custom NPM Package (@kartikeynamdev/medium-common): Created for code reusability
During this project, I gained valuable experience in:
- Edge Computing: Learned how to leverage Cloudflare Workers for better performance
- Database Design: Improved my skills in designing efficient schemas
- Authentication: Implemented secure user authentication from scratch
- Package Publishing: Created and maintained my first NPM package
- Performance Optimization: Implemented lazy loading and optimization techniques
- Node.js 16.x or higher
- npm or yarn
- Git
- Clone the repository
git clone https://github.com/KartikeyNamdev/Medium.git
cd Medium- Install dependencies
# Install frontend dependencies
cd frontend
npm install
# Install backend dependencies
cd ../backend
npm install- Set up environment variables
# Frontend (.env)
DATABASE_URL="https://backend.kartikeynamdev2003.workers.dev"
JWT_TOKEN=your_token
# Backend (.env)
DATABASE_URL
JWT_SECRET- Run development servers
# Frontend
npm run dev
# Backend
npm run devPOST /api/user/signup- Create new accountPOST /api/user/signin- Sign in
GET /api/v1/blogs- Get all blogsGET /api/v1/blog/:id- Get single blogPOST /api/v1/blog- Create postPUT /api/v1/blog/:id- Update post
Based on my experience building this project, here are some planned enhancements:
- Implement real-time notifications using WebSockets
- Add social authentication options
- Integrate a rich text editor with better image handling
- Add analytics dashboard for writers
- Implement content recommendation system
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Some achievements I'm proud of:
- Successfully implemented edge computing with Cloudflare Workers
- Created and published my first NPM package
- Achieved optimal Lighthouse scores for performance
- Built a scalable authentication system
- Implemented a responsive design that works across all devices
- Design inspired by Medium
- Icons from Lucide React
- The amazing open-source community
- Special thanks to the Cloudflare Workers team for their excellent documentation
Kartikey Namdev - @_KartikeyNamdev
Project Link: https://github.com/kartikeyNamdev/medium