A web-based note-taking app with GitHub sync and Markdown support. (WIP)

Warning: TakeNote is still in active development. You can visit takenote.dev to see the work in progress, but your account and the notes you create are temporary will not be persisted. All data will be lost once GitHub integration is complete.

TakeNote was made by developers for developers - a simple, plain-text note-taking app for the web with Markdown support. What you see is what you paste. No WYSIWIG, no formatting pasted from the web, and no features you don't need or want.

Drag-and-drop notes into categories, instantly search through notes, and pin your favorites to the top.

TakeNote is made for the web, so you can use it anywhere without downloading anything.

Enjoy a beautiful, clean design reminiscent of your IDE with light and dark themes.

In progress!

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

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.

CLIENT_ID=xxx
CLIENT_SECRET=xxxx

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

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

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 front end. To run both of these servers concurrently, run the dev command.

npm run dev

Go to localhost:3000 to view the app.

API requests will be proxied to port 5000 automatically.

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

npm run build && npm run start

Go to localhost:5000 to view the app.

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

docker build --build-arg CLIENT_ID=xxx -t takenote:mytag .
docker run -p CLIENT_ID=xxx CLIENT_SECRET=xxxx NODE_ENV=development 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.

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

Run unit and component tests.

npm run test

Run Cypress e2e tests.

npm run e2e:open

├── config
│   ├── webpack.common.js     # Webpack shared configuration
│   ├── webpack.dev.js        # Webpack development configuration (dev server)
│   └── webpack.prod.js       # Webpack productuon configuration (dist output)
├── cypress                   # End-to-end tests
├── docs                      # Assets for documentation
├── patches                   # Overrides for dependencies
├── public                    # Files that will write to dist on build
├── src
│   ├── client                # React client side code
│   └── server                # Node/Express server side code
├── .editorconfig             # Configures editor rules
├── .gitattributes            # Additional git attributes
├── .gitignore                # Lists files for git to ignore
├── .prettierrc               # Code convention enforced by Prettier
├── .travis.yml               # Continuous integration and deployment config
├── CHANGELOG.md              # List of significant changes
├── cypress.json              # Cypress configuration
├── deploy.sh                 # Deployment script for Docker in production
├── Dockerfile                # Docker build instructions
├── jest.config.js            # Jest configuration
├── LICENSE                   # License for this open source project
├── nodemon.json              # Nodemon configuration
├── package-lock.json         # Package lockfile
├── package.json              # Dependencies and additional information
├── README.md
├── seed.js                   # Seed the app with data for testing
├── seed.js                   # Seed the app with data for testing
├── tsconfig.json             # Typescript configuration
└── tsconfig.test.json        # Typescript test configuration

TakeNote is possible thanks the all these open source languages, libraries, and frameworks.

TakeNote is an open source project, and contributions of any kind are welcome! Open issues, bugs, and enhancements are all listed on the 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.

The project is written in TypeScript, React and Redux. TypeScript is set to strict mode, with no implicit any allowed. The formatting style for the project is set by Prettier.

• Use non-default exports for components
• Imports are ordered and separated by built-in modules -> external modules -> internal modules -> css/assets/other

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 💻 🐛

• A big thank you to David Bock for logo design.

• Tania Rascia

This project is open source and available under the MIT License.