A skincare e-commerce shop that assists customers in finding their ideal skincare routine based on their skin type. Customers can complete a quiz to discover their perfect products and a serum formulated for their unique skin concerns and skin types.
🛁 Project Link
Tech used: Typescript, Vite, Redux-tool-kit
FrontEnd - Used React to help create the UI components, tailwind
Things I would like to fix/add
-
Add Stripe payment
-
Optimize the logic for which product to recommend
-
Add more products for more skin type concerns and accessibility
-
Create a backend database for all the products
-
Create a backend allowing users to save their quiz results
The main reason why I made this project was that I wanted to learn Typescript.
I loosely followed a tutorial from 🎥 Youtube.
Since I loved skincare, I thought it would be fun to make a skincare e-commerce site instead of a simple one-page site that leads to a contact form like the tutorial.
I thought I could challenge myself. I decided to include:
- ✨ A quiz for customers to find their ideal products and customized formualtions
- ✨ A quiz to help find their skincare coutine
- ✨ Ability for customers to buy the products - aka e-commerece
Learning and getting used to using Typescript was the biggest challenge. There were many times when I thought I knew what to do but when I included a Typescript to the recipe it became an entirely different animal. Although it was difficult, I was able to find answers or work around the problem.
One major problem I faced was using react, redux, and typescript together. Although redux and redux-toolkit is written in Typescript it was not really well documented, especially when you add redux to the formula. After extensive searching and help from others, I was able to find resources to help me apply Typescript to redux.
This taught me I still have a long journey to be proficient in Typescript, even those who are pretty good programmers can have a tough time with Typescript. I do know that getting used to using types is important. It can help create a less buggy and readable code. It is a challenge I will keep on working on.