laravel-vue
eCommerce
JavaScript
Laravel eCommerce
Ecommerce site with Laravel 9, Vue 3 and Stripe.
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
andCASHIER_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 runningphp artisan tinker
:$product = new AppModelsProduct(); $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
- Fix hardcoded currency
- 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