Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/taniarascia/takenote

📝 ‎ A web-based notes app for developers.
https://github.com/taniarascia/takenote

github-sync hacktoberfest markdown-editor note-taking notes notes-app typescript

Last synced: 5 days ago
JSON representation

📝 ‎ A web-based notes app for developers.

Host: GitHub
URL: https://github.com/taniarascia/takenote
Owner: taniarascia
License: mit
Created: 2019-09-27T04:48:13.000Z (over 5 years ago)
Default Branch: master
Last Pushed: 2024-06-29T22:57:36.000Z (7 months ago)
Last Synced: 2025-01-14T10:12:51.459Z (12 days ago)
Topics: github-sync, hacktoberfest, markdown-editor, note-taking, notes, notes-app, typescript
Language: TypeScript
Homepage: https://takenote.dev
Size: 10.6 MB
Stars: 6,935
Watchers: 103
Forks: 1,284
Open Issues: 81
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE

Awesome Lists containing this project

awesome - taniarascia/takenote - 📝 ‎ A web-based notes app for developers. (TypeScript)
awesome-codebases - Takenote - A web-based notes app for developers. (**Awesome Codebases** [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome))
jimsghstars - taniarascia/takenote - 📝 ‎ A web-based notes app for developers. (TypeScript)
awesome-starred - taniarascia/takenote - 📝 ‎ A web-based notes app for developers. (typescript)
stars - takenote - based notes app for developers. | taniarascia | 6945 | (TypeScript)
my-awesome-starred - taniarascia/takenote - 📝 ‎ A web-based notes app for developers. (TypeScript)
stars - takenote - based notes app for developers. | taniarascia | 6905 | (TypeScript)

README

A web-based notes app for developers. (Demo only)

![Screenshot](./assets/takenote-light.png)

## Features

