Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/simonapiz/markdown-previewer
Build a Markdown Previewer
https://github.com/simonapiz/markdown-previewer
freecodecamp-project front-end-development javascript markdown react redux
Last synced: 5 days ago
JSON representation
Build a Markdown Previewer
- Host: GitHub
- URL: https://github.com/simonapiz/markdown-previewer
- Owner: SimonaPiz
- Created: 2024-02-16T15:47:46.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2024-04-10T08:44:04.000Z (9 months ago)
- Last Synced: 2024-04-10T12:45:54.107Z (9 months ago)
- Topics: freecodecamp-project, front-end-development, javascript, markdown, react, redux
- Language: JavaScript
- Homepage: https://markdown-previewer-simonapiz.netlify.app/
- Size: 768 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🔄 Markdown Previewer
> A web app that lets you type markup text in the editor tab and see it rendered in the preview tab.
## Links
- ➡ Solution URL: [Repo GitHub SimonaPiz/](https://github.com/SimonaPiz/Markdown-Previewer)
- ☑ Live Site URL: [markdown-previewer-simonapiz.netlify.app](https://markdown-previewer-simonapiz.netlify.app/)
## Table of contents
- [Links](#links)
- [Overview](#overview)
- [My process](#my-process)
- [Built with](#built-with)
- [Author](#author)
- [Acknowledgements](#acknowledgements)
## Overview
### Objective
Build an app that is functionally similar to this: [markdown-previewer.freecodecamp](https://markdown-previewer.freecodecamp.rocks/). ⬇
## My process
1. 🗂 Initialize the project on [GitHub](https://github.com/SimonaPiz/random-quote-machine) and use Git for log my commits and versioning my work.
2. ✏ I looked at the designs to start planning how to approach the project
3. ⚙ Implemented project features:
- ### [☑issue #1](https://github.com/SimonaPiz/Markdown-Previewer/issues/1) Create Editor React component
Users should be able to:
- [x] see a `textarea` element with a corresponding `id="editor"`
- [x] enter text into the `#editor` element, then the `#preview` element is updated as I type to display the content of the textarea.
### [☑issue #3](https://github.com/SimonaPiz/Markdown-Previewer/issues/3) Menage status with Redux
- [x] add new feature MarkdownConverter
- [x] create markdownConverter slice to menage status, actions and reducers
- [x] create reducers:
- [x] load default text in Editor component
- [x] set text value in Editor on change event
- [x] convert text in Previewer component
- [x] create store
- [x] connect to the component
- [x] enter GitHub flavored markdown into the `#editor` element, then the text is rendered as HTML in the `#preview` element as I type
- [x] When the markdown previewer first loads, the default text in the `#editor` field should contain valid markdown that represents at least one of each of the following elements: a heading element (H1 size), a sub heading element (H2 size), a link, inline code, a code block, a list item, a blockquote, an image, and bolded text.
- ### [☑issue #2](https://github.com/SimonaPiz/Markdown-Previewer/issues/2) Create Previewer React component
Users should be able to:
- [x] see an element with a corresponding `id="preview"`.
- [x] enter text into the `#editor` element, then the `#preview` element is updated as I type to display the content of the textarea.
- [x] When the markdown previewer first loads, the default markdown in the `#editor` field should be rendered as HTML in the `#preview` element.
- [x] **Optional Bonus (you do not need to make this test pass):** My markdown previewer interprets carriage returns and renders them as `br` (line break) elements.
- ### [☑issue #5](https://github.com/SimonaPiz/Markdown-Previewer/issues/5) Extra Features
- [x] User can open editor in full screen
- [x] User can open Previever in full screen
- [x] Responsive adaptation
## Built with
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- React
- Redux
- Marked library to parse markdown
- Interwave react library to safety render HTML in react component
## Author
- Website - [Simona Pizio](https://github.com/SimonaPiz)
- Codepen - [SimonaPiz/pen](https://codepen.io/SimonaPiz/pen/qBvgoxr)
- Freecodecamp - [freecodecamp/SimonaPiz](https://www.freecodecamp.org/SimonaPiz)
## Acknowledgements
This is a solution to the [Build a Markdown Previewer](https://www.freecodecamp.org/learn/front-end-development-libraries/front-end-development-libraries-projects/build-a-markdown-previewer) project to earn the [Front End Development Libraries certification](https://www.freecodecamp.org/learn/front-end-development-libraries/) by FreeCodeCamp.