Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
app
 
 
bin
 
 
 
 
 
 
db
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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

About

chk(mark) is a Markdown-enabled notes app

Resources

Releases

No releases published

Packages

No packages published