Case study – building a simple webshop with Laravel

Introduction

This is a case study of building the webshop kapes.rs, so this is not a detailed tutorial how to build a webshop with Laravel from scratch. Instead, I am going to show what technologies and packages I used to build it, and some details which I find interesting enough for sharing.

This shop is my side project built it for my wife, and there she sells her handcrafted beanies, so if you need one, definitely check it out here :-).

Why to build a shop yourself?

Why would one build a shop from scratch when there are plenty of ready made solutions out there: WooCommerce, Magento, OpenCart… (put your favorite here).

I am a programmer so I like to build things.

The first reason I am a programmer so I like to build things. It is fun. It is my profession.

The other reason, and probably more important that my experience is that you can build a shop/website/etc quickly with the ready made tools at the beginning.

But in the long run they might slow you down. Especially if you don’t have much experience with them (like me), or you need to do some customization which are not built in.

Building the MVP

“Minimum viable product” this phrase is probably a bit overused lately, but I still think it is important to limit the scope of a project. Especially when you create a new product or build a startup.

If you don’t do that you will probably end up building all the features you can imagine to have the coolest product available.

This might cause a late launch (too much investment) or an early released product with many features (some of them unfinished) and even more bugs. I wanted to avoid the latter, so let’s see how.

In case of e-commerce there are plenty of features which could be developed, including but not limited to different payment options, shipping options, coupons, sales, wishlist etc. just to name a few.

So what is the MVP in this case:

• We need product management
• Ordering system
• Invoicing

Thats it. Currently we only have one shipping method, no need to worry about.

Only 2 options for payments: bank transfer or pay at delivery.

We do have plans to include other payment options as well: credit card or PayPal, but they will come in later.

Technologies and packages used

Bootstrap 4.0 – the fronted is built with bootstrap. I thought of using tailwindcss, but I already had some experience with bootstrap so I went the easier path this time, to be more productive.

Vue.js – definitely wanted to avoid building an SPA with a separated backend. I really like that Vue.js componets can be added only at the places where you need the interactivity/ajax.

TypeScript – Most of the fronted programming have been done with TypeScript. Vue.js 3 will have a better TypeScript support, but it is possible to use it with v2, check out the official guide here.

Laravel Datatables – for the admin I’ve used datatables and the Laravel datatables package. I can highly recommend this package. It integrates well with Laravel, and offers server side processing, filtering, sorting out of the box.

Laravelshoppingcart – after some searching I found few packages for the shopping cart, this one seemed the best for me.

Document Templates – for generating the invoices and mails I used this package. If you need user editable templating system with data placeholders and all the goodies, take a look at it.

Laravel Enum – I think this package is really useful for statuses and other enumerable fields. It can help removing some magic numbers from your code.

Methodology

TDD of course. For the php code I’ve used PHPUnit, for the TypeScript Mocha with Chai. If you are interested how to set up a TypeScript testing environment, I’ve written an article about it here.

Closing thoughts

As I mentioned earlier I started with an MVP and combined it with TDD to build a minimal, but robust product, which can be easily extended if necessary. I hope it will be necessary if the sales go well :-).

Probably my endeavor was successful, as the first launch was about a month ago, and the last error message in the log is still the misspelled php artisan queue:restart command what I did during that launch…

The post Case study – building a simple webshop with Laravel appeared first on 42 Coders.