Ecommerce Application

This is a demo online shop

Table of contents

• Overview
  • Run Locally
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

Overview

Run Locally

1. Create directory to clone the project

mkdir ecommerce-app

cd ecommerce-app

2. 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

3. Navigate to the cloned repo directory

cd ${projectName}

4. Install laravel dependencies

composer install

5. Install npm modules

npm install

6. Create a copy of .env file

cp .env.example .env

7. Generate an app encryption key

php artisan key:generate

8. Create a database in mysql

create database ${databaseName}

9. 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

10. Migrate the database

php artisan migrate

11. Seed the database

php artisan db:seed

12. Run the application

npm run dev

php artisan serve

the application should run on 127.0.0.1:8100

13. You can run tests

php artisan test

The challenge

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

Screenshot

Desktop View

Mobile View

• Mobile View
• Mobile Navigation

Links

• Solution URL: Github

My process

Built with

• Vue - JS framework
• Inertia - Adapter to create monolithic applications
• Laravel - PHP framework
• MySQL - Database management
• Tailwind Css - For styles
• Fontawesome - For icons

What I learned

• 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.');
       }
    }
}

Continued development

• 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.

Useful resources

• 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.

Author

• Github - codinci