---

This project was created as part of FreeCodeCamp's Front End Development Libraries certification. For more details, check out the project description file.

📝 Table of Contents

• About
• Demo
• Features
• Technologies Used
• Getting Started
• Project Structure
• Contributing
• Other FCC Projects
• Authors
• License

ℹ️ About

A modern, feature-rich Markdown previewer built with React, TypeScript, and Tailwind CSS. Transform your markdown into beautiful HTML with real-time preview.

🎥 Demo

✨ Features

• ✨ Real-time Markdown preview
• 🌓 Dark/Light mode with system preference detection
• 📋 Copy functionality for both Markdown and HTML output
• 💅 Beautiful, responsive design with smooth transitions
• 🎨 Syntax highlighting for code blocks
• 📱 Mobile-friendly interface
• 🚀 GitHub Flavored Markdown support
• 💾 Persistent theme preference

🛠️ Technologies Used

• React v17 (as per FreeCodeCamp requirements)
• TypeScript for static typing
• Tailwind CSS for styling
• Vite for fast development and bundling
• ESLint for code linting and quality control
• Prettier for code formatting
• Lucide React for icons and symbols

🏁 Getting Started

Follow these steps to get a local copy up and running:

1. Prerequisites

• Node.js (version 12 or higher)
• npm (usually comes with Node.js)
• Git

2. Clone the Repository

git clone git@github.com:MohamedLamineF/markdown-previewer-FCC.git

3. Navigate to the Project Directory

cd markdown-previewer-FCC

4. Install Dependencies

npm install

5. Start the Development Server

npm run dev

🌳 Project Structure

src/
├── components/
│   ├── Layout/
│   │   ├── Footer.tsx
│   │   └── Header.tsx
│   ├── UI/
│   │   ├── CopyButton.tsx
│   │   └── ThemeToggle.tsx
│   ├── Editor.tsx
│   └── Preview.tsx
├── hooks/
│   ├── useCopy.tsx
│   ├── useDarkMode.tsx
│   └── useMarkdown.tsx
├── types/
│   └── index.ts
├── utils/
│   ├── defaultMarkdown.ts
│   └── stripHtml.ts
├── App.tsx
├── types.ts
└── main.tsx

🛠️ Contributing

We welcome contributions! If you have ideas for improving this project, please feel free to:

• Open an issue to suggest changes or report bugs.
• Submit a pull request with your improvements.

🎯 Other FCC Projects

Check out my other projects from the FreeCodeCamp Frontend Development Libraries certification:

• Random DZ Quote Machine
• Drum Machine
• JavaScript Calculator
• 25 + 5 Clock

✍️ Authors

Made with ❤️ by Lamine 😛

License

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