checkyoself icon indicating copy to clipboard operation
checkyoself copied to clipboard

Markdown Grammar Checker for blog posts, etc.

Check Yo Self

A site to check the grammar of your markdown blog posts/texts.

Shields MIT Licence GitHub commits Mastodon Follow

Live Demo

Deploy to Netlify


How to use:

  1. πŸŒ€ Clone the repo at https://github.com/twhite96/checkyoself.git
  2. πŸƒ Run: npm i to install dependencies.
  3. 🎊 Have fun with it.

πŸ’ͺ🏽 Motivation for this app

Frustrated by Grammarly and Hemingway apps' inability to process markdown blog posts, I decided to make my own site to process markdown blog posts or other texts. I settled on React Bulma for the UI because it is lightweight and flexible, like Bulma.

πŸ₯ž Stack

I am currently using React-Bulma, create-react-app, write-good, and SimpleMDE markdown editor. Eventually I'd like to use Firebase for data persistence.

πŸ‘ŠπŸ½ Wins

The components are written for the most part; there are some breaking changes with SimpleMDE editor and so I am not upgrading to the latest version.

I've also become more cognizant of React patterns and concepts.

For instance,

😐 Difficulties

Getting the styling was easy. At first, getting the navigation together with the react-transition-group library was difficult as I didn't have much experience with React when I started this project for instance, this hamburger button:


export default ({ open, ...props }) => (
  <div className={open ? "burger-menu open" : "burger-menu"} {...props}>
    <div className="bar1" key="b1" />
    <div className="bar2" key="b2" />
    <div className="bar3" key="b3" />
  </div>
);

I didn't know what it was doing. What was this line: {open ? "burger-menu open" : "burger-menu"} and what did it do?

πŸšΆβ€β™‚οΈNext steps

⚑ Refactor ⚑

πŸ“˜ Further reading

Meta

Distributed under the MIT license. See LICENSE for more information.

https://github.com/twhite96/checkyoself