https://github.com/cktang88/spaceboard
Pinterest for markdown notes. Made with React, TypeScript, and Next.js.
https://github.com/cktang88/spaceboard
markdown nextjs notes notes-app offline productivity react typescript web
Last synced: 4 days ago
JSON representation
Pinterest for markdown notes. Made with React, TypeScript, and Next.js.
- Host: GitHub
- URL: https://github.com/cktang88/spaceboard
- Owner: cktang88
- License: mit
- Created: 2020-07-11T17:08:12.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2021-04-01T04:16:51.000Z (about 5 years ago)
- Last Synced: 2023-11-07T17:00:42.855Z (over 2 years ago)
- Topics: markdown, nextjs, notes, notes-app, offline, productivity, react, typescript, web
- Language: TypeScript
- Homepage: https://spaceboard.vercel.app/
- Size: 687 KB
- Stars: 115
- Watchers: 3
- Forks: 7
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-github-projects - spaceboard - Pinterest for markdown notes. Made with React, TypeScript, and Next.js. ⭐120 `TypeScript` (📦 Legacy & Inactive Projects)
README
# Spaceboard
### Pinterest for Notes.
**[Try the Demo here!](https://spaceboard.vercel.app/)**
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
## Inspiration
Inspired by [thesephist/thingboard](https://github.com/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
```bash
yarn create next-app --example with-typescript
yarn
yarn dev
```
## Todos
- remove elem
- fix annoying entering edit mode whenever moving around a card
- enable tabbing to insert tab in textArea (maybe look into https://www.npmjs.com/package/react-simple-code-editor but really need tabs for bullet lists as well...)
4. drag+drop images/files?
5. 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](https://vercel.com):
[](https://vercel.com/import/project?template=https://github.com/vercel/next.js/tree/canary/examples/with-typescript)
Deploy it to the cloud with [Vercel](https://vercel.com/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).