Markdown Preview App

A comprehensive, modern Markdown editor and preview application built with React 19, featuring real-time rendering, dark mode, file operations, and auto-save functionality.

Features

Core Functionality

• Real-time Markdown Editor: Live markdown editing with syntax highlighting
• Live Preview: Instant HTML rendering with sanitized output
• Split View: Editor, Preview, or Split view modes
• Auto-save: Throttled auto-save to localStorage (2-second delay)
• File Operations: Load and save .md files locally
• Cloud Sync: Save and load documents from cloud APIs (oluwasetemi.dev + JSONPlaceholder fallback)
• Dark Mode: Complete dark/light theme with system preference detection
• Responsive Design: Optimized for desktop, tablet, and mobile

Advanced Features

• XSS Protection: DOMPurify sanitization for safe HTML rendering
• Debounced Rendering: Optimized performance for large files (300ms delay)
• Modern UI: Professional interface with Inter font and smooth animations
• Accessibility: ARIA labels, keyboard navigation, and WCAG AA compliance
• Error Boundary: Graceful error handling with recovery options
• Live Statistics: Character count, line count, word count, and reading time
• API Integration: RESTful API support for document persistence and sharing

Technology Stack

Core Technologies

• React 19+ with functional components and hooks
• React Router v7 for client-side routing
• Vite for fast development and optimized builds
• CSS Modules for scoped styling

Key Libraries

• marked.js - Markdown parsing with GitHub Flavored Markdown support
• DOMPurify - HTML sanitization for XSS prevention
• Lucide React - Beautiful icons
• React Router DOM - Navigation and routing

Development Tools

• ESLint - Code linting and quality
• Prettier - Code formatting
• Tailwind CSS - Utility-first CSS framework (configured)

Quick Start

Prerequisites

• Node.js 18+
• npm or yarn

Installation

1. Clone the repository

   git clone https://github.com/estheticallybawo/markdown-preview-app.git
   cd markdown-preview-app

2. Install dependencies

   npm install

3. Start development server

   npm run dev

4. Open in browser

   http://localhost:5173
   

Available Scripts

npm run dev          # Start development server
npm run build        # Build for production  
npm run preview      # Preview production build
npm run lint         # Run ESLint

Project Structure

src/
├── components/           # Reusable UI components
│   ├── Editor/          # Markdown editor component
│   ├── Preview/         # HTML preview component
│   ├── Navbar/          # Navigation bar
│   ├── ThemeToggle/     # Dark mode toggle
│   ├── ErrorBoundary/   # Error handling
│   └── ui/              # Base UI components (buttons, etc.)
├── contexts/            # React contexts
│   └── ThemeContext.jsx # Theme management
├── hooks/               # Custom React hooks
│   ├── useLocalStorage.js      # localStorage persistence
│   └── useThrottledAutosave.js # Auto-save functionality  
├── lib/                 # Utility libraries
│   ├── markdownParser.js       # Markdown to HTML conversion
│   └── fileOperations.js       # File load/save operations
├── pages/               # Route components
│   ├── Home/           # Main editor page
│   ├── ErrorTest/      # Error boundary testing
│   └── NotFound/       # 404 page
└── styles/             # Global styles

UI/UX Features

Design Standards

• Modern Typography: Inter font family with optimized letter spacing
• Consistent Color Scheme: CSS custom properties for unified theming
• Smooth Animations: 300ms transitions for theme switching and interactions
• Professional Appearance: Clean, minimal design with attention to detail

Accessibility Features

• Semantic HTML: Proper use of <main>, <nav>, <section> elements
• ARIA Labels: Comprehensive ARIA attributes for screen readers
• Keyboard Navigation: Full keyboard support for all interactive elements
• Color Contrast: WCAG AA compliant contrast ratios in both themes
• Focus Management: Clear visual focus indicators
• Screen Reader Friendly: Optimized content structure and labels

Dark Mode

• System Integration: Respects prefers-color-scheme media query
• Persistent Preference: Saves user choice to localStorage
• Complete Coverage: All components support dark theme variants
• Instant Switching: No page reload required for theme changes

File Operations

Local File Operations

• Load .md Files: Upload button supports .md, .markdown, and .txt files
• Save .md Files: Download button saves as .md file with custom filename
• File Validation: Automatic file type checking and sanitization
• Error Handling: User-friendly messages for file operation errors

Cloud Sync (API Integration)

• Save to Cloud: Store documents on remote API with title and tags
• Load from Cloud: Retrieve and restore documents by ID
• Document Management: List, view, and delete cloud-stored documents
• Dual API Support: Primary API (api.oluwasetemi.dev) with JSONPlaceholder fallback
• Offline Resilience: Graceful fallback when APIs are unavailable
• Real-time Sync: Live status updates and sync timestamps

Auto-save

• Throttled: Saves every 2 seconds during active editing
• Smart: Only saves when content actually changes
• Visual Feedback: Shows last save time in toolbar
• localStorage: Persists across browser sessions

Configuration

API Configuration

// Primary API: https://api.oluwasetemi.dev
// Fallback API: https://jsonplaceholder.typicode.com
// Automatic failover with error handling
// RESTful endpoints for CRUD operations

Markdown Parser Settings

// GitHub Flavored Markdown enabled
// Line breaks converted to <br>
// Header IDs generated automatically
// Email addresses not escaped

DOMPurify Configuration

// Whitelist of safe HTML tags and attributes
// XSS attack prevention
// Preserves essential markdown formatting
// Removes dangerous scripts and styles

Error Handling

Error Boundary

• Component-level: Catches React component errors
• Development Info: Detailed error traces in development mode
• User-friendly: Clean error messages in production
• Recovery Options: "Try Again" and "Go Home" buttons

Error Test Route

• Navigate to /error-test to trigger error boundary
• Demonstrates graceful error handling
• Tests error recovery functionality

Browser Support

• Modern Browsers: Chrome 90+, Firefox 88+, Safari 14+, Edge 90+
• Mobile: iOS 14+, Android Chrome 90+
• Features: CSS Grid, Flexbox, CSS Variables, ES2020+

Performance Optimizations

• Debounced Rendering: Prevents lag during rapid typing
• Throttled Auto-save: Reduces localStorage write operations
• CSS Variables: Enables instant theme switching
• Code Splitting: Optimized bundle sizes with Vite
• Lazy Loading: Efficient component loading strategies

Security Features

• XSS Prevention: DOMPurify sanitization of all HTML output
• Safe File Operations: Client-side file handling only
• Input Validation: Filename sanitization and type checking
• Content Security: Markdown parsing with security considerations

Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

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

Acknowledgments

• Marked.js for excellent markdown parsing
• DOMPurify for robust HTML sanitization
• React Team for the amazing framework
• Vite Team for the blazing fast build tool
• Lucide for beautiful icons

Support

If you encounter any issues or have questions:

1. Check the Issues page
2. Create a new issue with detailed description
3. Include steps to reproduce any bugs

---

Built with care using React 19 and modern web technologies