Skip to content

Pinterest for markdown notes. Made with React, TypeScript, and Next.js.

License

Notifications You must be signed in to change notification settings

cktang88/spaceboard

Repository files navigation

Spaceboard

Pinterest for Notes.

Try the Demo here!

Features:

  • full Markdown support
  • Saves automatically to IndexedDB/WebSQL/LocalStorage
  • free-form rearranging of cards, with automatic tiling/non-overlapping, snaps to grid
  • resizable cards
  • offline support

example

Inspiration

Inspired by thesephist/thingboard.

Main differences:

  1. people usually don't want to overlap notes, and waste a lot of time rearranging to not overlap
    • bringing to top to focus is not ideal UX
  2. Built with React/Next.js :)
  3. Support markdown

Dev

Tech stack: Next.js, React, ThemeUI/Styled-system, TypeScript

yarn create next-app --example with-typescript
yarn
yarn dev

Todos

  1. drag+drop images/files?
  2. eventually support sharing links...

also:

  • use @theme-ui/typography,@theme-ui/color ?

@theme-ui/prism didn't work, so had to use react-syntax-highlighter instead.

Deploy your own

Deploy the example using Vercel:

Deploy with Vercel

Deploy it to the cloud with Vercel (Documentation).