Happy Jolly

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.

table of contents

1. Deployed Application
2. Key Features
3. Preview
4. Technical Skills
5. Future Development

Deployed Application

Happy Jolly

Key Features

• 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.

v0.1.0

• 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

v0.2.0

• Code Refactoring and Optimization
• UI Enhancements
• Products data in Firebase storage has been updated

v0.3.0

• 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.

v0.4.0

• 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.

Technical Skills

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

Preview

v0.1.0

Register Page	Login required for cart
Register Page	Login required for cart

v0.2.0

Landing Page	Store Navigation
Landing Page (Mobile)	Login Page

v0.3.0

Collection Page	Product Page
NFT Collection Page	NFT Page

v0.4.0

Edit Profile Page	Checkout Page
Order Confirmation Page	Orders Page

Future Development

This project is in its early stages of development, with future plans to implement additional features such as:

• Membership and login through firebase storage
• Edit User Profile
• Enhance 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