takenote: A TypeScript repository from ismailmechbal

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.

Fast and simple

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.

Intuitive

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

Beautiful

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

Sync to GitHub

In progress!

Reviews

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

Setup

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.

CLIENT_ID=xxx
CLIENT_SECRET=xxxx

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

Installation

git clone git@github.com: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.

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.

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.

# 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.

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.

# In one window, run the application in test mode
npm run dev:test

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

Folder Structure

Explanation the structure of files and directories within TakeNote.

├── config/                    # Configuration
│   ├── cypress.config.js      # Cypress end-to-end test configuration
│   ├── jest.config.js         # Jest unit/component test configuration
│   ├── nodemon.config.json    # Nodemon configuration
│   ├── webpack.common.js      # Webpack shared configuration
│   ├── webpack.dev.js         # Webpack development configuration (dev server)
│   └── webpack.prod.js        # Webpack productuon configuration (dist output)
├── assets/                    # Supplemental assets
├── patches/                   # Overrides for dependencies
├── public/                    # Files that will write to dist on build
├── src/                       # All TakeNote app source files
│   ├── resources/             # Shared resources
│   ├── client/                # React client side code
│   │   ├── api/               # Temporary placeholders for mock API calls
│   │   ├── components/        # React components that are not connected to Redux
│   │   ├── contexts/          # React context global state without Redux
│   │   ├── router/            # React private and public routes
│   │   ├── sagas/             # Redux sagas
│   │   ├── selectors/         # Redux Toolkit selectors
│   │   ├── slices/            # Redux Toolkit slices
│   │   ├── styles/            # Sass style files
│   │   ├── types/             # TypeScript types
│   │   ├── utils/             # Utility functions
│   │   └── index.tsx          # Client side entry point
│   └── server/                # Node/Express server side code
│       ├── handlers/          # Functions for API endpoints
│       ├── middleware/        # Middleware for API endpoints
│       ├── router/            # Route API endpoints
│       ├── utils/             # Backend utilities
│       └── index.ts           # Server entrypoint
├── tests/                     # Test suites
│   ├── e2e/                   # Cypress end-to-end tests
│   └── unit/                  # React Testing Library and Jest tests
├── .dockerignore              # Files ignored by Docker
├── .editorconfig              # Configures editor rules
├── .gitignore                 # Files ignored by git
├── .prettierrc                # Code convention enforced by Prettier
├── .travis.yml                # Continuous integration and deployment config
├── CHANGELOG.md               # List of significant changes
├── deploy.sh                  # Deployment script for Docker in production
├── Dockerfile                 # Docker build instructions
├── LICENSE                    # License for this open source project
├── package-lock.json          # Package lockfile
├── package.json               # Dependencies and additional information
├── README.md
├── seed.js                    # Seed the app with data for testing
└── tsconfig.json              # Typescript configuration

Scripts

An explanation of the package.json scripts.

Command	Description
`dev`	Run TakeNote in a development environment
`dev:test`	Run TakeNote in a testing environment
`client`	Start a webpack dev server for the frontend
`server`	Start a nodemon dev server for the backend
`build`	Create a production build of TakeNote
`start`	Start a production server for TakeNote
`test`	Run unit and component tests
`test:e2e`	Run end-to-end tests in the command line
`test:e2e:open`	Open end-to-end tests in a browser
`test:coverage`	Get test coverage
`postinstall`	Apply patches

Technologies

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

Tech	Description
Codemirror	Browser-based text editor
TypeScript	Static type-checking programming language
Node.js	JavaScript runtime for the backend
Express	Server framework
React	Front end user interface
Redux	Global state management
Webpack	Asset bundler
Sass	Style preprocessor
OAuth	Protocol for secure authorization
ESLint	TypeScript linting
Jest	Unit testing framework
Cypress	End-to-end testing framework

Contributing

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.

Style notes

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

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