Notebook With Laravel 7 and Vue.js

Notebook is a simple free-form information gathering web application. It is designed using Laravel 7 and Vue Js. This application provides a high-quality user experience as GUI is super user friendly. Vue Js loads components without refreshing the page which is another great feature.

It allows user to capture just about every basic components. User can type note, add videos, images and so on using this web app.

Features of Notebook

  • Create a notebook and add notes to it.
  • Edit and delete a notebook and notes.
  • Simple login and signup functionality.

User Guide

After running the application, user can see the homepage.

Main Homepage

If the user hasn’t registered in the application. Then, the user has to register to use the application. After that, the user can log in to the system and start creating notebooks.

Create New Notebook Page
1 2
Browse Notebooks with Notes on the side

The above-featured image is the first look of the system after the user logs in the system. In the image above, the user can create a notebook and add a note to it. Furthermore, the user is able to edit and delete those notebooks and notes.

notebook media 1
Inline WYSIWYG Content Editor

An interactive inline WYSIWYG content editor is integrated to edit notes seamlessly. Users can add rich elements like embed media, heading, blockquote, anchor links, HTML tables, and plenty more into the note content.

Installation Process:

git clone laravel-notebook
cd laravel-notebook
composer install
cp .env.example .env
php artisan migrate --seed
php artisan key:generate
php artisan storage:link
php artisan serve

If you migrated with —seed flag for dummy data. Then, you can log in with credentials below:

email: [email protected]
password: password

Alternatively, you can also the download the project from here.

Leave a Comment