top of page

Application Development Project

Introduction

In this project, my team and I developed an application using Python, Flask, HTML, CSS and Javascript.

Python and Flask were used for the back-end while HTML, CSS and Javascript were used for the front-end.

​

The context of our project is a candy e-commerce website with an employee portal to manage the inventory, customers and staff in the company.

​

On my part, I focused on the following functions of the project.

  • Login

  • Candy inventory management

    • View ​candies

    • Create candies

    • Update candies

    • Delete candies

  • Staff​ management

    • View staff

    • Create staff​

    • Update staff

    • Delete staff

  • Customer management

    • Customer membership points

    • Create customers

    • Update customer details​

Login

Users will need to provide their valid user ID and password to do a login.

​

If the login is successful, the staff will be brought to the employee portal menu page while the customer will be brought to the page to update their details.

If the login is unsuccessful, an error message will be shown.

​

The image below shows the login page with the error message when an incorrect login attempt was made.

Candy Inventory Management

Create candies

To add candies to the inventory, the staff has to create new candies. 

The image below shows a part of the layout and design of the "create candy" page.

Main candy inventory page

The main inventory page displays the list of candies available in the store.

Staff can not only use this page to view the inventory but also go to the "create candy" and "update candy" pages. Deletion of candies is also done on the main inventory page.

​

I have also created a search bar to make it easy for staff to find candies.

The search can be done by fields like ID, retail price and category.

Staff Management

The methods to manage the candy inventory are also applied for staff management.

​

Before deleting a staff, the application will check the current number of staff registered. If there is only 1 staff and a request has been made to delete that staff, an error message will show. If there is more than 1 staff, the deletion of that particular staff will be successful.

​

The image below shows the main staff page containing information about each staff. To demonstrate the constraints of deleting a staff, the image also shows the error message that will appear when deletions are unsuccessful.

 

To ensure the privacy of the passwords, the characters have been replaced with asterisks (*).

Customer Management

Employee portal - Creation of customer

The project allows customers to be registered in 2 ways.

  1. Staff to create a customer on the employee portal

  2. Customer to register themselves on the customer website

​​

I was responsible for the creation of customers on the employee portal.

Every time a staff creates a new customer, a unique ID is generated for that customer. The ID is used by the customer along with a valid password when he/she wants to update his/her particulars in the future.

Customer website - Update customer details

The project allows customers to update their particulars in 2 ways.​

  1. Customer to update their own particulars on the customer website

  2. Staff to update the customer's particulars on the employee portal

​​

I was responsible for the updating of customer details on the customer website.

To ensure the security and privacy of every customer's data, a customer can only update his/her own particulars. They will be brought to the page to update their own particulars after successfully logging in.

Customer membership points

In this project, the staff can manage the customer membership points by using the points management system on the employee portal.

​

There are 3 tiers of membership:

  • GOLD: 201 and above

  • SILVER: 101-200

  • BRONZE: 0-100

​​

When points are deducted after the customer makes redemptions, the membership tier will not fall.

This means that the membership tier can only go up when the customer makes purchases, causing the membership points to increase.

​

However, when the staff deducts points after the customer requests to make redemptions, the application will check if the customer has enough points. If there are sufficient points, the deduction is successful. If there are insufficient points, an error message will show and no points will be deducted.

​

The images below show an example of the event there are insufficient points.

A customer initially with 20 points.

A staff tries to deduct 100 points.

A message prompting that there are insufficient points will appear.

Key Takeaways from this Project

This project was the first main project I worked on in my course at Nanyang Polytechnic.

​

It taught me how to use Flask to build web applications, written using the Python language. For the UI/UX design, I used my knowledge of HTML, CSS and Javascript.

​

Throughout the project, I had to learn how to integrate the back-end codes (Python and Flask) with the front-end codes (HTML, CSS, Javascript). To me, the integration process was crucial. If it was not done well, the entire web application would not work. This means that the staff cannot use the employee portal and the customers cannot manage their own particulars.

APPDEV Key Takeaway
bottom of page