web

Notesnook Web

The web app is built using React, Typescript & Javascript.

Try it out! | Developer guide | How to build? | Desktop app

Getting started

Build instructions

Before you start, it is recommended that you read the contributing guidelines.

Setting up the development environment

Requirements:

1. Node.js
2. git
3. NPM (not yarn or pnpm)

Before you can do anything, you'll need to install Node.js on your system.

Once you have completed the setup, the first step is to clone the monorepo:

git clone https://github.com/streetwriters/notesnook.git

# change directory
cd notesnook

Once you are inside the ./notesnook directory, run the preparation step:

# this might take a while to complete
npm install

Now you can finally start the web app:

npm run start:web

If you'd like to build in production mode:

npm run build:web

# serve the app locally
npx serve apps/web/build

Developer guide

This project is in a transition state between Javascript & Typescript. We are gradually porting everything over to Typescript, so if you can help with that, it'd be great!

The tech stack

We try to keep the stack as lean as possible:

1. React v17: UI framework
2. Typescript/Javascript: The logical side of the app
3. Theme UI: For components, themeing etc.
4. Zustand: State management
5. Playwright: Runs all our e2e tests
6. localforage: Database & persistence
7. libsodium: Encryption

Project structure

1. src/: 99% of the source code lives here & this is also where you'll spend most of your time.
   1. index.tsx: the app entry point responsible for loading the appropriate view based on the current route.
   2. app.js: the default route that contains the whole note-taking experience (notes list, navigation, editor, etc.)
   3. views/: Contains all the views, including views for login, settings, notes, notebooks & topics.
   4. components/: All the reusable UI components are here (e.g., button, editor, etc.)
   5. stores/: Contains the glue code & logic for all the UI interactions. For example, when you pin a note, the src/stores/note-store.js is responsible for everything, including refreshing the list to reflect the changes.
   6. navigation/: All the routing & navigation logic lives here. The app uses two kinds of routers:
      1. routes.js: This contains all the main routes like /notes, /notebooks with information on what to render when the user goes to a particular route.
      2. hash-routes.js: The hash routes are used for temporary navigation, like opening dialogs or opening a note. These look like #/notes/6307bbd65d5d5d5cb86f6f74/edit.
   7. interfaces/: This is where the platform-specific storage & encryption logic lives. These interface implementations are used by the @notesnook/core to provide capabilities such as persistence & encryption.
   8. hooks/: Contains all the general-purpose React hooks
   9. utils/: These are general-purpose utilities for performing various tasks such as downloading files, storing configuration, etc.
   10. common/: This directory contains the shared logic between the whole app. For example, this is where the database is instantiated for use throughout the app.
   11. commands/: These are commands the desktop app uses for things like checking for updates, storing backups etc.
2. desktop/: The Electron layer for the desktop app lives here. (This should be moved outside into its own project).

Running the tests

When you are done making the required changes, you need to run the tests. We use Playwright as the testing framework. The tests can be started with a single command:

npm run test:web