June 2024 - ongoing
Creative Bunny E-Commerce Shop
Tech stacks
React, Redux Toolkit, Passkeys, Firebase, TypeScript, SaSS, Stripe
Project Overview
Welcome to the Creative Bunny wooden toy shop!
This fully responsive website is a full-stack project built using React, Redux Toolkit, and Firebase. It is based on a real toy business currently selling on Trademe. All toy details and images are copyrighted by Creative Bunny Ltd. Working on this project has strengthened my skills in the React and Redux frameworks, and has provided valuable practice with essential e-commerce features such as setting up add-to-cart, checkout, and Stripe payment functionalities.
Recent update: Passkeys Authentication
The website now supports Passkey authentication as a secure and convenient passwordless sign-in option! Registered users can create a Passkey, allowing them to access their accounts seamlessly without needing to remember or enter a traditional password on future visits.
How It Works:
- Registration: Users can sign up as usual using an email and password.
- Passkey Setup: After registration, users are given the option to create a Passkey.
- Passwordless Sign-In: On subsequent logins, users with a registered Passkey can sign in effortlessly with this option, enhancing both security and user convenience.
Key pages
Landing Page:
Category:
Product detail:
Cart:
Checkout:
Auth:
Project links
Project Demo
A Testing Ground for New Ideas
This project is also a playground for trying new things. I've recently added Passkeys to provide users with a passwordless sign-in option. After having a taste of building a chatbot with Amazon Lex during one of my AWS projects (see here), going ahead, I’m interested in developing an AI chatbot for my e-commerce website by utilising Amazon Lex and training foundation models with Amazon Bedrock to enhance product recommendations and improve order checking using my own product data.
I aim not only to enhance the site but also to take the chance to experiment with some cool techs out there.
In the next phase of development, I plan to:
- Complete the footer links: Add relevant pages to the links in the footer.
- Migrate to AWS: As this e-commerce project evolves, such as integrating more features like order management and admin functionalities, transitioning to a more robust and scalable architecture becomes essential. Currently, the project uses Firebase for database interactions and Netlify functions for Stripe API calls directly from the front-end. Considering my future plan including implementing an AWS Lex chatbot and integrating additional order and admin-related APIs, I plan to migrate the project to AWS. This will not only provide the necessary infrastructure to improve the scalability and security of the application but also offer me a valuable opportunity to deepen my expertise with various AWS services.