CassieWANG

Skio Ting Cake

Individual Project

skio ting cake website mockup VIEW DEMO

Introduction

A friend of mine has a small business of making birthday cakes. She currently uses WeChat as her business marketing and operating tool, which means she creates posts on the friends' circle, and people who are friends with her on wechat can contact her if they would like to order a cake.

The problem of using WeChat as the solely business tool is that there is no product catalogue with all available products for customers to browse through. Customers must ask owner basic questions such as what’s available for the day, and what’s the price of each cake. They also have to wait for owner’s response before making an order. More often that not it can take longer than it should. As for the business owner, Skio Ting, who also does customer service, it requires lots of effort and energy to answer repeated customer enquiries every day, which can adversely occupy her time from making cakes.

Another problem is that WeChat is mainly used among People who speak Chinese, and it’s hard for the business to reach the majority of people living in Wellington who speak English.

A successfully solution would be to create an English website listing all available products for customers to see with an online ordering system.

Project Objective

To provide a way for customers from different cultural backgrounds to easily access the product information and product catalogue, and to make orders online; for the client to grow and maintain a relatively steady and sustainable business in receiving orders from customers around wellington.

skio ting cake sitemap
Skio Ting Cake Sitemap

Requirements

Functional Requirements

Non-functional Requirements

  1. Security: It should be secure using appropriate security techniques.
  2. Availability: It should be available for access 24/7 with authentication requirements.
  3. Reliability: It should have excellent data integrity to protect personal details.
  4. Usability: It should be compatible with all device types, including desk top computer, tablet, cell phones, etc.
  5. Scalability: It should be scalable in order to have the ability to grow to handle more work.

Methodology

Technology Research

The shopping cart function is one major issue I need to tackle in order to fulfill the business requirements. It will need a database to store data and build the API, along with using frontend frameworks to build the interface and manage global data, so that users can perform tasks like adding a product to the shopping cart, and calculate the total payment amount.

During the research I studied two CMS systems, Django and Strapi. With either system I should be able to create a dynamic and interactive website with the functions and database system provided. Django is a free python web framework. It requires plenty of reading and research on its documentation to set up and get started. Although once everything is set up it’s fairly straight forward to use. Strapi is an open-source CMS written in JavaScript. I find it easier to set up and get started with. After trying out both I decided to use Strapi because it is written in JavaScript which is more familiar to me.

Stack Used

Strapi was used to build the backend API, with its default database SQLite. The frontend JavaScript framework is Next.js. I added Redux to manage global data state in order to achieve the shopping cart functionality. I also incorporated NextAuth in Next.js to implement user authentication.

Result

Release 1

20/05/2022

A detailed, customized E-commerce website framework was developed. More functionalities, such as user authentication, and an online payment system, will need to be carefully considered and implemented.

DEMO

SOURCE CODE (Frontend)

SOURCE CODE (Backend)

Release 2

18/07/2022

A new and improved version of Skio Ting Cake was rewritten in React and Node.js for more functionalities and faster loading speed. The loading speed has been significantly improved due to both front-end and back-end being incorporated into one server.

New features:

DEMO

SOURCE CODE