- **Plain text notes** - take notes in an IDE-like environment that makes no assumptions
- **Markdown preview** - view rendered HTML
- **Linked notes** - use `{{uuid}}` syntax to link to notes within other notes
- **Syntax highlighting** - light and dark mode available (based on the beautiful [New Moon theme](https://taniarascia.github.io/new-moon/))
- **Keyboard shortcuts** - use the keyboard for all common tasks - creating notes and categories, toggling settings, and other options
- **Drag and drop** - drag a note or multiple notes to categories, favorites, or trash
- **Multi-cursor editing** - supports multiple cursors and other [Codemirror](https://codemirror.net/) options
- **Search notes** - easily search all notes, or notes within a category
- **Prettify notes** - use Prettier on the fly for your Markdown
- **No WYSIWYG** - made for developers, by developers
- **No database** - notes are only stored in the browser's local storage and are available for download and export to you alone
- **No tracking or analytics** - 'nuff said
- **GitHub integration** - self-hosted option is available for auto-syncing to a GitHub repository (not available in the demo)

## About

TakeNote is a note-taking app for the web. You can use the demo app at [takenote.dev](https://takenote.dev). It is a static site without a database and does not sync your notes to the cloud. The notes are persisted temporarily in local storage, but you can download all notes in markdown format as a zip.

Hidden within the code is an alternate version that contain a Node/Express server and integration with GitHub. This version involves creating an OAuth application for GitHub and signing up to it with private repository permissions. Instead of backing up to local storage, your notes will back up to a private repository in your account called `takenote-data`. Due to the following reasons I'm choosing not to deploy or maintain this portion of the application:

- I do not want to maintain a free app with users alongside my career and other commitments
- I do not want to request private repository permissions from users
- I do not want to maintain an active server
- I do not want to worry about GitHub rate limiting from the server
- There is no way to batch create many files from the GitHub API, leading to a suboptimal GitHub storage solution

However, I'm leaving the code available so you can feel free to host your own TakeNote instance or study the code for learning purposes. I do not provide support or guidance for these purposes.

TakeNote was created with TypeScript, React, Redux, Node, Express, Codemirror, Webpack, Jest, Cypress, Feather Icons, ESLint, and Mousetrap, among other awesome open-source software.

## Reviews

> _"I think the lack of extra crap is a feature."_ — Craig Lam

## Demo Development

Clone and install.

```bash
git clone [email protected]:taniarascia/takenote
cd takenote
npm i
```

Run a development server.

```bash
npm run client
```

## Full Application Development (self-hosted)

### Pre-Installation

Before working on TakeNote locally, you must create a GitHub OAuth app for development.

Go to your GitHub profile settings, and click on **Developer Settings**.

Click the **New OAuth App** button.

- **Application name**: TakeNote Development
- **Homepage URL**: `http://localhost:3000`
- **Authorization callback URL**: `http://localhost:3000/api/auth/callback`

Create a `.env` file in the root of the project, and add the app's client ID and secret. Remove `DEMO` variable to enable GitHub integration.

```bash
CLIENT_ID=xxx
CLIENT_SECRET=xxxx
DEMO=true
```

> Change the URLs to port `5000` in production mode or Docker.

### Installation

```bash
git clone [email protected]:taniarascia/takenote
cd takenote
npm i
```

#### Development mode

In the development environment, an Express server is running on port `5000` to handle all API calls, and a hot Webpack dev server is running on port `3000` for the React frontend. To run both of these servers concurrently, run the `dev` command.

```bash
npm run dev
```

Go to `localhost:3000` to view the app.

> API requests will be proxied to port `5000` automatically.

#### Production mode

In the production environment, the React app is built, and Express redirects all incoming requests to the `dist` directory on port `5000`.

```bash
npm run build && npm run start
```

Go to `localhost:5000` to view the app.

#### Run in Docker

Follow these instructions to build an image and run a container.

```bash
# Build Docker image
docker build --build-arg CLIENT_ID=xxx -t takenote:mytag .

# Run Docker container in port 5000
docker run \
-e CLIENT_ID=xxx \
-e CLIENT_SECRET=xxxx \
-e NODE_ENV=development \
-p 5000:5000 \
takenote:mytag
```

Go to `localhost:5000` to view the app.

> Note: You will see some errors during the installation phase, but these are simply warnings that unnecessary packages do not exist, since the Node Alpine base image is minimal.

### Seed data

To seed the app with some test data, paste the contents of `seed.js` into your browser console.

## Testing

Run unit and component/integration tests.

```bash
npm run test
```

> If using Jest Runner in VSCode, add `"jestrunner.configPath": "config/jest.config.js"` to your settings

Run Cypress end-to-end tests.

```bash
# In one window, run the application
npm run client

# In another window, run the end-to-end tests
npm run test:e2e:open
```

## Contributing

TakeNote is an open source project, and contributions of any kind are welcome and appreciated. Open issues, bugs, and feature requests are all listed on the [issues](https://github.com/taniarascia/takenote/issues) tab and labeled accordingly. Feel free to open bug tickets and make feature requests. Easy bugs and features will be tagged with the `good first issue` label.

View [CONTRIBUTING.md](CONTRIBUTING.md) to learn about the style guide, folder structure, scripts, and how to contribute.

## Contributors

Thanks goes to these wonderful people:

_{Tania Rascia}
💻 🤔 🐛

_hankolsen
💻 🐛 ⚠️

_{Joseph Perez}
💻

_Paul
💻 ⚠️

_{Martin Rosenberg}
💻 🐛 🚧

_Melissa
💻

_{Jason Towle}
💻

_{Mark Erikson}
🤔

_{Alphonse Bouy}
🐛

_dave2kb
🎨 🤔

_{Devin McIntyre}
💻

_{Jeffrey Fisher}
🐛

_{Alex Dong}
💻

_Publicker
💻

_{Jakub Naskręski}
💻 🐛 ⚠️

_{Benny O}
💻

_{Justin Payne}
💻

_marshmallow
🚧

_{Jose Felix}
💻

_{Nikolay Kirsh}
💻

_{Mudassar Ali}
💻

_{Nathan Bland}
🐛 💻

_{Craig Lam}
💻 🐛 ⚠️

_{Ashinze Ekene}
🐛 💻

_{Harry Sullivan}
💻

_{Mauricio Martínez}
💻

_Black-Hole
💻

_{Frank Blendinger}
💻

_{Eduardo Reveles}
💻

_{Leo Royzengurt}
💻 🐛

_kcvgan
💻 🐛

_{Cody Towstik}
💻 ⚠️ 🐛

_{Vincent Dörig}
⚠️ 💻

_{Michael Huynh}
💻 🐛

_{Joshua Bloom}
💻

_Mxchaeltrxn
💻 ⚠️

_{Konrad Staniszewski}
📖

_Yohix
🚧

_{Jackson Elfers}
💻

_Vamshi
💻

_Simos
💻 ⚠️

_Yankee
💻 🤔 ⚠️

_G-Milevski
💻

_{Kody Clemens}
💻 ⚠️ 🐛

_{Vladimir Yamshikov}
💻 🐛

_{Ronan D'Souza}
💻

_{Roland Fredenhagen}
💻

_{Pranjali Pramod Patil}
⚠️

_{Chris Bargmann}
🤔 💻

_{Jadhiel Vélez}
💻 🐛

_{Lucas Machado}
💻 🐛 ⚠️

_xsteadybcgo
🐛

_{Marius Robert RWANDARUSHYA}
⚠️

_{Isaac Komezusenge}
⚠️

_{Maxime Ishimwe}
⚠️

_{Marcos Spanholi}
⚠️

_{Roshan Rajeev}
💻

_fistonhn
⚠️

_{Raffaele Ferri}
🚧

_{Dusabe Johnson}
⚠️

_tomasvn
💻

_{Lucas Ribeiro}
💻 ⚠️

_{Bartosz Zagrodzki}
💻

_{Mahendran Mookkiah}
💻

_hkhattabii
💻

_{Federico Pomponii}
💻