Skip to content

raravi/notes-client

Repository files navigation

notes-client

A Markdown Editor in React!

license  version  coverage  dependencies  last-commit  Netlify Status

notes is a Markdown web editor that syncs all your notes in realtime and allows you to access them from any browser. This page is intended as a quick reference and showcase.


Headers

Headings are determined by the number of hash(#) at the beginning of the line. Headings from 1 to 6 are allowed. These should be sufficient for all your notes to be organized into different sub-headings.

H1

H2

H3

H4

H5
H6

Emphasis

Emphasis, aka italics, with /backslashes/. Strong emphasis, aka bold, with asterisks. Strikethrough uses two dashes. -Scratch this-.


Lists

This is an ordered list. Start any line with a number. You can start the list with any number. The app will make sure to have the numbers continue in the right order. If you change the first number in the list, the app will recalculate all the numbers in the ordered list.

Go ahead. Change the number in the first list item to 22!

  1. Item 1
  2. Item 2

This is an unordered list. Start the line with an asterisk.

  • Orange
  • Grape
  • Banana

Links

What will we do without links in a digital world?! And so it goes with our notes, that we will have to include links to our favorite websites from time to time. You can create a Link using the syntax [I'm a link](www.google.com).


Code

If you highlight a piece of code in your notes, you can use the code highlight feature. Inline code has back-ticks around it.


Blockquote

You can convert any paragraph into a quote by starting the line with ">"

So do all who live to see such times. But that is not for them to decide. All we have to decide is what to do with the time that is given us. - Gandalf


Copy & Paste

In notes, copy / paste functionality is implemented using the keyboard shortcuts CTRL+C & CTRL+V (CMD+C & CMD+V on mac). And also, this functionality is restricted to content within the app. It's designed this way, so that the application doesn't attempt to access the clipboard, keeping user privacy in mind.


Test it out

Go ahead and use this page to test out the features of the notes app! I hope you enjoy it as well as find it useful!!

Note: You also have to download the server code for this to work completely!


Testing (Jest & React Testing Library)

This project has a code coverage of 100% with functional as well as unit tests written with care.

ko-fi