open-cms

A modern, full-stack blog application built with industry best practices and open-source technologies.

Note: This is an open-source project. Feel free to use, modify, and contribute!

Tech Stack

Backend

• Express.js with TypeScript
• Prisma ORM with SQLite (PostgreSQL compatible)
• JWT Authentication with bcrypt
• Input validation with Zod
• API documentation with Swagger/OpenAPI

Frontend

• React 18 with TypeScript
• Vite with SWC compiler
• React Router for navigation
• React Query/TanStack Query for state management
• Tailwind CSS for styling
• React Hook Form with validation

Development Tools

• pnpm package manager
• ESLint and Prettier for code quality
• Husky for git hooks
• Jest/Vitest for testing
• Docker for containerization

Features

• 🔐 User Authentication: Secure register/login/logout with JWT
• 📝 Blog Management: Create, read, update, delete blog posts
• 🏷️ Tag System: Organize posts with tags
• 📧 Newsletter: Newsletter subscription management
• 🖼️ Image Upload: MinIO object storage for image uploads with drag-and-drop
• 📷 Image Integration: Unsplash photo picker for post covers
• ✏️ Rich Text Editor: TipTap editor with markdown support
• 🤖 Bot Protection: Google reCAPTCHA integration
• 🔒 Protected Routes: Authorization and authentication
• 📱 Responsive Design: Mobile-first approach
• ⚡ Fast Development: HMR with Vite
• 🧪 Production Ready: Docker support
• 📚 API Documentation: OpenAPI/Swagger docs

Quick Start

Prerequisites

• Node.js >= 18
• pnpm >= 8

Installation

1. Clone the repository

2. Install dependencies:

   pnpm install

3. Set up environment variables:

   # Root environment (for Docker)
   cp .env.example .env
   
   # Backend environment
   cp backend/.env.example backend/.env
   
   # Frontend environment
   cp frontend/.env.example frontend/.env

   Important: Update the .env files with your own values:

   • Get Unsplash API key from https://unsplash.com/developers
   • Get Google reCAPTCHA keys from https://www.google.com/recaptcha/admin
   • Generate a strong JWT secret (minimum 32 characters)

4. Initialize the database:

   cd backend && pnpm db:push && pnpm db:seed

5. Start development servers:

   pnpm dev

The app will be available at:

• Frontend: http://localhost:5173
• Backend API: http://localhost:3000
• API Documentation: http://localhost:3000/api-docs

Project Structure

blog-app/
├── backend/          # Express.js API server
│   ├── src/
│   │   ├── controllers/
│   │   ├── middleware/
│   │   ├── routes/
│   │   ├── models/
│   │   ├── utils/
│   │   └── types/
│   ├── prisma/
│   └── tests/
├── frontend/         # React application
│   ├── src/
│   │   ├── components/
│   │   ├── pages/
│   │   ├── hooks/
│   │   ├── services/
│   │   ├── types/
│   │   └── utils/
│   └── public/
└── docs/            # Documentation

Development

Backend Commands

cd backend
pnpm dev          # Start development server
pnpm build        # Build for production
pnpm test         # Run tests
pnpm db:push      # Push schema to database
pnpm db:seed      # Seed database with sample data

Frontend Commands

cd frontend
pnpm dev          # Start development server
pnpm build        # Build for production
pnpm test         # Run tests
pnpm preview      # Preview production build

MinIO Object Storage

This project uses MinIO for storing uploaded images. MinIO provides S3-compatible object storage.

Quick Setup

# Automated setup (recommended)
./setup-minio.sh

# Manual setup
cd backend && pnpm install
docker-compose up --build

Access Points

• MinIO Console: http://localhost:9001
• Credentials: minioadmin / minioadmin123
• API Endpoint: http://localhost:9000

Documentation

• Quick Start: MINIO_QUICKSTART.md
• Full Setup Guide: MINIO_SETUP.md
• Implementation Details: MINIO_IMPLEMENTATION.md

Features

• 🚀 Drag and drop file upload
• 📊 Real-time upload progress
• ✅ File validation (type, size)
• 🖼️ Image preview before upload
• 🔒 Authentication required
• 🌐 Public URL generation

API Documentation

The API is documented using OpenAPI/Swagger. Once the backend is running, visit: http://localhost:3000/api-docs

Contributing

We welcome contributions! Please see our Contributing Guide for details on:

• Setting up your development environment
• Code style and standards
• Submitting pull requests
• Reporting issues

Security

For security concerns, please review our Security Policy and report vulnerabilities responsibly.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

• Built with React, Express, and Prisma
• UI components styled with Tailwind CSS
• Image integration with Unsplash
• Rich text editing powered by TipTap

Support

If you find this project helpful, please consider:

• ⭐ Starring the repository
• 🐛 Reporting bugs
• 💡 Suggesting new features
• 🤝 Contributing code

Roadmap

• Comment system
• Social media sharing
• Search functionality
• Categories system
• User profiles with avatars
• Post drafts and scheduling
• Analytics dashboard

---

Made with ❤️ by the open-source community