Laravel eCommerce

Creating an eCommerce site with Laravel 8, Vue 3 and Stripe.

Screenshot:

Stripe screenshot:

Live URL: https://laravel-vue3.herokuapp.com (initial pageload may be slow because of the Heroku container needing to bootup)

Features

Laravel 8
Vue 3 with composition API
Vuex 4 state management
Form validation with Vee Validate and Yup
Vuex-persist for persisting cart after page refresh
Stripe for payments
Easily change currency by setting two environment variables: CASHIER_CURRENCY and CASHIER_CURRENCY_LOCALE
ESLint code linting with AirBnB ruleset
CSS animations
Responsive mobile menu
SonarCloud code quality scanner integration on all pull requests
Laravel tests with CircleCI integration

Setup

Fork or clone the project
Ensure you have PHP 7.4 or newer installed and setup properly (alternatively use Docker, see https://laravel.com/docs/8.x/sail)
Ensure you have access to a PostgreSQL database
Ensure you have Node installed
Rename .env.example to .env and modify the values
Run composer install to install the PHP dependencies with Composer. Check out https://getcomposer.org/ if necessary
Run npm install to install the Node dependencies needed by the project. Check out https://nodejs.org/en/ if necessary
Run php artisan:migrate to setup the Laravel database migrations

You should create at least one sample product. Although you can use the builtin factory seeders, I prefer to do manual creation for testing purposes.

To do so run these commands after running php artisan tinker:

$product = new App\Models\Product();
$product->name = 'Example Product';
$product->slug = 'example-product';
$product->description = 'Example product description';
$product->imageUrl = 'url to image';
$product->price = 99;
$product->save();

Run npm run watch to serve the Vue 3 files
Run php artisan serve to serve the PHP files
Open up http://localhost:8000 in your browser

TODO

Do WCAG analysis and ensure there are no issues
Finish implementing search with meilisearch-vue or vue-instantsearch when Vue 3 is supported
Add some tests to verify that the cart and checkout works correctly
Consider adding an admin dashboard
Look into performance optimization