Blog-It is a premium, open-source content studio for developers. Write your blogs in a unified, modern block editor, optimize with AI tools, and publish directly to Dev.to and GitHub blog repositories.
- 📝 Unified Block Editor: A block-based editor powered by BlockNote, supporting headers, text formatting, list structures, code blocks, and cover image options.
- 📂 Draft Management Workspace: A clean, centralized dashboard to create, view, update, and delete your local drafts.
- ⚙️ Publishing Channel Setup: Fields to configure and verify credentials for developer platforms (like Dev.to and GitHub) from your settings page.
- 📡 Real-time Connection Indicators: Visual, live-status badges integrated into the sidebar showing which accounts are configured.
- 🔐 Secure Authentication: Secure user registration and sign-in utilizing email/password verification and bcrypt password hashing.
- 🖼️ CDN-Optimized Cover Uploads: Media upload utility integrated with ImageKit CDN to upload and store blog cover images.
- Framework: Next.js 16 (Turbopack, App Router, Server Actions)
- Language: TypeScript
- Styling: Tailwind CSS & Sass
- Database: MongoDB & Mongoose ORM
- State Management: Zustand
- Editor Core: BlockNote (ProseMirror-based block editor)
- Image Hosting: ImageKit
- Email Delivery: Resend
blogit/
├── src/
│ ├── app/ # Next.js App Router (pages, actions, and API routes)
│ ├── components/ # Reusable UI & Layout Components
│ │ ├── app-components/ # Feature-specific components (blog editor, settings, sidebar)
│ │ └── ui/ # Core UI components (buttons, dropdowns, cards)
│ ├── controller/ # Server-side business logic
│ ├── hooks/ # Custom React hooks
│ ├── lib/ # Shared utilities, constants, and typescript types
│ ├── models/ # Mongoose schemas (User, Blog, Waitlist)
│ ├── services/ # Frontend API connection services (auth, setting, blog)
│ └── store/ # Zustand client-side stores (user, blog, setting)
├── public/ # Static assets (images, webp, logos)
└── tsconfig.json # TypeScript configurationEnsure you have the following installed:
-
Clone the repository:
git clone https://github.com/KushalXCoder/blogit.git cd blogit -
Install dependencies:
npm install
-
Configure environment variables: Create a
.env.localor.envfile in the root directory and fill in your credentials:# Database & Authentication MONGO_URI="your-mongodb-connection-string" JWT_SECRET="your-secure-jwt-secret" BASE_URL="http://localhost:3000/api" # Email Service (Resend) RESEND_API_KEY="your-resend-api-key" # Image Upload CDN (ImageKit) IMAGEKIT_URL="https://ik.imagekit.io/your-id" IMAGEKIT_PUBLIC_KEY="your-imagekit-public-key" IMAGEKIT_PRIVATE_KEY="your-imagekit-private-key"
-
Run the development server:
npm run dev
Open http://localhost:3000 with your browser to view the application.
To enable multi-platform publishing, navigate to Settings > Account Integrations on your dashboard and configure your keys:
- Go to your Dev.to Account Settings.
- Scroll down to the API Keys section.
- Generate a new key and copy the value.
- Add your profile URL or key in Blog-It's Integration Settings and click Verify.
- Go to your Hashnode Account Settings.
- Under the Developer section, generate a new Personal Access Token.
- Enter the API URL or key in Blog-It's settings and verify.
Once verified, the sidebar will show green connection badges, indicating the platform channels are active and ready.
Contributions make the open-source community an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
- Fork the Project.
- 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.
Distributed under the MIT License. See LICENSE for more information.