Booklist-Apps

Application is hosted on https://booklist.mohip.dev

Goal: This application is a demostration of CRUD for Book List Entry. User can

manage book information with title and author with CRUD functionality addiotional file export and sorted booklist.

User Feature

● User can ○ Add book in list by title and author
○ Edit book information in the list
○ Delete book information in the list

● Incomplete entry like only title or author or duplicate is prevented.

Project Architecture

● Backend by Laravel MVC framework serving API response.
● Front end build by React JS and request GET and POST data to Backend through API.
● Mysql for Database end, Connected to Laravel Application.

1. For the frontend React Component all the data fetch or post via api to Backend and backend to database.

   Name	Endpoint	Request
   home	https://booklist.mohip.dev/api/home	GET
   addbooklist	https://booklist.mohip.dev/api/addbooklist	POST
   editbooklist	https://booklist.mohip.dev/api/editbooklist	POST
   deletebooklist	https://booklist.mohip.dev/api/deletebooklist	POST
   exportcsv	https://booklist.mohip.dev/api/exportcsv	POST
   exportxml	https://booklist.mohip.dev/api/exportxml	POST

2. With parameter

   Name	Endpoint	Parameter	Value
   home	https://booklist.mohip.dev/api/home	sort	'title' or 'author'
   home	https://booklist.mohip.dev/api/home	order	'asc' or 'desc'

Application Code base Architecture

Backend - Laravel & Mysql

● Controller ○ HomeController for home route request and return 'app' view
○ BookListController for all CRUD request and execute the logic and DB query by Using Service Class
○ ExportController for file export request, generate content based on file type and content type and response with downloaded file.
● Service Class
This is for separate db query and business logic from directly execute in Controller
○ App\Services\BookListService for all CRUD functionality DB operation and return response to BookController.
○ App\Services\XmlExportService for generate the xml formate from db collection and return to ExportController.
● Export Class
This is for provide collection as class instance for Exporting files in formate
○ BookExport is generated by laravel export class command, this is for return collection to convert to csv formate to ExportController.
○ Use dependency injection when pass $request as parameter to create BookExport instance.

Addtional 3rd party Laravel Library class https://github.com/spatie/array-to-xml & https://github.com/Maatwebsite/Laravel-Excel for csv and xml export helper.

● Route files
○ web.php only hold intial route {?path} that confirm passing any request to api.php ○ api.php contain all routes ● Test Class
This is for testing all controller function proper functionality and prevent error and unexpected responses.
○ Use Feature test by using testcase classes in tests\Feaeture.
○ Test for CRUD functionality using
-> AddBooksTest
-> BookListTest
-> DeleteBooksTest
-> BookUpdateTest
● Model and Migration
Databse table model for application layer to database
○ 'books' table is the only table for application. Necessary Migration and Book model used.
○ 'failed_jobs' is default table by laravel by default migration(other default migrations are removed).
● View
View file for fronend render ○ Use React Js for managing front end, app.blade is the initial view file to generate react component based on redering on app view file. ○ As in the same repository, react components are in /resources/js/src. ○ Application front renderd based on React dev environment generated /public/app.js and public/app.css.

Fronend End - React JS

Componentes

● Index JS ○ In resources/js/src folder. Intial root component of React app. ○ Initialize application by loading the necessary react imports and render on app.blade in Laravel View
○ Add App JS component that is the whole wrap of applications.

● App JS ○ In resources/js/sr. Wrap up all other React component used in the system and import necesarry imports.
○ Contain necessary API data fetch and dynamic render page for initial functionality of page and dependent value and properties with other components
● BookTable JS ○ In resources/js/src/tables. Initialize and render the List of Books table that show all book from the database with Edit and delete button
○ render 'FileDownload' component directly from 'js-file-download'
● AddBookForm JS ○ In resources/js/src/forms. Initialize and render the the form for entering the new book title and author and submit to add in the bookliist
○ Check for validation and throw property value to other component for error message.
● EditBookForm JS ○ In resources/js/src/forms. Initialize and render the the form for update the existing book title and author information and submit to edit the bookliist
○ Check for validation and throw property value to other component for error message.
● ConfirmationModal JS ○ In resources/js/src/notification. Initialize and render the the modal with confirm button when any book form list is selected for being deleted
○ Check for confirm and show delete success of cancel.
● ErrorModal JS ○ In resources/js/src/notification. Initialize and render the the modal that show any response error message also success message based on response
○ Check for the the proper response and property values

Front End web page design is mostly based on TailwindCss (https://tailwindcss.com/) and /resources/js/src/App.css.

Dev Requirements

● PHP 7.3.10 ● Composer version 1.9.0
● npm v6.14.4
● node v12.16.3
● Laravel Framework 8.21.0

Deploy and Run (development environment)

$ git clone https://github.com/battirunner/booklist-app.git
$ cd booklist-app
$ composer install
$ npm install
$ npm run dev
$ cp .env.example .env
$ php artisan key:generate
$ mysql -u [USER] -p
$ create database [DATABASE];
$ Add information of Database at .env

 DB_CONNECTION=mysql
 DB_HOST=127.0.0.1
 DB_PORT=3306
 DB_USERNAME=[USER]
 DB_PASSWORD=[PASSWORD]


$ if in Linux then set permission as -R 777 in /public and /storage folder 
$ ./vendor/bin/phpunit
$ Check APACHE and Mysql server is running.
$ php artisan migrate
$ php artisan serve
$ application live at http://127.0.0.1:8000 or http://localhost:8000

Deploy and Run (Live environment, Ubuntu Server)

This is deployed in live server using a https://www.digitalocean.com/ ubuntu droplet, all procedure are same except below,

$ cd /var/www/html
$ git clone https://github.com/battirunner/booklist-app.git

all other same as (development environment) up to

$ php artisan migrate
$ cd /etc/apache2/sites-available 
$ touch booklist.conf
$ copy the above code

 This is for specific domain, replace yourdomain with real domain
 <VirtualHost *:80>
  ServerAdmin admin@yourdomain
     DocumentRoot /var/www/html/booklist-app/public
     ServerName yourdomain
     ServerAlias www.yourdomain

    <Directory /var/www/html/booklist-app/public>
        Options +FollowSymlinks
        AllowOverride All
        Require all granted
     </Directory>

     ErrorLog ${APACHE_LOG_DIR}/error.log
     CustomLog ${APACHE_LOG_DIR}/access.log combined
 RewriteEngine on
 RewriteCond %{SERVER_NAME} =yourdomain
RewriteRule ^ https://%{SERVER_NAME}%{REQUEST_URI} [END,NE,R=permanent]
</VirtualHost>

$ sudo a2ensite booklist.conf $ sudo systemctl restart apache2 $ cd /etc/hosts $ add 127.0.0.1 your domain at end of the file $ exit and save $ sudo systemctl restart apache2 $ install letsencrypt(or other certbot application for https:\) $ run letsencrypt $ follow letsencrypt options for make domain with secure access (https:\) $ add nameserver information of server hosting at domain hosting smanagement.(in this case ns1.digitalocean.com, ns2.digitalocean.com )

Done, application is live!! at your domain.