Skip to content

Latest commit

 

History

History
 
 

web

README.md

Notesnook web screenshot

Notesnook Web

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

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

Getting started

The desktop app?

You can find all the desktop related code in the desktop/ directory. Since it uses the web app directly, we are keeping both together. (We should probably move it to it's own project at some point.)

Downloads & releases

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 be spending most of your time.
    1. index.tsx: the app entrypoint 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 reusuable UI components are here (e.g. button, editor, etc.)
    5. stores/: Contains the glue code & logic for all the UI interaction. 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 2 kinds of routers:
      1. routes.js: This contains all the main routes like /notes, /notebooks with information on what to render when user goes to a particular route.
      2. hash-routes.js: The hash routes are used for temporary navigation like opening dialogs, 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 used by the desktop app 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 it's 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