Linky Notes

Store, organize & filter your notes by tags & style/ format them using Markdown & HTML with inline CSS styles

Build your own easy to filter and internally linked notes system!

Sign up for free here!

<img src="public/linky-notes-app-screen-vadim-gierko.png">

---

Notes

You can create, update & delete notes. Every note has its own id and URL based on the id, so that means that every note is basically the standalone web page.

Everytime you add or update the note, current date is saved automatically.

Tags

To be able to add/ update note, you need to add at least 1 tag to it. There are no limits to how many tags you can add to your notes. There are also no limits about how you can name your tags: it can be as simple as that linky notes or it can be project_status: in progress. Tags are also stored under the unique ids.

You can have an overview of all of your tags on tags page ordered alphabetically, so you can be up to date with all topics you were interested.

Every tag works as a link, so you can click on any tag in any note or on the tags page and you will be redirected to the page with notes filtered by that tag, where you can continue filtering notes by adding new tags to the filter.

Filtering by tag/s

You can filter your notes by one or many tags simultaniously using the built-in tag search engine. Every search/ filter session generates a dedicated URL, so you can navigate between search/filter sessions or save the link to particular session.

Multiline Text

Every note is accepting Markdown syntax. Even if you don't know, what is it, or you wouldn't be using Markdown, it enables you to sava a multiline text: to start a new paragraph you just need to leave an empty line after the previous paragraph (by clicking ENTER). This is the most basic usage of Markdown in this app.

Markdown Formatting

As mentioned before, you can format your notes with Markdown. Using basic Markdown syntax enables you to add:

• headers (h1-h6)
• links
  • external => open a new tab,
  • internal => redirecting to linked existing note inside the app
• lists
  • ordered,
  • unordered,
  • mixed,
  • nested,
• tables,
• text decoration
  • bold,
  • italicized,
  • strikethrough,
• checked & unchecked checkboxes (to simulate todo-lists),
• images (published on Internet),
• horizontal rules,
• footnotes

to your notes.

Check out my app's guide to learn how to use basic Markdown in a few minutes!

These features can make your notes more readable, unique and containing a lot of useful references and additional materials. But... you'll discover, that you can do much more with your notes' content!

Referencing already existing notes (internal links)

As mentioned before, you can add internal links to your notes, what means, that you can refer to other existing note. To do that you need to copy note's id and pass it into your link, like that: [check out this note](/notes/note-id-goes-here). That's all you need. Now, when you click this this link, you'll be redirected to refered note inside the app.

You combine this feature with any other Markdown enabled features mentioned before & create:

• lists (and todo lists) of linked notes inside some note (for example, you can create a note which will be the description of the project or a book or a long article you're writing & such list of linked notes may be a table of content of all project's/ book's/ article's notes),
• put the reference to some note in a footnote,
• put links to notes to tables etc.

HTML with inline CSS styling

In addition to formatting your notes with Markdown syntax, you can also use HTML with inline CSS styling! Of course, that requires some basic knowledge of HTML & CSS, but if you are really motivated to turn your note into complete web page full of colors, shapes, embed elements and any layout, than you can learn, how to do that pretty fast.

I will add some basic tutorial on the topic soon, but... you can start learning right now - this knowledge is available online for free.

Add videos, images &... even the whole websites to your notes!

As been mentioned, thanks to ability of using HTML in your notes, you can also add different embed elements to your note. For example, you can add... the whole website (for instance, Linky Notes) to your notes by adding this: <iframe src="https://vadimgierko.github.io/linky-notes/about" width="100%" height="500px" title="Linky Notes About Page"></iframe>!

I will add some basic tutorial on the topic soon...

Cloud Database => Sync on all devices

All your notes, tags and data are stored in a Cloud, so you can use the app on any device with the Internet connection (mobile, tablet, laptop, desktop) and have access to your synced notes anywhere.

No folders, no labels, no hierarchial structure. Your customizable management system only

Although the linky_notes app has only a few simple functionalities, it offers endless possibilities for organizing, searching and using your notes in the way, which is impossible to many other note apps around. No need for folders, categories, labels etc., so there is no structure or hierarchy to manage (and strugle) with. You can do all of this using tags! You can even simulate other apps (I will add some examples soon).

No more overthinking about how to organize or find your notes. You'll save a tone of time & mental resources you can use for creative activities, learning or developing projects.

To read more, how to efficiently organize your notes, read this app's tutorial.

RWD

The app is made with responsive web design in mind, so it looks nice on any screen size.

Installable PWA (Progressive Web App)

You can use this app in a browser, but also you can install it directly from the browser on your device's desktop/ main screen. You can do that by clicking a download icon, which appears in the URL bar in browser.

Dark Mode

You can use the app in light & dark mode. The app will automatically detect if you're preferring using dark or light mode on your system and change the mode of the app accordingly. You can switch the mode anytime by clicking the mode button in app's navigation menu/ bar.

Privacy

All your notes & data are private, what means that only the logged owner/ author of the note can see it. If you won't share your password with anyone, your data is absolutely secure.

---

Motivation (problem I wanted to solve & solution)

I've made this app first of all for my own needs. I read a lot, create a lot (developing different knowledge-based projects) and... do a lot of notes:

• using different techniques, like: mindmapping, sketchnoting, Cornell Note Taking method
• noting on different materials, like: paper, books pages, phone, laptop
• storing notes... everywhere

So...

Problem

I couldn't manage & organize thousands of my paper & digital notes properly (I have developed my own system, but it's too far from what I need). So I've tried a few note apps, but none of them where satisfying - something always was missing.

Solution

I've understood, that I need to:

• have all notes (paper & digital) in one place
• organize them by tags, because my paper notes were in so many folders and places & also sometimes some notes were needed to be in a few project folders in the same time

So I've decided to build this note app & solved one of my biggest problems thanks to my own app. Now my notes are tagged, organized & easy to find/ filter.

And when I've tested the app, I've decided to share it with the world to let everybody to build an easy to use, but effiecient knowledge/ notes base! Sign up & try here: https://vadimgierko.github.io/linky-notes/!

Technologies I've used in this project:

• React 18.2
• React Router 6.3
• React Redux 8.0
• Redux Toolkit 1.8
• Firebase 9.1
  • Authentication
  • Realtime Database
• React Bootstrap 2.4
• Bootstrap 5.1
• React Icons 4.4
• Bootstrap Icons 1.6
• React Markdown 8.0
• GitHub Pages 3.2
• PWA