+
+
+
+Try it out! | Architecture | How to build? | Desktop app +
+ +## Getting started + +### The desktop app? + +You can find all the desktop related code in [the `desktop/` directory](./desktop/). 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 + +- Web app: [try it out here](https://app.notesnook.com/) +- Desktop app: [download for your platform from here](https://notesnook.com/downloads) + +## Build instructions + +**Before you start it is recommended that you read [the contributing guidelines](/CONTRIBUTING.md).** + +**Requirements:** + +1. Node.js >= v16 +2. git +3. NPM (not yarn or pnpm) + +The first step is to `clone` the monorepo: + +```bash +git clone https://github.com/streetwriters/notesnook.git + +# change directory +cd notesnook +``` + +Once you are inside the `./notesnook` directory, run the preparation step: + +```bash +# this might take a while to complete +npm install +``` + +Now you can finally start the web app: + +```bash +npm run start:web +``` + +If you'd like to build in production mode: + +```bash +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 + +### 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: + +```bash +npm run test:web +``` diff --git a/resources/screenshots/web.jpg b/resources/screenshots/web.jpg new file mode 100644 index 000000000..15026fd4f Binary files /dev/null and b/resources/screenshots/web.jpg differ