{"id":23307284,"url":"https://github.com/simonapiz/markdown-previewer","last_synced_at":"2026-04-11T03:04:00.489Z","repository":{"id":223648776,"uuid":"758568711","full_name":"SimonaPiz/Markdown-Previewer","owner":"SimonaPiz","description":"A web app that lets you type markup text in the editor tab and see it rendered in the preview tab","archived":false,"fork":false,"pushed_at":"2024-04-10T08:44:04.000Z","size":786,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-01-03T16:20:38.537Z","etag":null,"topics":["freecodecamp-project","front-end-development","javascript","markdown","react","redux"],"latest_commit_sha":null,"homepage":"https://markdown-previewer-simonapiz.netlify.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SimonaPiz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-02-16T15:47:46.000Z","updated_at":"2024-04-10T13:31:26.000Z","dependencies_parsed_at":"2024-12-20T12:31:45.184Z","dependency_job_id":"e34c962c-d0f8-491e-a472-8b6a99a4deae","html_url":"https://github.com/SimonaPiz/Markdown-Previewer","commit_stats":null,"previous_names":["simonapiz/markdown-previewer"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/SimonaPiz/Markdown-Previewer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimonaPiz%2FMarkdown-Previewer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimonaPiz%2FMarkdown-Previewer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimonaPiz%2FMarkdown-Previewer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimonaPiz%2FMarkdown-Previewer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SimonaPiz","download_url":"https://codeload.github.com/SimonaPiz/Markdown-Previewer/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimonaPiz%2FMarkdown-Previewer/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31667034,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-10T17:19:37.612Z","status":"online","status_checked_at":"2026-04-11T02:00:05.776Z","response_time":54,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["freecodecamp-project","front-end-development","javascript","markdown","react","redux"],"created_at":"2024-12-20T12:29:49.550Z","updated_at":"2026-04-11T03:04:00.466Z","avatar_url":"https://github.com/SimonaPiz.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🔄 Markdown Previewer\n\u003e A web app that lets you type markup text in the editor tab and see it rendered in the preview tab.\n\n\n![Desktop preview](https://github.com/SimonaPiz/Markdown-Previewer/assets/91121660/98c1be68-7e22-4f45-a0f7-0af375abbcf3)\n\n## Links\n\n- ➡ Solution URL: [Repo GitHub SimonaPiz/](https://github.com/SimonaPiz/Markdown-Previewer)\n- ☑ Live Site URL: [markdown-previewer-simonapiz.netlify.app](https://markdown-previewer-simonapiz.netlify.app/)\n\n\n## Table of contents\n\n- [Links](#links)\n- [Overview](#overview)\n- [My process](#my-process)\n- [Built with](#built-with)\n- [Author](#author)\n- [Acknowledgements](#acknowledgements)\n\n## Overview\n\n### Objective \n\nBuild an app that is functionally similar to this: [markdown-previewer.freecodecamp](https://markdown-previewer.freecodecamp.rocks/). ⬇\n\n![image](https://github.com/SimonaPiz/Markdown-Previewer/assets/91121660/fc2a6cfd-99cb-44be-89be-18a458caec6c)\n\n\n## My process\n\n1. 🗂 Initialize the project on [GitHub](https://github.com/SimonaPiz/random-quote-machine) and use Git for log my commits and versioning my work.\n\n2. ✏ I looked at the designs to start planning how to approach the project\n  \n3. ⚙ Implemented project features:\n\n   - ### [☑issue #1](https://github.com/SimonaPiz/Markdown-Previewer/issues/1) Create Editor React component \n\n     Users should be able to:\n       - [x] see a `textarea` element with a corresponding `id=\"editor\"`\n       - [x] enter text into the `#editor` element, then the `#preview` element is updated as I type to display the content of the textarea.\n         ### [☑issue #3](https://github.com/SimonaPiz/Markdown-Previewer/issues/3) Menage status with Redux\n\n           - [x] add new feature MarkdownConverter \n           - [x] create markdownConverter slice to menage status, actions and reducers\n           - [x] create reducers:\n             - [x] load default text in Editor component\n             - [x] set text value in Editor on change event\n             - [x] convert text in Previewer component \n           - [x] create store\n           - [x] connect to the component\n       \n       - [x] enter GitHub flavored markdown into the `#editor` element, then the text is rendered as HTML in the `#preview` element as I type\n       - [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.\n          \n   - ### [☑issue #2](https://github.com/SimonaPiz/Markdown-Previewer/issues/2) Create Previewer React component       \n\n     Users should be able to:\n\n     - [x] see an element with a corresponding `id=\"preview\"`.\n     - [x] enter text into the `#editor` element, then the `#preview` element is updated as I type to display the content of the textarea.\n     - [x] When the markdown previewer first loads, the default markdown in the `#editor` field should be rendered as HTML in the `#preview` element.\n     - [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.\n\n   - ### [☑issue #5](https://github.com/SimonaPiz/Markdown-Previewer/issues/5) Extra Features\n     - [x] User can open editor in full screen\n     - [x] User can open Previever in full screen\n     - [x] Responsive adaptation\n    \n\n## Built with\n\n- Semantic HTML5 markup\n- CSS custom properties\n- Flexbox\n- React\n- Redux\n- Marked library to parse markdown\n- Interwave react library to safety render HTML in react component\n\n## Author\n\n- Website - [Simona Pizio](https://github.com/SimonaPiz)\n- Codepen - [SimonaPiz/pen](https://codepen.io/SimonaPiz/pen/qBvgoxr)\n- Freecodecamp - [freecodecamp/SimonaPiz](https://www.freecodecamp.org/SimonaPiz)\n\n## Acknowledgements\nThis 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.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimonapiz%2Fmarkdown-previewer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsimonapiz%2Fmarkdown-previewer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimonapiz%2Fmarkdown-previewer/lists"}