🔧 TheITApprentice — Looking for Brutal, Technical Feedback

FastReactCMS

A modern, production-ready blog and CMS platform built for developers who want to ship fast without sacrificing control.

Screenshots

Admin Dashboard

Blog Editor with Markdown Preview

Theme Customization Panel + Dark Mode Interface

Dynamic Page Builder

Category & Tag Management

Want to contribute screenshots? Fork the repo, take screenshots, and submit a PR!

Features

FastReactCMS combines the best of modern web development with a developer-first approach:

Core Features

Modern Tech Stack - React 18 + TypeScript + FastAPI + PostgreSQL
Lightning Fast - Vite builds, optimized queries, and smart caching
SEO Optimized - Canonical URLs, SSR for crawlers, meta tags, RSS feeds, sitemaps, and schema …

FastReactCMS

A modern, production-ready blog and CMS platform built for developers who want to ship fast without sacrificing control.

Screenshots

Admin Dashboard

Blog Editor with Markdown Preview

Theme Customization Panel + Dark Mode Interface

Dynamic Page Builder

Category & Tag Management

Want to contribute screenshots? Fork the repo, take screenshots, and submit a PR!

Features

FastReactCMS combines the best of modern web development with a developer-first approach:

Core Features

Modern Tech Stack - React 18 + TypeScript + FastAPI + PostgreSQL
Lightning Fast - Vite builds, optimized queries, and smart caching
SEO Optimized - Canonical URLs, SSR for crawlers, meta tags, RSS feeds, sitemaps, and schema markup
Hybrid SSR - Fast SPA for users, server-rendered HTML for search engines and social media crawlers
Dynamic Pages - Modular block system for building custom pages without code
Theme Customization - Real-time color and typography controls
Dark Mode - Beautiful dark theme across the entire platform
Mobile-First - Responsive design that works on every device
Homepage Builder - Fully customizable homepage with hero, carousel, categories, and stats sections
SEO Diagnostic Tool - Built-in 9-test SEO analyzer for all content

Content Management

Rich Blog Editor - Markdown support, image uploads, and SEO optimization
Category & Tag System - Organize content with unlimited categories and tags
Draft System - Save and publish content when ready
Media Library - Image upload and management with SVG support
Newsletter System - Email subscription and newsletter management (v1.3)
Logo & Favicon Upload - Custom branding with theme-aware light/dark mode support
Comprehensive Site Settings - Centralized control for SEO, analytics, branding, and more

Security & Performance

HTTP-Only Cookies - JWT tokens never exposed to JavaScript (XSS protection)
CSRF Protection - Token-based protection on all state-changing requests
bcrypt Password Hashing - Industry-standard password security
Rate Limiting - Brute force protection on authentication
SVG XSS Prevention - Secure SVG upload validation blocks malicious code
CSP-Compliant Analytics - Google Analytics & AdSense integration following Content Security Policy
Secure by Default - See our Security Audit Report (A+ rating)

Developer Experience

Type-Safe - Full TypeScript coverage
API Documentation - Interactive FastAPI docs at /docs
Hot Reload - Fast development with Vite HMR
Database Migrations - Alembic for version-controlled schema changes
Clean Architecture - Modular, maintainable codebase

Quick Start

Prerequisites

Python 3.10+ with pip
Node.js 18+ with npm
PostgreSQL 14+

Installation

1. Clone the Repository

git clone https://github.com/andynaisbitt/Fast-React-CMS.git
cd Fast-React-CMS

2. Install PostgreSQL

Automated Setup (Linux/macOS):

# One-command setup! This script will:
# - Install PostgreSQL (if not installed)
# - Create database and user with secure password
# - Generate .env file with all secrets
# - Run database migrations
chmod +x deployment/setup-postgres.sh
./deployment/setup-postgres.sh

Manual PostgreSQL Setup:

On Ubuntu/Debian:

