This is a demo online shop
- Create directory to clone the project
mkdir ecommerce-app
cd ecommerce-app
- Clone the application to the newly created folder
git clone https://github.com/codinci/ecommerce-app.git/ ${projectName}
change the projectName to whichever name you find suitable
- Navigate to the cloned repo directory
cd ${projectName}
- Install laravel dependencies
composer install
- Install npm modules
npm install
- Create a copy of .env file
cp .env.example .env
- Generate an app encryption key
php artisan key:generate
- Create a database in mysql
create database ${databaseName}
- In the .env file add the database information to allow laravel toconnect to the database
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=${databaseName}
DB_USERNAME=${userName}
DB_PASSWORD=${password}
change the databaseName, userName and password variables to your respective information
- Migrate the database
php artisan migrate
- Seed the database
php artisan db:seed
- Run the application
npm run dev
php artisan serve
the application should run on 127.0.0.1:8100
- You can run tests
php artisan test
Users should be able to:
- Register or login into the application
- View products on the platform
- Add items to cart
- Make an order and pick between two payment methods
- Filter products based on size
- Solution URL: Github
- Vue - JS framework
- Inertia - Adapter to create monolithic applications
- Laravel - PHP framework
- MySQL - Database management
- Tailwind Css - For styles
- Fontawesome - For icons
- Made a refresher on development of Laravel, Inertia and VueJS
- Learnt on use of set to get unique properties in an array
const sizes = computed(() => {
const sizeSet = [...new Set(props.products.map(product => product.size))]
return sizeSet;
});
- Use of method poofing to handle update of a file upload
const form = useForm({
_method: 'PUT',
name: props.product.name,
price: props.product.original_price,
size: props.product.size,
saving: props.product.saving,
image: props.product.image_filename,
});
const submit = () => {
form.post(route('product.update', {id : props.product.id}), {
onFinish: () => form.reset(),
});
};
<form @submit.prevent="submit">
<input type="hidden" name="_method" v-model="form._method" />
- Making custom validations
<?php
namespace App\Rules;
use Closure;
use Illuminate\Contracts\Validation\ValidationRule;
class Phonenumber implements ValidationRule
{
/**
* Run the validation rule.
*
* @param \Closure(string): \Illuminate\Translation\PotentiallyTranslatedString $fail
*/
public function validate(string $attribute, mixed $value, Closure $fail): void
{
if(!preg_match('/^(01|07)\d{8}$/', $value)) {
$fail('The :attribute must be a a valid phone number.');
}
}
}
- Better error and success handling management.
- Save cart items to a state management store such as Pinia.
- Redirection of users based on their role.
- Utilize vue-router for enhanced routing on VueJS
- A user profile
- More categories and filter options.
- Improve on the UI/UX of the application.
- Managing orders via proper saving of properties such as the product being ordered and payment of the order.
- Stack OverFlow - This helped me gain insight on method poofing in order to help resolve update of a file upload
- Stack OverFlow - This helped me gain insight on how to extract unique values from an array.
- Github - codinci