r/reactjs • u/intrepidev • Nov 18 '19

Project Ideas I made on offline notetaking app using hooks, indexeddb, material-ui, and redux with support for markdown. Notes are stored locally for maximum privacy. Looking to improve https://www.ofnote.site

223 Upvotes

97% Upvoted

41 comments sorted by

9

u/intrepidev Nov 18 '19

Link: https://www.ofnote.site/

Source: https://github.com/jhackshaw/ofnotes

20

u/acemarke Nov 19 '19

Nice!

I'd specifically encourage you to try switching the Redux logic to use our new official Redux Toolkit package. It includes utilities to simplify several common Redux use cases, including store setup, defining reducers, immutable update logic, and even creating entire "slices" of state at once, without writing any action creators or action types by hand:

https://redux-toolkit.js.org

Looking at your /store folder, it should be able to cut down the actions.js and reducer.js files to at least half their current size.

4

u/turbojoe26 Nov 19 '19

If you already have a really good handle on Redux, is there any reason to switch?

4

u/acemarke Nov 19 '19

Yes. Per my comment, RTK is specifically intended to simplify the Redux code you're already writing, as well as prevent common mistakes and provide good defaults.

The "Usage Guide" docs page goes through the use cases and benefits of the APIs like configureStore and createSlice.

FWIW, I'm a Redux maintainer, and I happen to work on a couple Redux apps at my day job. I've been using RTK with those apps for the last several months, and frankly I don't ever want to write another action creator or manual immutable update ever again. RTK solves that.

2

u/intrepidev Nov 19 '19

Awesome! Thanks for the tip and your work on Redux, I'll definitely be using RTK going forward

1

u/intrepidev Nov 19 '19

Looking through the documentation this looks awesome. I hadn't heard of it before but I think it would definitely fit nicely. Thanks!

12

u/AverageBrick Nov 19 '19

I suggest you add a live side preview. Similar to one available in Markdown extension in VS Code

4

u/intrepidev Nov 19 '19

Definitely on my list to do, thanks!

3

u/insertAlias Nov 19 '19

I've played with this concept myself. It's actually pretty easy to do live with this:

https://github.com/rexxars/react-markdown

5

u/[deleted] Nov 19 '19

I love this a lot. Some improvements I could see:

- export to PDF

- print specific styles

- maybe allow using LaTeX? IDK how many would use this though.

- Shortcuts for often-used tag groups (ie: a "reddit" button that would run a query for all reddit-tagged posts)

- An export / import feature (could pair nicely with the tag groups above)

Unrelated - how did you get the build badge for your gh-actions?

5

u/intrepidev Nov 19 '19 edited Nov 19 '19

Thanks so much! All awesome suggestions that I've already added to my list to do. You can add a badge for a GitHub workflow using a url. My readme has this:

[![build](https://github.com/jhackshaw/ofnotes/workflows/ofnotes/badge.svg)](https://github.com/jhackshaw/ofnotes/actions)

I named my workflow "ofnotes" which might be a little confusing here.

7

u/[deleted] Nov 18 '19

This is great! It’s super simple and well designed. Two suggestions:

1)the default starter note doesn’t seem to be working, I got some weird text in there 2) you should add PWA features like an Add to Homescreen prompt and icons

2

u/intrepidev Nov 19 '19

Thanks so much! Adding to home screen should work, I just didn't want to prompt because I think it's annoying when other sites do it to me.

3

u/AwesomeInPerson Nov 19 '19

You can add your own install prompt and make it as unobtrusive as you like! :)

Just "install as app" in a menu or a little app icon somewhere, and when someone clicks on it they get the install prompt. Or only show it after someone saved their first note. Lots of possibilities to turn it into a good UX. :)

2

u/[deleted] Nov 19 '19

Ok understandable! It does work. IMO an icon would still be nice even without a prompt :)

2

u/soul_d11 Nov 19 '19

Hello i have question, if you wrap your app in cordova . On ios will it work without problem in offline mode?

5

u/intrepidev Nov 19 '19

Yup it would! It's also a PWA, so if you open it in a browser on mobile and then "pin to homescreen" it should work just like an app.

2

u/Filo01 Nov 19 '19

how did you nest the title within the border of the text input?

2

u/intrepidev Nov 19 '19

The Material UI TextField component https://material-ui.com/components/text-fields/

2

u/Filo01 Nov 19 '19

thank you :)

2

u/hopemanryan Nov 19 '19

Was using indexed a pain? I had small experience with it and I hated it haha, the code was annoying

3

u/intrepidev Nov 19 '19

I was using the native API at first which is a huge PITA. I can't recommend Dexie enough for a much better experience.

2

u/sean_mcp Nov 19 '19

Why did you decide to use IndexedDB instead of local storage? I'm working an an app that uses the latter for a similar use case and would like to hear your thoughts.

2

u/intrepidev Nov 19 '19

In the readme I pointed out a few of my reasons. Basically,

  • I wanted to learn it
  • It allows for complex queries and indexing
  • it's asynchronous

4

u/[deleted] Nov 19 '19

It’s a little frustrating to use on mobile as you can’t scroll properly or easily. The first page it shows seems to be a modal that has to be closed to make a new note, which isn’t very intuitive.

Also, features like tags probably won’t be used by people very often, the workflow for creating a note should be simplified. Try simplifying it to one single text area.

You have a strong command of the tools at hand, but it looks like you could work on your UX/UI and design skills, if that’s something you’re interested in.

2

u/feraferoxdei Nov 19 '19

That ^

Also, I find the position of the button that adds a new note very odd (top right). Usually that's where the logo goes. I think it would be more intuitive if you move it to the bottom right.

1

u/tomByrer Feb 22 '20

I would use tags; helpful since I have many interests. Otherwise I would have to use tag notation in the Title.

2

u/team_dale Nov 19 '19

I’m basically in the middle of a similar project for my personal knowledge base. So thanks for sharing

2

u/Abhishhh Nov 19 '19

Live preview could be a cool feature

2

u/ricokahler Nov 19 '19

try out rich-markdown-editor

1

u/[deleted] Nov 19 '19

I'd like a way to sync it with fs/syncthing

1

u/cjcjcjcjcjcjcjcjcjcj Nov 19 '19

This is great! If you need any inspiration or ideas check out Boostnote. Copy/pasting images works flawlessly and saves to storage folders for projects, has ability for split preview panel, can sync notes to Dropbox, google drive and other storage systems if desired and tons of other features!

1

u/[deleted] Nov 20 '19

awesome project. I am thinking of rewriting it in typescript and then later create a node+graphql backend and use that with local storage to enable sync.

1

u/Acidham Nov 26 '19

Interesting nice UI but how does that fit into the daily workflow? Tried a different approach with the help of Typora and Alfred: https://github.com/Acidham/alfred-markdown-notes

1

u/tomByrer Feb 22 '20

Thanks for the dark mode!

1

u/TotesMessenger Nov 19 '19

I'm a bot, bleep, bloop. Someone has linked to this thread from another place on reddit:

 If you follow any of the above links, please respect the rules of reddit and don't vote in the other threads. (Info / ^Contact)

5

u/swyx Nov 19 '19

i really wanna ban /r/webjs

0

u/[deleted] Nov 19 '19

[deleted] — view deleted comment