# Install PostgreSQL
sudo apt update
sudo apt install -y postgresql postgresql-contrib

# Start PostgreSQL service
sudo systemctl start postgresql
sudo systemctl enable postgresql

# Create database and user
sudo -u postgres psql

# In PostgreSQL prompt:
CREATE DATABASE fastreactcms;
CREATE USER fastreactcms_user WITH PASSWORD 'your_secure_password';
GRANT ALL PRIVILEGES ON DATABASE fastreactcms TO fastreactcms_user;

-- Connect to database
\c fastreactcms
GRANT ALL ON SCHEMA public TO fastreactcms_user;
ALTER DEFAULT PRIVILEGES IN SCHEMA public GRANT ALL ON TABLES TO fastreactcms_user;

-- Exit
\q

On macOS:

# Install via Homebrew
brew install postgresql@14
brew services start postgresql@14

# Create database
createdb fastreactcms

# Create user (use psql to set password)
psql fastreactcms
CREATE USER fastreactcms_user WITH PASSWORD 'your_secure_password';
GRANT ALL PRIVILEGES ON DATABASE fastreactcms TO fastreactcms_user;
\q

On Windows:

Download PostgreSQL from https://www.postgresql.org/download/windows/
Run installer and remember your postgres password
Open SQL Shell (psql) and run:

CREATE DATABASE fastreactcms;
CREATE USER fastreactcms_user WITH PASSWORD 'your_secure_password';
GRANT ALL PRIVILEGES ON DATABASE fastreactcms TO fastreactcms_user;
\c fastreactcms
GRANT ALL ON SCHEMA public TO fastreactcms_user;

3. Backend Setup

cd Backend

# Create virtual environment
python -m venv venv

# Activate virtual environment
# Windows:
venv\Scripts\activate
# macOS/Linux:
source venv/bin/activate

# Install dependencies
pip install -r requirements.txt

# Create .env file
cp .env.example .env

# Edit .env with your database credentials
# DATABASE_URL=postgresql://fastreactcms_user:your_secure_password@localhost/fastreactcms
nano .env  # or use any text editor

# Generate secure secrets for production
# SECRET_KEY (run this):
openssl rand -hex 32

# CSRF_SECRET_KEY (run this):
openssl rand -hex 32

# Add these to .env file

# Run database migrations
alembic upgrade head

# Seed initial data (admin user, categories, sample content)
python scripts/create_admin.py
python scripts/seed_categories.py
python scripts/seed_navigation_theme.py
python scripts/seed_pages.py
python scripts/seed_sample_content.py

# Start backend server
uvicorn app.main:app --reload --host 0.0.0.0 --port 8100

Backend will be running at: http://localhost:8100 API docs available at: http://localhost:8100/docs

4. Frontend Setup

cd Frontend

# Install dependencies
npm install

# Copy environment file
cp .env.example .env
# Ensure VITE_API_URL matches your backend URL

# Start development server
npm run dev

Frontend will be running at: http://localhost:5173

5. First Login

Navigate to http://localhost:5173/admin
Login with the admin credentials you created during create_admin.py
Start creating content!

Technology Stack

Frontend

React 18 - Modern UI library with concurrent features
TypeScript - Type-safe JavaScript
Vite - Lightning-fast build tool and dev server
Tailwind CSS - Utility-first CSS framework
React Router - Client-side routing
Axios - HTTP client with interceptors
React Markdown - Markdown rendering
Framer Motion - Smooth animations

Backend

FastAPI - Modern Python web framework
SQLAlchemy - SQL ORM with full typing support
Alembic - Database migration tool
PostgreSQL - Production-grade relational database
Pydantic - Data validation using Python type annotations
python-jose - JWT token handling
bcrypt - Password hashing
SlowAPI - Rate limiting middleware

Security

