Public Notes Sharing Web Application.
TechnologiesThis is a simple Web application that allows users to post public notes that others can see on the home page.
It is mainly built with VueJS and ExpressJS. It implements many common features using many libraries.
This project can be used for learning purposes or as a starter template for building similar applications.
- Clone the repository:
cd somewhere
git clone https://github.com/Ambratolm/amb-notes.git
cd amb-notes- Install the dependencies:
npm i- Install Nodemon globally:
npm i -g nodemon- Run app server:
npm run serve- Run api server:
npm run apiTo deploy the project in a node environment:
-
Push the repository to a node server using a service like Heroku.
-
Install the dependencies:
npm i- Build the app:
npm run build- Start the app:
npm startYou can also do the same to deploy locally.
The initial project was generated using Vue CLI tool.
This frontend app is mainly powered by Vue and its integrated packages:
| Library | Use |
|---|---|
| VueJS | Main JS framework |
| Vue Router | Routing |
| Vuex | Centralized state management |
The GUI is powered by:
| Library | Use |
|---|---|
| Bulma | Main CSS framework |
| Buefy | Bulma UI components |
| Bulmaswatch | Bulma themes |
| FontAwesome | Icons |
| AnimateCSS | CSS animations |
The frontend app is using these utilities:
| Library | Use |
|---|---|
| Axios | AJAX calls |
| Vue Meta | HTML metadata |
| Moment/ | Dates format |
| Vue Moment | Moment pipes |
| VeeValidate | Form validation |
| VuexPersist | Data persistence |
| Lodash | Common and array related tasks |
The backend API and Database (Using file system for the moment) are powered by:
| Library | Use |
|---|---|
| Node | JS runtime |
| Express | Main Node JS framework |
The backend app is using these utilities:
| Library | Use |
|---|---|
| Lodash | Arrays data querying |
| Joi | Data validation |
| JsonWebToken | Authentication |
| Uuid | IDs generation |
| BcryptJS | Password hashes generation |
| CommonErrors | Errors classes |
| Colors | Console colorations |
| Faker | Mock test data generation |