/E-Commerce-React-Websie

An e-commerce website built with React.js, Firebase, Cloudinary, react-query, and tailwind-css as a practice project.

Primary LanguageTypeScript

Happy Jolly

스크린샷 2023-02-20 오전 2 56 41

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.

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