Notizen

Store and sync your notes across all your devices
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Usage
4. Roadmap
5. Synchronisation
6. Contributing
7. License
8. Contact
9. Acknowledgements

About The Project

Notizen is an app to create and store your notes across your devices.

Notizen means notes in Luxembourgish. That's a cool two parts name !

Project structure

This project is a monorepo based on the cra-monorepo-demo project file setup.

Monorepo allows the separation of several packages into one. Thanks to this technique several sub-packages can be independent and some can shares certain files, like common/components shared between the desktop app and the web app.

This can be achived with the use of

• yarn workspace
• package.json workspaces setting
• lerna

The project structure is as follows :

.
└── notizen/
    ├── node_modules/
    |── backend
    │   └── ...
    │   └── package.json
    |── frontend
    │   ├── common/ (shared component library)
    │   │   └── components
    │   │   └── package.json
    │   ├── desktop (Electron + create-react-app)
    │   │   └── ...
    │   │   └── package.json
    │   ├── mobile (create-react-native-app)
    │   │   └── ...
    │   │   └── package.json
    │   ├── web (create-react-app)
    │   │   └── ...
    │   │   └── package.json
    ├── package.json
    |── infra
    │   └── ...
    |── documents
    │   └── ...
    └── yarn.lock

Built With

• Typescript
• React
• Redux
• ReactNative
• Tailwind CSS
• Postgresql
• Storybook

Synchronisation / Offline

This is a work in progress. No synchronisation at the moment. Actually all datas are retrieved via a database. So there is a need to have a connection to use the app.

Some little tricks are used to speed up response for users with a slow connection :

1. Optimistic rendering:
   When an event (Redux action) is submited, this event is handled with ReduxThunkAction life cycle methods :

• action.pending
  Event start : Update the local state when possible before receiving validation
• action.fulfilled
  Event is successfully played
• action.rejected
  Event is rejected Rollback the local state

2. Synchronise local state into a local storage db
   Synchronise local storage db when the local state change. Load local state from local storage when loading the app.

TODO

Offline Synchronisation with CQRS :

• Automerge
• Automerge author Martin Kleppmann website
• Designing Data-Intensive Applications by Martin Kleppmann
• YJS
• Are CRDTS suitable for shared editing ? by YJS author Kevin Jahns

Getting Started

To get a local copy up and running follow these simple example steps.

Prerequisites

• Yarn

  npm install --global yarn

Installation

1. Clone the repo

   git clone https://github.com/willahh/notizen.git

2. Install packages

   yarn install

3. Start the backend

   cd backend
   yarn start

4. Start the frontend

   cd frontend/web
   yarn start

Optional :

1. Run storybook

   cd frontend/web
   yarn run storybook

Usage

Roadmap

See the open issues for a list of proposed features (and known issues).

Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Acknowledgements

• Choose an Open Source License
• GitHub Pages
• Tailwind documentation
• Heroicons
• Loaders.css
• Animate.css
• Smooth Scroll
• Sticky Kit
• JVectorMap
• Font Awesome

Contact

• @twitter
• Notizen repository

License

All Rights Reserved

Copyright (c) 2021 William Ravel