HTTP-Only Cookies - Secure JWT storage
CSRF Tokens - Cross-site request forgery protection
CORS - Configured cross-origin resource sharing
Password Hashing - bcrypt with automatic salting
Rate Limiting - Brute force attack prevention
Input Validation - Pydantic schemas on all endpoints

Project Structure

FastReactCMS/
├── Backend/
│   ├── alembic/              # Database migrations
│   ├── app/
│   │   ├── api/v1/           # API endpoints and services
│   │   │   ├── endpoints/    # Route handlers
│   │   │   ├── schemas/      # Pydantic schemas
│   │   │   └── services/     # Business logic
│   │   ├── auth/             # Authentication routes
│   │   ├── core/             # Core config and security
│   │   ├── pages/            # Dynamic pages system
│   │   └── users/            # User management
│   ├── scripts/              # Utility scripts (seeding, etc.)
│   ├── static/               # Static files and uploads
│   ├── .env.example          # Environment variables template
│   ├── alembic.ini           # Alembic configuration
│   └── requirements.txt      # Python dependencies
├── Frontend/
│   ├── src/
│   │   ├── components/       # React components
│   │   │   ├── Admin/        # Admin panel components
│   │   │   ├── Blog/         # Blog components
│   │   │   ├── Layout/       # Layout components
│   │   │   └── Pages/        # Dynamic page components
│   │   ├── pages/            # Page-level components
│   │   ├── services/         # API clients
│   │   ├── state/            # Context providers
│   │   ├── hooks/            # Custom React hooks
│   │   ├── utils/            # Utility functions
│   │   └── types/            # TypeScript type definitions
│   ├── .env.example          # Frontend environment template
│   ├── package.json          # NPM dependencies
│   └── vite.config.ts        # Vite configuration
├── deployment/
│   ├── nginx.conf            # NGINX configuration
│   ├── setup-nginx.sh        # NGINX setup script
│   └── setup-postgres.sh     # PostgreSQL setup script
├── docs/
│   ├── deployment/           # Deployment guides
│   ├── releases/             # Release notes
│   ├── features/             # Feature documentation
│   └── development/          # Contributing & setup guides
├── .gitignore                # Git exclusions
└── README.md                 # This file

Configuration

Backend Environment Variables

Key environment variables in Backend/.env:

# Database
DATABASE_URL=postgresql://user:password@localhost/fastreactcms

# Security (CHANGE THESE!)
SECRET_KEY=your-secret-key-min-32-chars
CSRF_SECRET_KEY=your-csrf-secret-key-min-32-chars

# Admin User
ADMIN_EMAIL=admin@yourdomain.com
ADMIN_PASSWORD=secure-password-min-12-chars

# Cookie Security
COOKIE_SECURE=false  # Set to 'true' in production (requires HTTPS)
COOKIE_SAMESITE=lax

# CORS
CORS_ORIGINS=["http://localhost:5173"]  # Update with production domain

See Backend/.env.example for complete configuration options.

Frontend Environment Variables

Key environment variables in Frontend/.env:

# API URL (must match backend)
VITE_API_URL=http://localhost:8100

See Frontend/.env.example for complete configuration options.

Usage

Creating Your First Blog Post

Navigate to /admin and login
Click "Blog" in the admin sidebar
Click "Create Post"
Fill in:

Title and slug
Content (Markdown supported)
Excerpt for previews
Categories and tags
SEO meta tags
Featured image (optional)

Toggle "Published" and save

Customizing Your Site

Go to /admin/settings/site
Configure across 8 comprehensive tabs:

Homepage: Hero section, CTAs, stats display
Homepage Layout: Carousel, categories, recent posts sections
SEO & Domain: Meta tags, Open Graph, site URL
Branding & Logo: Upload logos and favicons (light/dark mode)
Analytics & Ads: Google Analytics, AdSense (CSP-compliant)
Social Media: Twitter, Facebook, LinkedIn, GitHub links
Contact Info: Email addresses
Email & Newsletter: SMTP configuration, newsletter settings

