Frontend Mentor - In-browser markdown editor solution

This is a solution to the In-browser markdown editor challenge on Frontend Mentor.

Markdown editor

Converting Figma design with React JS, styled-components.

My learning goals were:

• Pixel-pretty-close implementation;
• Create, Save, Delete, Update the documents(UI, back-end);
• Use styled-components for styling;
• Work with State management system;

Design preview!

The challenge

• 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
• Bonus: If you're building a purely front-end project, use localStorage to save the current state in the browser that persists when the browser is refreshed
• Bonus: Build this project as a full-stack application

Screenshot so far!

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flex-box
• CSS Grid
• Mobile-first workflow
• React - JS library
• Styled Components - For styles

How to use from git repository:

• clone repository to your local foldergit clone https://github.com/LovelyFox-code/in-browser-markdown-editor;
• install dependencies npm install ;
• first run fake server npm run fake-server;
• split your terminal and run application npm start;
• enjoy exploring;

Still TODO

- [] input validator(navBar)
- [] onClick of the created document does not change
- [] header error: Cannot set headers after they are sent to the client
## Styling
- [] Style markdown side when is no document;

## Minor

- updates seem a bit slow (when change the name )

## Bonus

- syntax highlighting for the code blocks (check example in react-markdown)