Skip to content
chk(mark) is a Markdown-enabled notes app
Ruby JavaScript CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
app
bin
client
config
db
lib/tasks
public
test
vendor
Gemfile
Gemfile.lock
Procfile
README.md
Rakefile
config.ru
proposal.md

README.md

logo

JavaScript Style Guide GitHub issues GitHub stars

What is chk(mark) ?

chk(mark) is a note-taking app that makes your life a little bit richer. By using markdown, your notes come to life!

screenshot

Getting Started

Using chk(mark) is simple!

After creating your user, simply click the + icon to add your first note.

The provided text field allows you to type plain text or Markdown.

For instance, entering this:

[I'm an inline-style link](https://www.google.com)
`inline.Code`
_this is italics_

renders as:

I'm an inline-style link
inline.Code
this is italics

Creation Process

wireframe 1

wireframe 2

Setting out to build the app, I was inspired by an article to create a notes app with a twist.

I decided very early on that I was going to use this project as an opportunity to use the Redux workflow. For those unfamiliar with Redux, it defines a method of building a web app where the entire state of the application lives in one place, and can only be mutated through predefined methods, by dispatching what are called actions. The entire web app is made interactive by the dispatch of these actions.

export const updateNote = (id, text) => {
  return {
    type: 'UPDATE_NOTE',
    id,
    text
  }
}

These actions are then processed by functions called reducers, affecting the state in the prescribed manner, seen below.

const fetchingNotes = (state = false, action) => {
  switch (action.type) {
    case 'FETCHING_NOTES':
      return action.value
    case 'SET_NOTES':
      return false
    default:
      return state
  }
}

Concerning Markdown parsing, I decided early on to use a basic parser, and handle the editing of notes myself through the use of a <textarea> tag. This project makes use of the react-markdown npm module for parsing.

User Stories

  • User clicks + icon, opening empty text area.
  • User types note, optionally using Markdown.
  • User clicks the 'save floppy' icon, note is displayed parsed in markdown.
  • User can edit existing note by clicking on it on note list, and clicking the pencil.
  • After clicking the pencil, the note is once again rendered in plain text inside a text area.
  • User can delete an existing note by clicking the trash can icon.

Built With

Acknowledgements

rails logoreact logoredux logo

You can’t perform that action at this time.