Building Custom Pages

Go to /admin/pages
Click "Create Page"
Use the block editor to add:

Text blocks
Headings
Images
Code snippets
Callouts
Timelines
And more!

Managing Categories & Tags

Go to /admin/blog/categories or /admin/blog/tags
Add, edit, or delete as needed
Assign colors and icons for better organization

Production Deployment

📖 Complete Deployment Guide Available! See docs/deployment/DEPLOYMENT.md for comprehensive production deployment instructions including:

Google Cloud VM setup

Domain & DNS configuration (with/without Cloudflare)

PostgreSQL installation and tuning

NGINX reverse proxy with SSL (config in deployment/nginx.conf)

Let’s Encrypt SSL certificates

CDN setup (Cloudflare/Google Cloud CDN)

Monitoring and maintenance

Performance optimization

Before Deploying

Critical Security Steps:

Generate Strong Secrets:

# Generate SECRET_KEY (32+ characters)
openssl rand -hex 32

# Generate CSRF_SECRET_KEY (32+ characters)
openssl rand -hex 32

Update Environment Variables:

# Backend/.env
COOKIE_SECURE=true
ENVIRONMENT=production
CORS_ORIGINS=["https://yourdomain.com","https://www.yourdomain.com"]
SECRET_KEY=<generated-secret>
CSRF_SECRET_KEY=<generated-secret>
ADMIN_PASSWORD=<strong-password-min-12-chars>

Enable HTTPS - Required for secure cookies 1.

Update CORS Origins - Add your production domain(s) 1.

Database Backups - Configure automated backups

See our Security Audit Report for detailed security guidance.

Deployment Options

FastReactCMS can be deployed to:

VPS (DigitalOcean, Linode, AWS EC2)
PaaS (Heroku, Railway, Render)
Docker (Docker Compose, Kubernetes)
Serverless (AWS Lambda + RDS, Google Cloud Run)

Build for Production

Frontend:

cd Frontend
npm run build
# Output in Frontend/dist/

Backend:

cd Backend
# Install production dependencies
pip install -r requirements.txt

# Run with production server (gunicorn recommended)
gunicorn app.main:app --workers 4 --worker-class uvicorn.workers.UvicornWorker --bind 0.0.0.0:8100

API Documentation

FastReactCMS provides interactive API documentation via FastAPI:

Swagger UI: http://localhost:8100/docs
ReDoc: http://localhost:8100/redoc

Key Endpoints

Authentication

POST /auth/login - Login with credentials
POST /auth/register - Register new user
GET /auth/me - Get current user
POST /auth/refresh - Refresh authentication token

Blog

GET /api/v1/blog/posts - List blog posts (paginated)
GET /api/v1/blog/posts/{slug} - Get single post
POST /api/v1/blog/posts - Create post (admin)
PUT /api/v1/blog/posts/{id} - Update post (admin)
DELETE /api/v1/blog/posts/{id} - Delete post (admin)

Categories & Tags

GET /api/v1/blog/categories - List categories
GET /api/v1/blog/tags - List tags
POST /api/v1/blog/categories - Create category (admin)
POST /api/v1/blog/tags - Create tag (admin)

Contributing

We welcome contributions! Please see docs/development/CONTRIBUTING.md for guidelines.

Development Workflow

Fork the repository
Create a feature branch: git checkout -b feature/amazing-feature
Make your changes
Run tests (if applicable)
Commit your changes: git commit -m 'Add amazing feature'
Push to branch: git push origin feature/amazing-feature
Open a Pull Request

Code Style

Frontend: ESLint + Prettier (run npm run lint)
Backend: Black + isort for Python formatting
Commits: Use conventional commit format

Security

FastReactCMS takes security seriously. We’ve completed a comprehensive security audit with an A+ (95/100) rating.

Security Features

