https://github.com/coderooz/blog-version-control-system
A modern full-stack blog editing platform built with Next.js 15, TypeScript, MongoDB, and TipTap rich text editor. It features version control, allowing users to track, compare, and restore changes in blog posts — similar to Git for content writing.
https://github.com/coderooz/blog-version-control-system
blog nextjs tailwindcss version-control
Last synced: 5 months ago
JSON representation
A modern full-stack blog editing platform built with Next.js 15, TypeScript, MongoDB, and TipTap rich text editor. It features version control, allowing users to track, compare, and restore changes in blog posts — similar to Git for content writing.
- Host: GitHub
- URL: https://github.com/coderooz/blog-version-control-system
- Owner: coderooz
- License: mit
- Created: 2025-06-20T16:14:12.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2025-08-22T15:28:40.000Z (7 months ago)
- Last Synced: 2025-08-22T17:51:42.228Z (7 months ago)
- Topics: blog, nextjs, tailwindcss, version-control
- Language: TypeScript
- Homepage:
- Size: 102 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Blog Version Control System (Blog VCS)
**Version**: V1 — scalable foundation for rich blog versioning.
## Stack
- Next.js 15 (App Router)
- TypeScript
- Tailwind CSS 4+
- TipTap (rich text editor)
- MongoDB + Mongoose
- `diff-match-patch` for diffing versions
- Optional: Shadcn UI components, Zustand for state management
---
## Directory Structure
```
blog-vcs/
├── app/
│ ├── layout.tsx ← Root layout & navigation
│ ├── page.tsx ← Redirects to editor
│ ├── editor/page.tsx ← Blog editing UI
│ ├── versions/page.tsx ← Version list & preview
│ ├── compare/page.tsx ← Version comparison UI
│ └── api/ ← CRUD APIs for versions
├── components/blocks/ ← Reusable UI components
│ ├── Editor.tsx
│ ├── VersionList.tsx
│ ├── DiffViewer.tsx
│ └── Notification.tsx
├── lib/ ← App business logic
│ ├── db.ts
│ └── versionControl.ts
├── models/ ← Mongoose schemas
│ ├── BlogPost.ts
│ └── Version.ts
├── styles/ ← Global CSS
│ └── globals.css
├── next.config.js
├── postcss.config.cjs
├── package.json
└── README.md
````
---
## Getting Started
1. **Clone**
```bash
git clone https://github.com/coderooz/Blog-Version-Control-System.git
cd Blog-Version-Control-System
````
2. **Install**
```bash
npm install
```
3. **Configure Environment**
Create a `.env.local` file with:
```
MONGODB_URI=your_mongodb_connection_string
NEXT_PUBLIC_APP_URL=http://localhost:3000
```
4. **Run in Development**
```bash
npm run dev
```
Visit [http://localhost:3000/editor](http://localhost:3000/editor) to start editing.
---
## Features (V1)
* Rich text editing with TipTap.
* Version saving (creates a snapshot on save).
* Version listing, preview, and timestamp.
* Version diffing using `diff-match-patch`.
* Reverting—restores content and creates a new version.
* Clean UI with Tailwind CSS; ready for Shadcn UI enhancements.
---
## Future roadmap (beyond V1)
* **V2**: Authentication (e.g., NextAuth.js), multi-user, permissions.
* **V3**: Markdown support + side-by-side diff view.
* **V4**: UI polish with Shadcn UI components, mobile responsiveness.
* **V5**: CI/CD, testing (unit + integration), code quality tools.
---
## Contributing
Contributions, issues, and feature requests are welcome! Let’s make Blog VCS even better together.
---
## License
MIT License
---