🧋 Bubble Tea Shop

An interactive web application for online ordering of customizable Bubble Tea drinks, built as a single-page application (SPA) with modern e-commerce integration.

📌 Project Overview

Bubble Tea Shop is a non-commercial educational project that simulates an online storefront for crafting and ordering Bubble Tea. Users can build their drink by selecting tea types, milk, syrup, toppings, sweetness level, and temperature. The app features authentication, cart functionality, and order history.

This project showcases the use of Commercetools, a modern headless e-commerce platform, integrated into a performant frontend stack with strict type safety and linting.

Table of Contents

1. About The Project
   • Technology stack
2. Getting Started
   • Installation
3. Usage
4. Contributing

🎯 Features

• 👤 User registration, login, and anonymous customer flow
• 🧋 Drink builder with full customization (tea, milk, syrup, toppings)
• 🛒 Shopping cart and checkout flow
• 🔐 Auth via Commercetools Customer Password & Anonymous Flow
• 📦 Order history for logged-in users
• 🧾 Checkout with order summary
• 🧪 Form validation using Zod
• ⚡ Fast development with Vite
• 🎨 UI styled with TailwindCSS
• 🔄 CI/CD support (optional via GitHub Actions)

(back to top)

## 🛠️ Technology Stack

Category	Technologies
Frontend	TypeScript, Vite, [TailwindCSS] , [GSAP]
Validation	Zod
State Management	Zustand
API	Commercetools SDK
Auth	Customer Password and Anonymous Flow
Code Quality	ESLint, Prettier
Testing	Jest, Testing Library (optional)
DevOps	GitHub Actions / Netlify

📁 Project Boards

• GitHub Kanban Board: 🧃 Bubble Tea Kanban
• Jira Workspace: Jira Link

(back to top)

## 🚀 Getting Started

1. Clone the repository

git clone https://github.com/grenst/bts-e-commerce.git
cd bts-e-commerce

(back to top)

### 2. Install dependencies

npm install

3. Set up environment variables

Create a .env file in the root directory with the following contents:

VITE_CTP_PROJECT_KEY=your_project_key
VITE_CTP_CLIENT_ID=your_client_id
VITE_CTP_CLIENT_SECRET=your_client_secret
VITE_CTP_AUTH_URL=https://auth.europe-west1.gcp.commercetools.com
VITE_CTP_API_URL=https://api.europe-west1.gcp.commercetools.com

🔐 Do not commit this file to version control!

(back to top)

### 4. Run the app

npm run dev

Open your browser at http://localhost:5173

📜 Available Scripts

Script	Purpose
dev	Starts the development server (Vite)
build	Builds the app for production
preview	Preview the built project locally
lint	Runs ESLint for code quality checks
format	Formats the code using Prettier
test	Runs tests
type-check	Type validation via TypeScript

npm run dev         # start dev server
npm run lint        # run ESLint checks
npm run format      # format with Prettier
npm run build       # production build

📦 Project Structure

bubble-tea-shop/
├── .husky
│   ├── ...
│   └── pre-push
├── src
│   ├── __tests__
│   │   └── ...
│   ├── api
│   │   ├── auth
│   │   ├── orders
│   │   └── products
│   │   │   └── auth.ts
│   │   ├── orders
│   │   │   └── orders.ts
│   │   └── products
│   │       └── products.ts
│   ├── components
│   │   ├── features
│   │   │   └── product-card.ts
│   │   ├── layout
│   │   │   └── footer
│   │   │       ├── footer.scss
│   │   │       └── footer.ts
│   │   ├── test
│   │   │   └── CommerceTest.ts
│   │   └── ui
│   │       └── button
│   │           ├── button.scss
│   │           └── button.ts
│   ├── pages
│   │   ├── auth
│   │   ├── cart
│   │   ├── catalog
│   │   ├── checkout
│   │   ├── home
│   │   └── product
│   ├── router
│   ├── sources
│   │   └── svg-sprite.ts
│   ├── store
│   │   │   └── auth-page.ts
│   │   ├── cart
│   │   │   └── cart.ts
│   │   ├── catalog
│   │   │   └── сatalog.ts
│   │   ├── checkout
│   │   │   └── checkout.ts
│   │   ├── home
│   │   │   └── home.ts
│   │   └── product
│   │       └── product.ts
│   ├── router
│   │   └── router.ts
│   ├── sources
│   │   └── svg-sprite.ts
│   ├── store
│   │   └── store.ts
│   ├── styles
│   │   ├── _fonts.scss
│   │   ├── _mixins.scss
│   │   ├── _variables.scss
│   │   ├── global.scss
│   │   └── tailwind.css
│   ├── types
│   │   └── commercetools.d.ts
│   ├── utils
│   │   ├── apiCommerse.ts
│   │   └── elementUtils.ts
│   ├── index.ts
│   └── vite-env.d.ts
├── .eslintrc.cjs
├── .gitignore
├── .prettierrc.json
├── eslint.config.js
├── index.html
├── jest.config.cjs
├── package.json
├── postcss.config.cjs
├── README.md
├── tailwind.config.cjs
├── tsconfig.json
└── vite.config.ts

💡 Future Plans

• Integrate Stripe / PayPal for real checkout
• Save favorite drinks per user
• Admin dashboard for managing drinks and pricing
• Implement starship travel to Mars

(back to top)

## 📧 Contact

Developers team:
grenst VitaliMay SeregaSimba

Enjoy your tea time! 🧋

🔧 Technologies Used

 

 

 

 

 

 

 

 

 

 

 

 

 

 

18.05.2025

[] 1: The about page has been added, and now in footer, when you click on About the Company, you are redirected to the about page. [] 2: footer also now has an adaptive design, and a link to the discord channel has been added when clicking on © 2025 Kat's Cats