HTTP-Only Cookies (JWT never exposed to JavaScript)
CSRF Protection on all state-changing requests
bcrypt Password Hashing with automatic salting
Rate Limiting on authentication endpoints
Secure CORS Configuration
Input Validation with Pydantic schemas
Auto Token Refresh System

See our complete Security Audit Report for details.

Reporting Security Issues

DO NOT open public GitHub issues for security vulnerabilities.

Instead:

Contact the maintainers privately
Provide detailed information about the vulnerability
Allow 48 hours for initial response

We take all security reports seriously and will respond promptly.

Roadmap

✅ v1.4 (Current - December 2025)

Core Features:

✅ Blog system with categories and tags
✅ Dynamic page builder with modular blocks
✅ Theme customization (colors, typography, navigation)
✅ SEO optimization (meta tags, slugs, RSS feeds, sitemap, canonical URLs)
✅ Admin panel with content management
✅ User authentication (JWT + HTTP-only cookies)
✅ Security hardening (CSRF, bcrypt, rate limiting, SVG XSS prevention)
✅ CSP-compliant Google Analytics & AdSense integration
✅ Responsive design (mobile/tablet/desktop)
✅ Dark mode support
✅ Image upload and management (PNG, JPG, WebP, SVG)
✅ Markdown support for content
✅ Server-side rendering for search engine crawlers

Newsletter System (v1.3):

✅ Email newsletter subscription system
✅ SMTP configuration (SendGrid/custom)
✅ Subscriber management with search
✅ Newsletter composer with HTML support
✅ Public unsubscribe page
✅ Mobile-optimized admin interface
✅ Active/Inactive subscriber tracking

Homepage Customization (v1.4):

✅ Fully customizable hero section (title, subtitle, badge, CTAs)
✅ Homepage stats display (articles, readers, "100% free" badges - configurable or hidden)
✅ Featured carousel with crossfade transitions and autoplay (7-second intervals)
✅ Categories showcase with customizable limits (1-20 categories)
✅ Recent posts grid with flexible layouts (1-50 posts)
✅ Toggle sections on/off via admin panel (hero, carousel, categories, recent posts)
✅ Mobile-optimized homepage layout with responsive breakpoints
✅ Carousel performance optimization (reduced re-renders, smooth transitions)

SEO & Social Media (v1.4):

✅ Canonical URL System - Custom short URLs for posts and pages (e.g., /RAM-Price-Spikes)
✅ Server-Side Rendering (SSR) - Hybrid approach for crawlers only
Regular users → Fast SPA (603 bytes)
Crawlers (Googlebot, Facebookbot, LinkedIn) → SSR with meta tags (2,876 bytes)
✅ Social Media Previews - Proper Open Graph and Twitter Card meta tags
✅ SEO Diagnostic Tool - 9 automated tests (meta tags, headings, images, links, etc.)
✅ Comprehensive Meta Tags - Homepage and blog posts fully optimized
✅ Performance Optimized SSR - LRU cache (100 pages, 1-hour TTL), <50ms cached, <200ms uncached

Branding & Assets (v1.4):

✅ Logo upload system (light & dark mode variants)
✅ Theme-aware favicon system (automatically switches with theme)
✅ SVG upload support with XSS security validation
✅ Favicon management through admin panel
✅ Default minimalist wizard/apprentice favicons included
✅ Database-driven branding (no .env files needed)

Mobile UX Improvements (v1.4):

✅ Mobile-first blog post redesign with optimized typography
✅ Blog post sidebar optimization for tablets and mobile
✅ Responsive navigation with mobile hamburger menu
✅ Touch-friendly admin interface

Analytics & Monetization (v1.4):

✅ CSP-compliant Google Analytics 4 integration
✅ CSP-compliant Google AdSense integration
✅ ID validation prevents injection attacks
✅ No innerHTML usage (security hardened)
✅ DNT (Do Not Track) respect
✅ GDPR-compliant settings
✅ Database-driven configuration (update without rebuilds)
✅ Multiple ad unit types (article, sidebar, banner)

