Check out ? Amb-Notes-NEW for a better code redesign and real backend !

? Amb-Notes-Old

Public notes sharing web application. View Demo



  1. What is this ?

This is a simple VueJS app where users can register and login to post public notes that are shown in the homepage feed.

  1. What is it for ?

This project can be used for learning purposes or as a starter template for building similar applications.

Getting started

  1. Clone the repo and Install the dependencies:

cd [somewhere]
git clone
cd amb-notes
npm i
  1. Install JSON Server Auth globally:
npm i -g json-server-auth
  1. In package.json file, Go to scripts. In serve and serve-db scripts, Change the host and port to your likings. You can replace and with localhost or any localhost aliases you have defined in your system.

  "scripts": {
    "serve": "vue-cli-service serve --open --port=2020",
    "serve-db": "json-server-auth db/db.js --routes=db/routes.json --watch --delay=2000 --port=2021"
  1. Run the app server:
npm run serve
  1. Run the fake database server:
npm run serve-db


To deploy the project in a node environment:

  1. Push the repo to a node server using a service like Heroku.

  2. Install the dependencies:

npm i
  1. Build the app:
npm run build
  1. Start the app:
npm start

You can also do the same to deploy locally.

If you want to start the app and watch for changes in server.js file, install nodemon globally:

npm i -g nodemon

then start the app with monitoring mode:

npm run start-m


The initial project was generated using Vue CLI tool.


This app is mainly powered by:

  • VueJS (JS framework) with its integrated packages: – Vue Router (For routing) – Vuex (For centralized state management)

The app GUI is powered by:

The app is using these utilities:


No real backend used for the moment.

The backend API and Data are similated using:

For deploying the demo, a node server was created using:



  • As visitor you can register
  • As visitor you can login and logout
  • As user you can edit your account data

Notes Feed

  • As visitor you can view all notes
  • As user you can post, edit and remove a note

User Profile

  • As user you have a profile page that shows all of your notes
  • As user you can view other users profile pages
  • As user you can edit your profile page

Data Models


Name Type Rules
id text [ primary-key ]
email text [ required ][ unique ] [ format: email ]
password text [ required ][ length: 8-80 ]
name text [ required ][ length: 3-30 ]
description text [ length: 0-100 ]
avatar text [ format: url ]
role text [ values: “”, “admin” ]


Name Type Rules
id text [ primary-key ]
userId text [ foreign-key: user ]
date text [ format: datetime ]
title text [required][ length: 3-30 ]
content text [required][ length: 10-1000 ]


View Github