Notebook Project With Laravel and Vue.js

Introduction of Notebook Project

This is a simple free-form information-gathering web application powered by Larvel and Vue. 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 users to capture just about every basic component. Users can type notes, add videos, images, and so on using this web app.

Project Features

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

Project User Guide

After running the application, the user can see the 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.

The above-featured image is the first look at 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 can edit and delete those notebooks and notes.

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

Project Installation Process

git clone https://github.com/sanz/laravel-vue-notebook.git 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 the credentials below:

email: [email protected]
password: password

Alternatively, you can also download the project from here. You can also explore our other larval projects available on this website.