Case study – building a simple webshop with Laravel
Daniel Verner -
Introduction
This is a case study of building the webshop kapes.rs, so this is not a detailed tutorial on 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 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 than 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 is not built-in.
Building the MVP
The “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 the case of e-commerce, there are plenty of features that 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
That's it. Currently, we only have one shipping method, no need to worry about it. 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 a SPA with a separate backend. I really like that Vue.js components can be added only at the places where you need the interactivity/ajax.
TypeScript– Most of the fronted programming has been done with TypeScript. Vue.js 3 will have 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 data tables and the Laravel data tables 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 a 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 a 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 to remove 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 in 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 the 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…
Tags: Laravel · typescript · Case study · MVP · Webshop