/ecommerce-front

firebase ecommerce

Primary LanguageTypeScript

Ecommerce Template

alt text

React Typescript Firebase Recoil Tanstack quey Apexcharts Tailwind CSS React hook form React player React router dom Framer motion

View Live ๐Ÿ‘ˆ

EN

Project Overview:

Ecommerce Template built with React, Firebase, and Stripe. Recoil was introduced to manage the global state on the client side. The top-level component detects changes in customer state using events such as Firebase's onAuthStateChanged and updates accordingly, reducing unnecessary repetitions in child components. Data caching was implemented using React Query. When there is a change in state, the refetch or mutation function is triggered to minimize unnecessary requests to the server

What I did:

  • Payment using Stripe
  • Products:
    • Search by product name
    • Reviews
  • Customers:
    • Sign in, Sign out, Edit profile
    • Wishlist, Cart, Checkout, Order history
  • Admin panel:
    • Dashboard: Visualization of data using graphs for sales performance, order status, and other metrics.
    • Products: registration and modification of products, addition of image files using drag and drop, and other related functionalities.
    • Orders: Reporting and updating of order status.

Conclusion:

  • Became proficient in using Firebase Auth and Firestore
  • Implemented animations using Lottie files

Whatโ€™s next?:

  • Introduce Google Cloud Functions
  • Packaging commonly used Components and Hooks into packages
  • Deep research on payment-related security
  • Improvements to Firestore rules

KR

Project Overview:

React + Firebase + Stripe ๋ฅผ ์ด์šฉํ•œ Ecommerce Template. Client side์˜ ์ „์—ญ ์ƒํƒœ๋ฅผ ๊ด€๋ฆฌ๋ฅผ ์œ„ํ•ด Recoil๋„์ž…. ์ด๋ฅผ ์ด์šฉํ•œ Customer ์ƒํƒœ๋ฅผ ์ตœ์ƒ์œ„ Component๊ฐ€ ๊ฐ์ง€ ๊ทธ๋ฆฌ๊ณ  ์ƒํƒœ๋ณ€ํ™”์— ๋”ฐ๋ฅธ ์—…๋ฐ์ดํŠธ๋ฅผ Firebase ์˜ onAuthStateChanged์™€ ๊ฐ™์€ ์ด๋ฒคํŠธ๋ฅผ ํ†ตํ•ด ์‹คํ–‰ํ•จ์œผ๋กœ์จ ์ž์‹ Components์˜ ๋ถˆํ•„์š”ํ•œ ๋ฐ˜๋ณต์„ ์ค„์ž„. React query๋ฅผ ์ด์šฉํ•œ Data cashing. ์ƒํƒœ๋ณ€ํ™”์‹œ Refetch ํ˜น์€ Mutation function์„ ๋ฐœ๋™ ์‹œํ‚ด์œผ๋กœ์จ ์„œ๋ฒ„๋กœ๋ถ€ํ„ฐ ๋ถˆํ•„์š”ํ•œ ์š”์ฒญ์„ ์ตœ์†Œํ™”ํ•จ.

What I did:

  • Stripe๋ฅผ ์ด์šฉํ•œ ์นด๋“œ๊ฒฐ์ œ
  • Products:
    • Search by product name
    • ์ƒํ’ˆํ‰, ๋ฆฌ๋ทฐ
  • Customers:
    • ํšŒ์›๊ฐ€์ž…, ๋กœ๊ทธ์ธ, ์ •๋ณด์ˆ˜์ •
    • Wishlist, Cart, Checkout, Order history ๋“ฑ
  • Admin panel:
    • Dashboard: ํ˜„ ํŒ๋งค ์‹ค์ , ์ฃผ๋ฌธ์ƒํ™ฉ ๋“ฑ์„ ๊ทธ๋ž˜ํ”„์™€ ์ˆ˜์น˜๋ฅผ ์ด์šฉํ•˜์—ฌ ๋ณด์—ฌ์คŒ
    • Products: ์ƒํ’ˆ์˜ ๋“ฑ๋ก ๋ฐ ์ˆ˜์ •, ๋“œ๋ž˜๊ทธ๋ฅผ ์ด์šฉํ•œ Image file ์ถ”๊ฐ€ ๋“ฑ
    • Orders: ์ฃผ๋ฌธ ์ƒํ™ฉ์˜ ์ƒํƒœ๋ณด๊ณ  ๋ฐ ๋ณ€๊ฒฝ

Conclusion:

  • Firebase-auth, Firestore ์‚ฌ์šฉ์— ๋Šฅ์ˆ™ํ•ด์ง
  • Lottie files๋ฅผ ํ™œ์šฉํ•œ ์• ๋‹ˆ๋ฉ”์ด์…˜

Whatโ€™s next?:

  • Google cloud functions ๋ฅผ ๋„์ž…
  • ์ž์ฃผ ์‚ฌ์šฉํ•˜๋Š” Components์™€ Hooks ์˜ Packageํ™”
  • ๊ฒฐ์ œ๊ด€๋ จ ๋ณด์•ˆ์— ๋Œ€ํ•œ ๊นŠ์€ ์—ฐ๊ตฌ
  • Firestore rules ๊ฐœ์„  ๋“ฑ

Gallery:

gallery1