Cotton On Clone

Payment page
Google Login page
Checkout with promo code page
Product Listing
Product Display page
Chatbot on the right

Admin

Username: admin@email.com Password: Pa$$w0rd

Inspiration

We wanted to create an exact replica of cotton on the website because of how versatile and trendy it is. We were inspired by the Netflix clone we saw the previous team complete.

What it does

Our cotton-on clone has basic features such as a home page, display of products, product listing, posting reviews, displaying reviews, register, and login pages. Then more advanced features we have implemented were Google Sign-In/Sign out, Recaptcha verification, 3D Model of Product, Node Caching, Chatbot, and Promo Code at the checkout page. In order to enhance our basic features, we have included add to cart, payment, and admin roles. Furthermore, we have ensured higher reliability for our security system by adding validation for emails, passwords, first name & last name at both login and register pages, as well as password hashing.

How we built it

We have started our project from scratch by creating the front-end part first without using any templates. Then we incorporated elephant.sql to act as our database where we will retrieve our information from and then we host our website on the cloud by deploying it on Heroku.

Challenges we ran into

Alisanne

I have faced challenges in completing my payment function. To implement the stripe payment was not that tedious, however, to add all the items from the add to cart page was challenging. While trying to figure it all out, I have found that stripe also automatically calculates the number of items for the user, hence quantity inside the code can just be kept to a value of 1. By asking one of my team members to check the code, I was able to later on successfully implement the payment page that will include all the items from the checkout page. I also ran into further challenges when deploying all our codes on Heroku. In order to solve the bugs, patience had to be learned as I had to go through the bugs one by one.

Chi Haun

The challenge I faced is when the codes in the tutorial for like captcha are not very suitable with the code we already have and implementing into it, we need to change the registering user code so that the captcha could work. Another challenge I faced is when making the chatbot, I need to look for many chatbot tutorials and see whether it is easy to understand and think about how I can implement it on the website. Sometimes the script cannot detect the words that the user typed out/talked and I would need to do a lot of testing to make sure all the parts of the code could work. After hosting the website to Heroku, the captcha would not work, and I would need to create another site and secret key again. The search prediction is challenging as I would need to search how people make the search prediction and how I can integrate it into the website. There are many times the code won't work and need to spend a lot of time to do troubleshooting. After it works, I need to extract the product names and split the names out so it will be easier for the user to search for the product. There is a need to create a script to prevent duplicate names.

Yi Xian

One of the changes that I faced was that I have quite a bit of trouble with was when I try to post data onto the server, I am unable to post it. I couldn't figure it out for a long time and when I searched online there was a limited amount of information on it. Finally, I found out that PostgreSQL interprets double quotes as being quotes for identifiers, which causes me to not be able to insert data properly as I was always using single quotes which are used for strings, thus returning me errors and unable to post, update, delete data appropriately.

Shou Zhi One of the challenges that I faced was that I am not able to delete specific item from shopping cart. While trying to figure it out, I found that the delete button was in a loop and this lead to a problem which is when I clicked on the button, it run multiple times and delete all the items in the cart. Finally, I found a way to fix it which is using the event stopImmediatePropagation method. This is to prevent the event call all the delete button that was listening to it as every button has the same class and allow the function to just run once.

Accomplishments that we're proud of

We are proud of successfully implementing all the advanced features. We believe that we have shown tremendous efforts in our project. Our website shows reliability on the security side as well as a good user experience for the user to easily navigate through.

What we learned

We have a good synergy within our team and that has definitely contributed to overcoming all the challenges together. We also learned, over the course of this journey, how to implement some of the more advanced features such as a chatbot, advanced search as well as a working shopping cart that redirects you to a third-party purchase page.

What's next for Cotton On Clone

We plan to add in other product lines including the Men clothing section as well as incorporate different products other than tops. This will allow our users to have a more variety of products to choose from. Happy shopping!