Markdown Previewer

A beautiful, real-time markdown previewer built with React, TypeScript, and Tailwind CSS.

🚀 Features

• Real-time Preview: See your markdown rendered as HTML instantly as you type
• GitHub Flavored Markdown: Full support for GFM syntax including tables, strikethrough, and task lists
• Responsive Design: Works seamlessly on desktop, tablet, and mobile devices
• Maximize/Minimize Panels: Focus on editing or previewing with full-screen modes
• Copy to Clipboard: Easily copy your markdown content with one click
• Beautiful UI: Modern dark theme with smooth animations and micro-interactions
• Line Break Support: Carriage returns are rendered as <br> elements (bonus feature)

🛠️ Technologies Used

• React 18 - Modern React with hooks
• TypeScript - Type-safe development
• Tailwind CSS - Utility-first CSS framework
• Marked.js - Fast markdown parser and compiler
• Lucide React - Beautiful, customizable icons
• Vite - Fast build tool and development server

📋 FreeCodeCamp Requirements

This project satisfies all user stories for the FreeCodeCamp Markdown Previewer challenge:

• ✅ User Story #1: Textarea element with id="editor"
• ✅ User Story #2: Element with id="preview"
• ✅ User Story #3: Real-time preview updates as you type
• ✅ User Story #4: GitHub flavored markdown rendering
• ✅ User Story #5: Default markdown with all required elements
• ✅ User Story #6: Default markdown rendered on load
• ✅ Bonus: Carriage returns rendered as line breaks

🎯 Default Markdown Elements

The editor loads with sample markdown demonstrating:

• Headings (H1, H2, H3)
• Links with hover effects
• Inline code with syntax highlighting
• Code blocks with language-specific formatting
• Lists (ordered and unordered with nesting)
• Blockquotes with custom styling
• Images with responsive design
• Bold and italic text formatting
• Strikethrough text
• Tables with alternating row colors

🚀 Getting Started

Prerequisites

• Node.js (version 16 or higher)
• npm or yarn package manager

Installation

1. Clone the repository:

git clone https://github.com/yourusername/markdown-previewer.git
cd markdown-previewer

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

4. Open your browser and navigate to http://localhost:5173

Building for Production

npm run build

The built files will be in the dist directory.

🎨 Design Features

Color Scheme

• Primary: Slate-based dark theme
• Accents: Blue for editor, Green for preview
• Syntax: Pink for code, Yellow for headings

Typography

• Editor: Monospace font for code editing
• Preview: Optimized prose typography with proper line spacing

Animations

• Smooth transitions between maximize/minimize states
• Hover effects on interactive elements
• Copy button feedback animation

📱 Responsive Breakpoints

• Mobile: Single column layout (< 1024px)
• Desktop: Side-by-side layout (≥ 1024px)
• Maximized: Full-width single panel on all devices

🔧 Configuration

Marked.js Options

marked.setOptions({
  breaks: true,    // Enable line breaks
  gfm: true,      // GitHub Flavored Markdown
});

Tailwind CSS

Custom prose styling for enhanced markdown rendering with dark theme support.

📄 Project Structure

src/
├── App.tsx          # Main application component
├── main.tsx         # React entry point
├── index.css        # Global styles and Tailwind imports
└── vite-env.d.ts    # Vite type definitions

public/
└── vite.svg         # Vite logo

config files:
├── package.json     # Dependencies and scripts
├── tailwind.config.js
├── vite.config.ts
└── tsconfig.json

🧪 Testing

This project includes the FreeCodeCamp test suite. The tests automatically run when you load the application and verify all user story requirements.

🌟 Key Components

State Management

• markdown: Current markdown content
• isEditorMaximized: Editor panel state
• isPreviewMaximized: Preview panel state
• copied: Copy button feedback state

Core Functions

• handleMarkdownChange: Updates markdown state
• copyToClipboard: Copies content with user feedback
• getPreviewHTML: Converts markdown to HTML

🎯 Performance Optimizations

• Efficient re-rendering with React hooks
• Optimized bundle size with Vite
• Smooth scrolling in preview panel
• Debounced markdown parsing

👨‍💻 Author

Ayokanmi Adejola