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

📓 Amb-Notes-Old

Public notes sharing web application. View Demo

Table of contents

• Introduction
• Getting started
• Deployment
• Technologies
  • Frontend
  • Backend
• Features
  • Authentication
  • Notes Feed
  • User Profile
  • Administration
• Data Models
  • User
  • Note

Introduction

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.

2. 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 https://github.com/Ambratolm/amb-notes.git
cd amb-notes
npm i

2. Install JSON Server Auth globally:

npm i -g json-server-auth

3. In package.json file, Go to scripts. In serve and serve-db scripts, Change the host and port to your likings. You can replace app.ambratolm.com and db.ambratolm.com with localhost or any localhost aliases you have defined in your system.

  "scripts": {
    "serve": "vue-cli-service serve --open --host=app.ambratolm.com --port=2020",
    "serve-db": "json-server-auth db/db.js --routes=db/routes.json --watch --delay=2000 --host=db.ambratolm.com --port=2021"
  }

4. Run the app server:

npm run serve

5. Run the fake database server:

npm run serve-db

Deployment

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

3. Build the app:

npm run build

7. 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

Technologies

The initial project was generated using Vue CLI tool.

Frontend

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:

• Bulma (CSS framework)
• Buefy (Vue UI Bulma components)
• Bulmaswatch (Bulma themes)
• FontAwesome (Icons used through Buefy)
• AnimateCSS (CSS animations)

The app is using these utilities:

• Axios (For AJAX calls)
• Vue Meta (For adding HTML metadata)
• Moment/Vue Moment (For formatting dates)
• VeeValidate (For form validation)
• VuexPersist (For data persistence)
• Lodash (For common tasks, especially array related)

Backend

No real backend used for the moment.

The backend API and Data are similated using:

• JSON Server/JSON Server Auth (JSON-based API backend simulator)
• Faker (Fake data generator)

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

• Express (Node framework) with the serve-static module (For serving app files)

Features

Authentication

• 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

User

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" ]

Note

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 ]