The following link is the aws address for this project, http://13.210.14.131/figtest/public/index.php

User Story: 1. The default page is the bloglist page, whether a user login or not, the blogs always show; 2. If a user login, he only can create, update, delete his own blogs; 3. If a user does not login, he only can view blogs. 4. If an admin user login, he can create, update, delete all users blogs.

The admin user's username is admin, user's email is admin@qq.com, password is 12345678. You can use username or email to login

The test user's username is test, user's email is test@qq.com, password is 12345678. You can use username or email to login

This project is built backend by Laravel and frontend by Vue. Users tabls is used MYSQL still, Blogs Table is used MongoDB. Both frontend and backend have been built unittests. Backend unittest is built by phpunit. Frontend unittest is built by Jest. The JWT is included in this project.

All the base things, you should be read and learn from "https://github.com/ramseyjiang/SPA_Laravel_JWT_Vue_Fullstack" first.

Step1: git clone this project to your local

Step2: composer install

Step3: cp .env.example .env

Step4: modify the database, root, password in the .env file. modify config/database.php, update the MongoDb config the same with your local.

Step5: php artisan key:generate

Step6: php artisan jwt:secret

Step7: php artisan migrate

Step8: php artisan db:seed --class UserTableSeeder

Step9: ./vendor/bin/phpunit

If all unittests passed, it means the backend works. After these above, you also can use: "php artisan app:name xxx" to update the whole project appName.

After that, let's make frontend works.

Step10: npm install

Step11: npm run dev (Make sure frontend complie works.)

Step12: npm run format (Make sure auto format frontend files work.)

Step13: npm run test (If it works fine, it means frontend unittests work.)

You also can do git commit and git push in your command, to make sure when you do commit or push, it will run frontend unitest first.

If you wanna to learn how to do this project step by step, you can follow steps under below.

This readme only describes how to install and config this project, if you wanna to know the base platform how to build it, please follow this link "https://github.com/ramseyjiang/SPA_Laravel_JWT_Vue_Fullstack"

All steps under below are base on the fullstack you have learnt.

Step0: git clone https://github.com/ramseyjiang/SPA_Laravel_JWT_Vue_Fullstack.git project_name

Step1: rm -rf .git (It is used to remove all git history.)

Step2: composer install

Step3: cp .env.example .env

Step4: modify the database, root, password in the .env file. modify config/database.php, update the MongoDb config the same with your local.

Step5: php artisan key:generate

Step6: php artisan jwt:secret

Step7: php artisan migrate

Step8: php artisan db:seed --class UserTableSeeder

Step9: ./vendor/bin/phpunit (To make sure the backend works, then you can use "php artisan app:name AppName" to change app name or not, it is up to you.)

Step10: composer require jenssegers/mongodb

Step11: php artisan make:controller BlogController --resource (It will generate BlogController and some default methods)

Step12: php artisan make:request BlogRequest (It will generate BlogRequest in a requests folder)

Step13: php artisan make:model Log -m (It will generate Log.php outside Models folder, you should move it into Models folder and update the namespace as AppName/Models. It also will generate a new file in the database/migrations folder, you should fill the table content.)

Step14: php artisan make:model Blog (It will generate a Blog model outside Models folder, you should move it into Models folder.)

Step15: php artisan make:policy BlogPolicy (It will generate a BlogPolicy file in the policies folder.)

Step16: php artisan make:observer BlogObserver (It will generate a BlogObserver file in the Observers folder)

Step17: php artisan make:test BlogTest (It will generate a BlogTest file in the tests/Feature folder.)

Step18: create BlogList.vue, Blog.vue in the resources/js/components folder, create BlogList.test.js, Blog.test.js in the resources/js/tests folder

Step19: Update routes.js

After all steps above, you can copy code from each matches file content from this project file.

Run "npm run dev" to compile, after that run "npm run test" to test whether frontend works or not.

If all the above works, this project works. Thanks for your time. If you like this project, please add a star for me. Thanks and cheers.