A custom ecommerce website using NodeJS and AngularJS

A Beautiful Sign is a custom E-commerce website for a company that sell hand made, personalised gifts. A major requirement for the site was manageable personalisation fields, so each product can be customised by the customer. Aspects such as names and dates can be added to the products, so each product needed a great way to add and manage the personalisation fields.

This client came to me with lots of issues with their current Wordpress E-commerce website. Customer emails didn't work and the lack of trade client pricing meant manual invoicing and chasing payments was taking up too much time.

To give the company what they needed, I designed the site around the trade client access - allowing for multiple pricing, depending on user login permissions, and exposing all the product data via an API. The API can be used to show products on the trade client websites and even make orders. The site layout and checkout process also changes for trade clients to make it easier for bulk purchasing. 

As well as all the regular E-commerce features like a full CMS, product and discount code management, the trade clients can manage their invoices on the site directly, and pay for multiple orders at once. A Beautiful Sign now have their time back, and can use it for other more important things.

Notable Features

Trade Access

The website was built from the ground up, to solve one problem - trade orders.

The old Wordpress website was slow, and only allowed for one price per product. As the company also supplies trade clients, different prices needed to be shown depending on certain login permissions. These permissions are set by the admin, and when a user has 'trade client' permissions, they get access to cheaper prices, and a bulk ordering checkout.

Making it easier for trade clients to browse and buy saved valuable admin time, saving the company money.

Fully Responsive

As over 50% of traffic for this site is on mobile, a great looking, fully functional mobile layout was a priority.

The top menu features icons, instead of words, and the menu switches to full width links, so they're easier to click on.

An awesome 2 cell grid is perfect for browsing the hundreds of products listed on the site.

Fully Responsive

This is a single page app utilising the dynamic abilities of AngularJS, with product data served from the custom Node based API. Along with a complex rules system and automatic product filtering, customers can piece together compatible hardware, to get the specification they want.

The fully manageable rules system let's the customer know if a case is too small, or graphics card is too long, ensuring the PC can be built problem free. Checkout is hidden if any item is incompatible, and the customer informed how to fix it.

Once they've completed the simple checkout process, the component list is passed to the build team.

Back Office Tools

Due to the custom nature of the site, and the problems it needed to solve, a full suite of admin tools were also needed. Here the company can manage products, users and update the images and promotions on the front page.

Their order fulfilment process involves printing, so the order page was built around that. Tick boxes allow the company to choose the orders they need, and once they've been printed, the status is automatically updated, and the customer emailed to let them know their order is being made.

Additional Features

Discount Codes

Within the back office tools is a flexible discount code tool, to allow the company to incentivise and promote certain things. The ability to run a free postage promotion helps the company greatly, however money off codes can be created too.

Asset Creation

I have an ongoing contract with the company for artwork creation and enjoy working closely with them to bring their ideas to life. Being a creative company, they know what they like but lack the tools to work on it themselves.

Multiple Unique Personnalisation Fields

Initially the personalisation fields were added via ticking which options needed to be added to the product. As the number of options grew, the list became unmanageable. I devised a way so the company can add the fields manually, meaning each product can have unique personalisation options, without maintaining a massive list of tick boxes.

Exim Email Server

I purposefully setup the website on a VPS so I configure Exim and Dovecot to manage their emails. The domain has also been configured with PTR, SPF and DKIM records to ensure the mail is delivered to multiple users. Additional domain emails will also be utilised in the future.

About Me
Packages and Pricing
Contact Me
All Site Content
[email protected]