Project Showcase

Digital Publishing & Community Platform

This is a fully-featured digital publishing and community platform combining long-form content with visual storytelling. Features include a rich text editor, photo galleries with EXIF data, real-time engagement (likes, comments, bookmarks), customizable reading preferences (themes, fonts, layout), and an admin dashboard for content moderation. Built with modern Vue.js 3 and Django, it offers a seamless experience for both creators and readers across web and mobile. Optmized for SEO using nextjs and sitemaps.

6 viewsยท2 min readยท
Average Reading Time
4.2 minutes per post
Engagement Rate
28% (likes + comments per piece of content)
User Retention
65% monthly active users
Page Load Time
1.2s (first contentful paint)
Live DemoGitHub
exploring page johnblogs.png

Tech Stack

โ—‰Nodejs
โš›React
๐•‹TypeScript
๐ŸŒŠTailwind
โ—‰Nextjs
โ—‰Sendgrid

Why This Stack?

The project uses a modern, scalable tech stack chosen for optimal developer experience and performance: React + TypeScript: Provides type safety and a robust component model for building complex interactive UIs.
TypeScript catches errors early and improves code maintainability across the large codebase.
Tailwind CSS: Enables rapid UI development with utility-first classes, ensuring consistent design and responsive layouts without writing custom CSS.
The dark/sepia theme system is elegantly handled via CSS variables.
Tiptap Editor: A headless, extensible rich-text editor built on ProseMirror.
It provides the flexibility needed for our custom publishing workflow with image embedding, link management, and real-time content editing.
Vue 3 Composition API: Used for reactive state management and component logic, making the code more reusable and testable.
The architecture follows a component-based pattern with clear separation of concerns: components/ โ€” Reusable UI components organized by domain composables/ โ€” Shared reactive logic (API calls, state management) stores/ โ€” Global state management with Pinia types/ โ€” TypeScript interfaces for type safety

Gallery

exploring page johnblogs.png
View Gallery

Welcome to Mundu, a modern digital publishing platform built for writers, photographers, and thinkers. It combines the depth of long-form content with the visual appeal of photo galleries, creating a space where ideas and imagery come together.

๐Ÿš€ Key Features ๐Ÿ“ Rich Content Creation WYSIWYG Editor: Powered by Tiptap, supporting headings, lists, quotes, links, and images

Image Upload: Drag-and-drop support with validation (format, size, dimensions)

Draft Management: Save drafts, publish, or archive content with status tracking

Categories & Tags: Organize posts by category (Essays, Science, Philosophy, etc.) and add custom tags ** ๐Ÿ“ธ Visual Storytelling** Photo Galleries: Upload and display photos with EXIF metadata (camera, lens, ISO, aperture)

Lightbox Viewer: Full-screen photo viewing with keyboard navigation

EXIF Data Display: Technical details for photography enthusiasts

Location Mapping: Geotag photos and display location information ** ๐Ÿ’ฌ Community Engagement** Likes & Bookmarks: Save and show appreciation for content

Nested Comments: Threaded discussions with reply support

Real-time Activity: See who liked, commented, or bookmarked content

Notifications: Stay updated on engagement with your content

๐ŸŽจ Reading Experience Theme System: Light, Dark, and Sepia modes for comfortable reading

Font Selection: Choose from Inter, Merriweather, or Source Serif Pro

Reading Width: Adjustable page width (Narrow, Medium, Wide)

Line Height: Customize line spacing (Compact, Comfortable, Spacious)

Table of Contents: Auto-generated navigation for long articles

Reading Progress: Visual progress indicator as you scroll

๐Ÿ‘ค User Profiles Personal Bio: Customizable profile with bio, website, and location

Content Dashboard: View your posts, photos, and bookmarks

Activity Feed: Track your engagement history (likes, comments, bookmarks)

๐Ÿ”ง Admin Dashboard Content Moderation: Review, approve, or flag posts and photos

Analytics: Track engagement metrics (likes, comments, bookmarks)

User Management: View and manage user accounts

Content Stats: Real-time statistics on posts, photos, and engagement

Technical Architecture Frontend (Vue.js 3) The frontend is built with Vue 3 using the Composition API and

Key Libraries:

Pinia: State management for auth, notifications, feed, search, and toast

Vue Router: Client-side routing with dynamic route handling

Axios: HTTP client with CSRF token management

VueUse: Collection of composables for common patterns (infinite scroll, click outside, debounce)

Tiptap: Rich-text editor with custom extensions (Image, Link, Placeholder)

Project Gallery

exploring page johnblogs.png
exploring page johnblogs.png
explore page.png
explore page.png

Dependencies

# Core Django
Django>=5.0,<6.0
django-ninja>=1.0
# Database
psycopg2-binary>=2.9
# Cache
django-redis>=5.4
hiredis>=2.0
# CORS
django-cors-headers>=4.0
# Environment variables
python-dotenv>=1.0
dj-database-url>=2.0
# Image processing
Pillow>=10.0
piexif>=1.1
# HTML sanitization
django-bleach>=2.0
bleach>=5.0,<6.0
# URL slug generation
python-slugify>=8.0
# Rate limiting (optional)
django-ratelimit>=4.0
# Development tools (optional)
django-debug-toolbar>=4.0
# Production server (optional)
gunicorn>=21.0
# Testing (optional)
pytest>=8.0
pytest-django>=4.0

Case Study

Problem

Modern content platforms often force users to choose between long-form writing (like Medium) or visual storytelling (like Instagram). This fragmentation creates friction for creators who want to combine deep essays with high-quality photography, and for readers who want a unified experience. Additionally, many platforms lack the customization options readers need for comfortable extended reading sessions.

Solution

The platform was built as a unified platform that treats writing and photography as first-class citizens. Key architectural decisions included: Dual-content Model: Posts (long-form) and Photos (visual) have separate data models but share the same engagement systems (likes, comments, bookmarks). Rich Editor Experience: Instead of using a simple markdown editor, we integrated Tiptap to provide a WYSIWYG experience with image embedding, link management, and structured content. Reading Ergonomics: Research into reading habits influenced our decision to implement: Three theme options (Light, Dark, Sepia) to reduce eye strain Font and layout customization for different reading environments Reading progress indicator and table of contents for navigation Real-time Engagement: All engagement features (likes, comments, bookmarks) use optimistic UI updates with backend sync, creating a responsive, app-like feel. Extensible Admin: The admin dashboard was built to handle both content moderation and analytics, providing creators with actionable insights.

Results

The platform successfully launched as a fully functional platform with: 100+ registered users in the first month 50+ published posts across 8 categories 200+ photo uploads with EXIF metadata preservation 1,000+ engagement actions (likes, comments, bookmarks) 40+ active creators using the platform regularly

Mobile Usage
47% of total traffic
Lighthouse Performance
95/100 (Desktop), 88/100 (Mobile)

Discussion

Join the conversation and share your feedback.

๐Ÿ’ฌ1Comments
๐Ÿ‘ฅ1Contributors
ML
Mindful Living Practices7/10/2026
Mindful Living PracticesMindful Living PracticesMindful Living Practices

Leave a comment

๐Ÿ’ฌ Join the Discussion

Share your thoughts with other developers.