Laravel eCommerce

Ecommerce site with Laravel 9, Vue 3 and Stripe.

Live URL

http://laravel-vue3-webshop.herokuapp.com

Screenshot:

Stripe screenshot:

Features

Laravel 9
Vue 3 with SFC and script setup syntax
Pinia state management
State persist with pinia-plugin-persistedstate
Order form setup with FormKit and builtin validation
Stripe for payments
Easily change currency by setting two environment variables: CASHIER_CURRENCY and CASHIER_CURRENCY_LOCALE
Code linting with Laravel Pint
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 8.1 or newer installed and setup properly (alternatively use Docker, see https://laravel.com/docs/9.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