Introduction

Gratitude Hampers is a e-commercial website built on Grails. It's my first product developed after learning grails in my first full time company, iMocha, which also use grails to build e-banking web application. The hampers sells various hampers product, and comes with back office features for vendors to add/modify products, maintain sales order etc. The site uses Paypal for payment, allowing refund/discount easily.

The home page is not an ideal design as it takes up a lot of size - an ideal landing page size should be loaded in less than 3 seconds. I do however like the UI and since it's not a production site I just leave it as it is. The site utilizes Chatra, a chat system plug in offered by Cloudflare.

You are more than welcome to try out the demo site by clicking on the demo button above. However do take note that the payment system is in production mode, any payment made WILL go through. If you would like to try the payment, you may purchase the "Test Hamper" product, priced at RM 0.10. As you may notice, some fundamental features are missing, such as search, filter, product item categorization, rating, reviews etc.I currently have no intention to complete these features. Features such as reset password, sales order email however are working.

Recipient and Personalized Message

The one feature that differ this site from other e-commerce sites is at the checkout page.

Gratitude Hampers was originaly built to enable easier sales and delivery of hampers. Hence, each hamper bought are mostly for different recipients. At the checkout page, you can add/edit recipient which will be tied to your account (or cookie if not logged in). You can then simply choose the recipient of each hampers. You can also enter personalized gift message for each of the hampers. After making the payment, you can see your order appearing in the order history. This is also where you can track your oder status.

Back Office

Admin user can access the back office. Once logged in as admin, a 'Maintenance' menu will appear, allowing you to edit or maintain the sales order and hampers.

Every order has to be confirmed by admin to make sure stocks are available, which will then change from pending confirmation to pending delivery. Once the order is delivered, the status can be updated by admin to complete the order.

Everytime the status is updated, buyer will receive an email update.

Admin user can also add/edit the hampers for sale. Picture, price, stocks available are the usual information tied to hampers.

For the description of the hamper, admin can copy paste any rich-text-format and paste inside, allowing easy customization of the description. beware however, as you can see in the gif, not all format translate nicely.

The preview button allow you to check what it looks like without having to constantly updating the hamper.

Summary

It has been amazing experience working on this personal project. I learned how to build an e-commerce website for the first time in my life, starting from scratch (Actually I used a html template for the UI, so not exactly from scratch).

As a 4 month freshie yet to gain trust from the seniors when I started this, I did not have the opportunity to touch every aspect of the e-banking web application at work, so it's a bit less fulfilling when I can't see the whole picture. Working on this project on my free time allow me to gain insight into what are the technical difficulties for each part of the development, from setting up automated emails, payment gateway, handling account information to designing good process flow.