Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

React Markdown Editor web application

Chris 270

@chriscodes17

Desktop design screenshot for the In-browser markdown editor coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


Users are able to save their data on the browsers local storage. On initial page landing, users will have 0 files in their storage.

This project was a great way to incorporate the React Context API. The current file state had to be in 2 different components, one in the nav bar component (edit title name) and one in the editor component (main content). I decided to create a context for the markdown data which consisted of 2 states (All files and currentFile). This also made it easier to update the file title and content whenever the user made any changes (onChange). Once the user is ready to save, those changes will be implemented and saved into storage for the user.

This is also a good fullstack project, I would like to eventually make this into that with an auto save and file download features.

If you find any bugs or issues feel free to comment or tips!

Happy Coding!

Community feedback

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord