Markdown Editor

Fully-functional in-browser markdown editor application with a light/dark mode toggle

Type

personal

Stack

ReactJS NextJS ChakraUI
Markdown Editor

Project Overview

Hey there! So, I've been working on this really cool project that involves building an in-browser markdown editor with a preview. It's been a lot of fun so far, and I think it's shaping up to be something really useful.

Mobile views of dictionary web app

JSON api output of dictionary api

Tools and Technologies Used

  • HTML, CSS, and JavaScript
  • Visual Studio Code as the code editor
  • Sass for CSS pre-processing
  • Gulp for automating tasks, such as compiling Sass and optimizing images
  • Git and GitHub for version control and project management

Challenges

There were a few issues that I fixed as well, like handling an edge case when deleting an unsaved active note, and removing input group children as props. I also made some performance improvements, which is always a good thing.

Dictionary web app with light theme and font switched to sans-serif

Approach

In terms of progress, I've added a basic skeleton of the intended design, which includes a sidebar that shifts the editor and preview to the side. I've also implemented a navbar and reducer actions to manage the state of notes. To make things more accessible, I've included some user action messages, toasts, and hover tooltips.

Results

In terms of functionality, I've added a markdown component editor and a preview component, which is really exciting. Plus, I've added a copy markdown button, and made some styling tweaks like hardcoding the height of the editor preview and hiding the save button text in base viewports.

Future

Looking ahead, there are a few more things that I think would be really great to add. For example, it would be awesome to include a search function to make it easier to find specific notes. I also think it would be useful to add some keyboard shortcuts to make things even more efficient. All in all, I'm really excited about where this project is headed and can't wait to see what we can accomplish together!


Other Projects