Frontend Mentor - In-browser markdown editor solution

This is a solution to the In-browser markdown editor challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• Built with
• Author
• Commands

Overview

The challenge

Users should be able to:

• Create, Read, Update, and Delete markdown documents
• Name and save documents to be accessed as needed
• Edit the markdown of a document and see the formatted preview of the content
• View a full-page preview of the formatted content
• View the optimal layout for the app depending on their device's screen size
• See hover states for all interactive elements on the page
• Use localStorage to save the current state in the browser that persists when the browser is refreshed

Screenshot

Links

• Live Site URL: https://previewmd.netlify.app/

Built with

• Semantic HTML5 markup
• Highlight.js - Syntax Higlighting
• Marked.js - Parse Markdown
• Tailwind CSS
• Vite React - JS library
• React Toastify - For Notifications
• React Modal
• Zustand - Global State management

Author

• LinkedIn - Peter Uadiale
• Twitter - Peter Uadiale

Commands

Project setup

npm install

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Run Project

npm run dev