WLD Watches

Home Screen
Products Screen
Product Reviews
Login Screen
User Carts
Payment Screen
Game for Discount
User Order Details

Inspiration

Our team wants to display website that is seamless, sleek with brevity so that users can save time navigating through our website while starting their timeless journey of watches with us.

What it does

Welcome to WLD Watches, an e-commerce watch website that offers watch products of different categories for users to view and purchase. The team implemented stripe payment gateway to enable users to checkout their carts and make payment with cards. Reviews with image uploading is also included for users to share their purchased product. Users are also able to share the product through social media platforms. Users are also able to reset their password via a "one time link". Lastly, users can also communicate with the website admin for any queries that they have.

How we built it

Built as a PERN Stack

Postgres Database (P)
ExpressJS Backend (E)
ReactJS Front End (R)
NodeJS Environment (N)

Challenges we ran into

Jin Heng

One key challenge faced was the process of implementation of stripe payment gateway. At first I thought it was the same codes as the one we did for our front-end website but the method chaining is different from ReactJS. Especially when I need multiple APIs to do other functions like retrieving discount codes, total price needed for payment, making sure the address is updated from user input to the checkout endpoint and deleting cart after payment is successful. The concept was there but it took awhile to understand the logic behind the scenes to actually make the payment successfully functional. I could not have done it without my team members for lending me a helping hand with the necessary team effort. This project has also allows me to improve my problem solving skills to rethinking my logic of functions and consulting my friends and lecturers for feedback on how I can further improve on my work.

Amanda

One of the key challenges during this project was implementing the cart functions such as deleting and updating each cart item. In order to direct each function to a specific cart item, a unique key had to be assigned to each cart item in an array which was populated with data using a for loop. This ensures that when there are any changes made to the individual cart items, changes will only be made to the targeted ones. Also, there was a dependency issue with one of the npm packages that I wanted to use, and it caused the app to have certain issues. Moreover, picking up libraries independently (Chakra UI, Toast.js, etc.) was slightly challenging for me as I had to read and analyse the documentations. Such of these problems triggered me to think of different solutions and view things from different perspectives. This project has also allowed me to improve my perseverance and mustering the courage to ask for help from my lecturers and teammates when I need it. As a result, I have learnt many new things and understood the concepts that I was previously weak in.

Brennan

One of my key challenge was setting up the Socket.io chat's backend. Before I integrated the Socket.io chat, it was hosted on my localhost. However when integrating it into the react website, I soon realised that the Socket chat must be hosted onto another Heroku app or on another port to work. Since it was a new library to learn, I had to source for codes and did lots of trial and error before realising it must be hosted onto another Heroku app apart from the existing back-end. There was also CORS issues when connecting to my socket server. As such, I had to change the "origin" to where my react website would be running on. For socket.io chat's front-end, users would receive 2 of the same message whenever the other party sends a message through when integrating it into the team's react website. Hence I had to query my teammates as to why users would receive the same message twice when tested out using the team's react website. This made us came together as a team to work out different plans to tackle this problem and we soon realised it was react's strict mode making app run again to highlight possible problems in our web application.

Guo Yi

One key challenge was the memory game to generate discount codes. With the useEffect hook being called every time the user clicks on the cards to check if it matches coupled with react rendering twice to flag out potential errors, it resulted in codes running more than what was expected. As such, a boolean was implemented for a check whether the code has been ran. Additionally, implementing the discount code to the payment was another issue since payment could be made with or without the use of discount codes. This required me to think of ways to retrieve the total amount to pay initially without the discount code being applied, as well as how to retrieve the price to pay after the discount is being applied. Also, the implementation of D3 bar chart for sales data visualization required me to look up on various different postgres sql query functions to retrieve the necessary data for the bar chart. Lastly, the process of checking and sending of email using nodemailer for the password reset was a tedious one with multiple endpoints to execute. However, these challenges faced allowed me to work very closely with my team members to implement our features together for a seamless fit. Also, it allowed me to think through different ways of solving problems and to consult my lecturer if I need any advice on how to proceed.

Accomplishments that we're proud of

Even though there are plenty of room for improvement, the team is glad that we were able to pick up ReactJS as well as utilize React CSS libraries like Chakra UI for all styling of the website. The team is also pleased that all forms in the website are built using Formik for better form management, as well as Yup for validation which are all picked up independently. Lastly, the team is happy that we were able to adhere to the Airbnb style guide using Eslint which provides a set of best practices and guidelines for generating quality code. All in all, we are grateful to be exposed to more development technologies and concepts, as well as being able to push ourselves beyond our comfort zones to try out and produce a working product during the course of this module.

What we learned

Over the past few months of developing the application, the team learnt a lot on the importance of time management and planning. Every week is crucial to our development. As such, proper planning and task completion has to be monitored and tracked systematically to ensure that we are on time and on task. We also learnt the importance of helping each other when we meet with an obstacle as more brains are better than one. Communication is also extremely crucial to us during the development. Most importantly, we learnt how to work out a project plan, execute testing, develop and host a web application together as a team to produce an end product that we are all satisfied with.