Coder Social home page Coder Social logo

hsbalar / preserver-plus Goto Github PK

View Code? Open in Web Editor NEW
36.0 5.0 5.0 4.85 MB

Minimal notes app

Home Page: https://preserver-plus.netlify.com/

JavaScript 3.24% TypeScript 51.76% HTML 19.06% CSS 19.59% SCSS 6.02% Less 0.34%
minimal-notes couchdb offline-capable sync hacktoberfest preserver

preserver-plus's Introduction

Preserver Plus


Minimal notes app with rich text formatting.


What it is behind the app ?

This app is built using Angular platform with PouchDB to storing your local data on browser and CouchDB to sync notes with your account.

  • That's part of fun setting up a bi-directional and continuous replication, so as soon as we make a change to our local data it will be reflected in the remote database, and as soon as we make a change to the remote data it will be replicated in the local data. So wherever your have logged in will sync up with immediatly.
  • 馃摑 To create a note CKEditor5 document editor is configured.
  • 馃摉 For listing down all notes in dashboard I've used Angular2gridster which helps to provide easy configurable and manageable grid layout.
  • 馃寗 And last thing Ant Design for Angular is a set of high quality components and rich, interactive user interfaces.
  • 馃樁 Opps... wait what about authentication & signup yeahh the core part, don't forget 馃憠 For that I've used Superlogin package a Powerful authentication for APIs and single page apps using the CouchDB.
  • We just need to setup NodeJS server, all big task like creation of private db for user, registration, authentication, logout, forgot password many more... all will be taken care by superlogin, We just need to make express instance up & running with couchdb configurations.
  • Cool... I think I'm done 馃槑.
  • One more thing It's PWA, a service worker is a script that runs in the web browser and manages caching for an application. Done not much... 馃檴 ...

Key Features

  • Rich text editor.
  • Online/Offline sync with your account.
  • WYSIWYG notes.
  • Syntax highlighting.
  • Toolbar for text formatting.
  • Local db and Remote db.
  • PWA (Progressive web app).

Running the app locally

# Clone repo
$ git clone https://github.com/hsbalar/preserver-plus.git

# Go into this repository
$ cd preserver-plus

# Install dependencies
$ npm install

# Run the app
$ npm start

Angular app will be listen on localhost:4200.

Running node server

# Go into this repository
$ cd server/

# Install dependencies
$ npm install

# Run the app
$ npm start

Node server will be listen on localhost:4000.

Note: You should have pouchdb installed and instance running on localhost:5984 to sync up local pouchdb to central couchdb.

Deployed on

  • This app is deployed on Netlify.
  • Auth server deployed on Heroku.
  • Source is here.

Roadmap

  • [-] To do multiple dashboard.
  • [-] To do miltuple notes editable.
  • [-] To Preserve position of notes in dashboard.
  • [-] To have vertical & horizontal scroll layout in dashboard.
  • [-] To download notes.
  • [-] To do more.

License

MIT


hiteshbalar.com 聽路聽 GitHub @hsbalar 聽路聽 Twitter @hsbalar 聽路聽 Instagram @hsbalar 聽路聽

preserver-plus's People

Contributors

hsbalar avatar vijayjangid avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

preserver-plus's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    馃枛 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 馃搳馃搱馃帀

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google 鉂わ笍 Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.