/ryokucha

Ryokucha is an e-commerce app that allows you to buy Japanese green tea directly from Japan. Whether you're a fan of hojicha, sencha, or any other variety of green tea, Ryokucha has something for everyone. This app was built using React, Next.js 13 (with its new features such as the app directory), Framer Motion, TypeScript, Sanity, Firebase, etc

Primary LanguageTypeScript

Ryokucha, an e-commerce app's mockup image

Ryokucha

Ryokucha is an e-commerce app that allows you to buy Japanese green tea directly from Japan. Whether you're a fan of hojicha, sencha, or any other variety of green tea, Ryokucha has something for everyone.

This app was built using React, Next.js 13 (with its new features such as the app directory), Framer Motion, TypeScript, Sanity (a headless CMS), Firebase Auth, React-Hook-Forms, Stripe, Jest, Tailwind, and React Testing Library.


I also have a version using Firebase's Firestore database, although the code is not up-to-date you can still check it out by switching to the with-firestore branch


Features

  • Browse a wide selection of Japanese green teas
  • Add items to your cart and check out with Stripe
  • Sign in with your Google account using Firebase Auth
  • Add products to your wishlist and view them

Getting Started

To get started with Ryokucha, either visit the Live website or simply clone the repository and install the dependencies:

git clone https://github.com/liquid-O2/ryokucha.git
cd ryokucha
npm install

Then, start the development server:

npm run dev

Your Ryokucha app will be available at http://localhost:3000


Testing

To run the test suite, simply run:

npm run test

Built With

  • React - A JavaScript library for building user interfaces
  • Next.js - A framework for building server-rendered React applications
  • Framer Motion - A library for animating React components
  • TypeScript - A typed superset of JavaScript that compiles to plain JavaScript
  • Sanity - A headless CMS for building structured content
  • Firebase Auth - A service for authenticating users with Google accounts
  • React-Hook-Forms - A library for building forms with React Hooks
  • Stripe - A platform for building e-commerce applications
  • Jest - A JavaScript testing framework
  • Tailwind - A utility-first CSS framework for rapidly building custom designs
  • React Testing Library - A testing library for React components

Contributing

If you'd like to contribute to Ryokucha, please fork the repository and make your changes as a separate branch. Once you've made your changes, open a pull request and we'll review your submission.