Recent Updates:

v1.4 (Dec 2025): Canonical URLs + SSR, favicon upload, homepage customization, logo upload, CSP-compliant analytics, SEO diagnostics, mobile UX improvements (77 commits)
v1.3 (Dec 2025): Newsletter system with complete subscriber management
v1.2 (Dec 2025): Mobile UX improvements across admin panel
v1.1 (Dec 2025): Production deployment fixes and optimizations
v1.0 (Nov 2025): Initial production release

📋 Future Enhancements (Community Driven)

FastReactCMS is designed as a developer-friendly foundation - not a bloated all-in-one solution.

We intentionally keep the core lean so developers can:

Build custom features without fighting the framework
Add their own integrations and services
Extend the block system with custom components
Implement their own authentication providers
Create custom admin pages

Potential community additions:

Comment system with moderation
Advanced media library (image optimization, CDN)
Content scheduling (publish at specific dates)
Email notifications for new posts
Social media auto-posting
Multi-author support with roles
Search functionality (full-text PostgreSQL)
Content versioning and revisions
Newsletter templates and automation
A/B testing for newsletters

Not Planned:

❌ Multi-language/i18n (English only, fork if needed)
❌ Plugin marketplace (developers extend directly)
❌ E-commerce features (use dedicated solutions)
❌ All-in-one bloat (we stay focused on core CMS)

FAQ

Q: Is FastReactCMS free? A: Yes! FastReactCMS is open source under the MIT License. Use it for personal projects, commercial work, or anything in between.

Q: Can I use this in production? A: Absolutely! FastReactCMS is production-ready and has passed comprehensive security audits. Just ensure you follow the production deployment guidelines.

Q: Do I need to know React and Python? A: For basic usage (creating content, customizing themes), no coding is required. For advanced customization, knowledge of React and Python/FastAPI is helpful.

Q: Can I customize the design? A: Yes! The theme system allows extensive customization through the admin panel. For deeper changes, you can modify the React components and Tailwind CSS.

Q: Is there a hosted version? A: Not currently. FastReactCMS is self-hosted, giving you complete control over your data and infrastructure.

Q: What databases are supported? A: PostgreSQL is recommended and fully tested. SQLite works for development but is not recommended for production.

License

FastReactCMS is released under the MIT License.

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED.

Acknowledgments

FastReactCMS is built with amazing open-source technologies:

React - UI library
FastAPI - Backend framework
Vite - Build tool
Tailwind CSS - CSS framework
PostgreSQL - Database
SQLAlchemy - ORM
Alembic - Database migrations
And many more amazing projects!

Support

Documentation: Check this README and inline code documentation
API Docs: Interactive docs at /docs when running the backend
Issues: Report bugs or request features on GitHub Issues
Discussions: Ask questions and share ideas on GitHub Discussions

Ready to build something amazing? Get started with the Quick Start guide above!

Happy blogging!

FastReactCMS

Screenshots

Features

Core Features

FastReactCMS

Screenshots

Features

Core Features

Content Management

Security & Performance

Developer Experience

Quick Start

Prerequisites

Installation

1. Clone the Repository

2. Install PostgreSQL

3. Backend Setup

4. Frontend Setup

5. First Login

Technology Stack

Frontend

Backend

Security

Project Structure

Configuration

Backend Environment Variables

Frontend Environment Variables

Usage

Creating Your First Blog Post

Customizing Your Site

Building Custom Pages

Managing Categories & Tags

Production Deployment

Before Deploying

Deployment Options

Build for Production

API Documentation

Key Endpoints

Authentication

Blog

Categories & Tags

Pages

Contributing

Development Workflow

Code Style

Security

Security Features

Reporting Security Issues

Roadmap

✅ v1.4 (Current - December 2025)

📋 Future Enhancements (Community Driven)

FAQ

License

Acknowledgments

Support

Similar Posts