Happy Jolly is a feature-rich e-commerce website that has been built using modern web technologies such as React.js, Typescript, Firebase, Supabase, Cloudinary, PayPal, React-query, and tailwind-css. The website is designed to provide an engaging user experience for online shoppers interested in purchasing NFTs and other products. Happy Jolly offers a secure login system that enables users to create accounts and access personalized content. The site also features a robust shopping cart that allows users to add products to their cart and complete purchases with ease. Moreover, Happy Jolly offers a collection of exclusive NFTs that users can browse, buy and add to their collection. With its clean design and intuitive user interface, Happy Jolly provides a seamless online shopping experience that is both enjoyable and convenient.
- Deployed Application
- Key Features
- Preview
- Technical Skills
- Future Development
Happy Jolly
- Firebase authentication for secure user log-in
- Ability for top administrator to register new products
- User cart management through Firebase real-time database
- Mobile-responsive design using tailwind-css
- Custom hooks created with react-query to efficiently fetch data and keep the user interface smooth and responsive.
- Sign up new users with email
- Update a user's profile: Users can update their profile information.
- Upload file with firebase storage
- Form validation: The application includes form validation to ensure that users provide accurate and complete information when signing up or updating their profile
- Code Refactoring and Optimization
- UI Enhancements
- Products data in Firebase storage has been updated
- Code Refactoring and Optimization
- Implemented product and NFT filtering options to improve user experience.
- Utilized the Infinite Scrolling technique to fetch NFT API data dynamically.
- Leveraged the Supabase platform for PostgreSQL support, enabling more advanced queries for NFT data storage compared to Firebase.
- Integrated with the OpenSea API to obtain NFT data.
- Update Edit Profile page: Users can change name, profile image, and password using Firebase Realtime Database and Auth.
- The PayPal API is used to securely process payments and confirm successful transactions. To test this feature, a PayPal developer account was used in conjunction with the PayPal sandbox to simulate transactions without incurring any real charges.
- Order History page: Users can view their past orders. The transaction details and products are stored in Firebase Realtime Database and displayed in a table format for easy viewing.
Main Library : React
Main Language and Syntax : Typescript, Javascript ES6+, JSX
State Managemen : useContext
Server : firebase, supabase
UI Library : Tailwind css, React-icons
Others : git, Babel, eslint, prettier, React-query, React-hook-form, axios
| Register Page |
Login required for cart |
 |
 |
| Register Page |
Login required for cart |
 |
 |
| Landing Page |
Store Navigation |
 |
 |
| Landing Page (Mobile) |
Login Page |
 |
 |
| Collection Page |
Product Page |
 |
 |
| NFT Collection Page |
NFT Page |
 |
 |
| Edit Profile Page |
Checkout Page |
 |
 |
| Order Confirmation Page |
Orders Page |
 |
 |
This project is in its early stages of development, with future plans to implement additional features such as:
Membership and login through firebase storageEdit User ProfileEnhance the website's UI, making it even more visually appealing and user-friendly.Retrieve products and NFT data from APIs and filter by options.Use the OpenSea API to retrieve NFT data and integrate Supabase for more complex queries on NFT data.Add Express Checkout by Paypal- Code Refactoring and Optimization
- Get NFT Metadata and Update user's contract address