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
• Acknowledgments

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

• Solution URL: https://github.com/HarrisonPeace/in-browser-markdown-editor
• Live Site URL: https://harrison-peace-markdown-editor.netlify.app/

Built with

• Semantic HTML5 markup
• SCSS custom properties
• Vue - JS library
• Pinia - State management
• Bootstrap - For styles

Author

• LinkedIn - harrison-peace

Commands

Project setup

yarn install

Compiles and hot-reloads for development

yarn serve

Compiles and minifies for production

yarn build

Lints and fixes files

yarn lint