🍰 BuySelf

무인 상품 인식 계산대 
계산할 때 바코드로 하나하나 찍지 말고 사진 한 장으로 상품을 인식해보세요!

📒 Medium

Introduction

📹 Demo

상품 스캔

상품 검색 및 체크리스트 등록

상품 결제

💡Tech Stack

- Frontend : React
- Backend : Flask
- Web Server: Nginx
- Middleware : Gunicorn
- AI model : YOLOv5
- DevOps : Docker
- Database: MySQL
- API Documentation : Swagger
- Deployment : AWS
- VCS: Git
- Monitoring: Prometheus, Grafana, Elastic stack
- Cache: Redis

💻 System Architecture

📗 API

📈 Monitoring

Grafana + Prometheus, ELK

flask	Node exporter

cAdvisor	ELK

🤖 AI

🚀 How to Start

1. Clone Repository

https://github.com/2023-Winter-Bootcamp-TeamH/buyself-docker

2. Install Pacakages

$ cd buyself-frontend
$ npm run build

3. Env Settings

• Add /buyself-docker/settings/.env file

### buyself-backedn/config
# === Database ===
DB_USERNAME =
DB_PASSWORD =
DB_HOST =
DB_SCHEMA =
DB_PORT =
# === S3Bucket ===
ACCESS_KEY_ID =
SECRET_ACCESS_KEY =
S3_BUCKET_REGION =
S3_BUCKET_NAME =

4. Run Docker

$ docker-compose -f docker-compose.prod.yml up --build   # build images and run containers

📂 Directory Structure

자세히 보기(여기를 눌러주세요)

📦buyself-docker
 ┣ 📂logging-example
 ┃ ┣ 📂elasticsearch
 ┃ ┃ ┣ 📂config
 ┃ ┃ ┃ ┗ 📜elasticsearch.yml
 ┃ ┃ ┗ 📜Dockerfile
 ┃ ┣ 📂filebeat
 ┃ ┃ ┣ 📂config
 ┃ ┃ ┃ ┗ 📜filebeat.yml
 ┃ ┃ ┗ 📜Dockerfile
 ┃ ┣ 📂kibana
 ┃ ┃ ┣ 📂config
 ┃ ┃ ┃ ┗ 📜kibana.yml
 ┃ ┃ ┗ 📜Dockerfile
 ┃ ┗ 📂logstash
 ┃ ┃ ┣ 📂config
 ┃ ┃ ┃ ┗ 📜logstash.yml
 ┃ ┃ ┣ 📂pipeline
 ┃ ┃ ┃ ┗ 📜logstash.conf
 ┃ ┃ ┗ 📜Dockerfile
 ┣ 📂nginx
 ┃ ┣ 📂log
 ┃ ┃ ┣ 📜access.log
 ┃ ┃ ┗ 📜error.log
 ┃ ┣ 📜Dockerfile
 ┃ ┗ 📜nginx.conf
 ┣ 📂settings
 ┃ ┗ 📜.env
 ┣ 📜.gitignore
 ┣ 📜datasource.yml
 ┣ 📜docker-compose.prod.yml
 ┣ 📜docker-compose.yml
 ┗ 📜prometheus.yml
📦buyself-backend
 ┣ 📂.idea
 ┃ ┣ 📂inspectionProfiles
 ┃ ┃ ┣ 📜profiles_settings.xml
 ┃ ┃ ┗ 📜Project_Default.xml
 ┃ ┣ 📜.gitignore
 ┃ ┣ 📜buyself-backend.iml
 ┃ ┣ 📜modules.xml
 ┃ ┣ 📜vcs.xml
 ┃ ┗ 📜workspace.xml
 ┣ 📂config
 ┃ ┣ 📜DatabaseConfig.py
 ┃ ┣ 📜s3bucketConfig.py
 ┃ ┣ 📜s3Connection.py
 ┃ ┗ 📜__init__.py
 ┣ 📂controller
 ┃ ┣ 📜elasticSearch.py
 ┃ ┣ 📜imageController.py
 ┃ ┣ 📜listController.py
 ┃ ┣ 📜paymentController.py
 ┃ ┣ 📜predictController.py
 ┃ ┣ 📜productData.json
 ┃ ┣ 📜searchController.py
 ┃ ┗ 📜__init__.py
 ┣ 📂migrations
 ┃ ┣ 📂versions
 ┃ ┃ ┣ 📜3cb8144b6381_.py
 ┃ ┃ ┗ 📜60f0e59f54f4_.py
 ┃ ┣ 📜alembic.ini
 ┃ ┣ 📜env.py
 ┃ ┣ 📜README
 ┃ ┗ 📜script.py.mako
 ┣ 📂models
 ┃ ┣ 📜products.py
 ┃ ┗ 📜__init__.py
 ┣ 📜.git
 ┣ 📜.gitignore
 ┣ 📜app.py
 ┣ 📜best.pt
 ┣ 📜detect.py
 ┣ 📜Dockerfile
 ┣ 📜README.md
 ┣ 📜requirements.txt
 ┣ 📜tasks.py
 ┣ 📜views.py
 ┗ 📜wsgi.py
 📦buyself-frontend
 ┣ 📂node_modules
 ┣ 📂public
 ┣ 📂src
 ┃ ┣ 📂components
 ┃ ┃ ┣ 📂buy
 ┃ ┃ ┃ ┣ 📜BuyButton.tsx
 ┃ ┃ ┃ ┣ 📜BuyInfoBox.tsx
 ┃ ┃ ┃ ┣ 📜BuyInfoLabel.tsx
 ┃ ┃ ┃ ┣ 📜BuyTable.tsx
 ┃ ┃ ┃ ┣ 📜Divisions.tsx
 ┃ ┃ ┃ ┣ 📜LeftLayout.tsx
 ┃ ┃ ┃ ┣ 📜TdProduct.tsx
 ┃ ┃ ┃ ┗ 📜TextBox.tsx
 ┃ ┃ ┣ 📂checklist
 ┃ ┃ ┃ ┣ 📜CheckList.tsx
 ┃ ┃ ┃ ┣ 📜CheckListCard.tsx
 ┃ ┃ ┃ ┣ 📜CheckListItemList.tsx
 ┃ ┃ ┃ ┣ 📜Division.ts
 ┃ ┃ ┃ ┗ 📜Footer.tsx
 ┃ ┃ ┣ 📂common
 ┃ ┃ ┃ ┣ 📜CustomAxios.ts
 ┃ ┃ ┃ ┣ 📜Header.tsx
 ┃ ┃ ┃ ┣ 📜Loading.tsx
 ┃ ┃ ┃ ┣ 📜Modal.tsx
 ┃ ┃ ┃ ┣ 📜NotFound.tsx
 ┃ ┃ ┃ ┗ 📜ScrollToTop.tsx
 ┃ ┃ ┣ 📂main
 ┃ ┃ ┃ ┣ 📜Button.tsx
 ┃ ┃ ┃ ┣ 📜ButtonBox.tsx
 ┃ ┃ ┃ ┣ 📜MainContainer.tsx
 ┃ ┃ ┃ ┣ 📜MainPage.css
 ┃ ┃ ┃ ┣ 📜MainPage.css.map
 ┃ ┃ ┃ ┗ 📜MainPage.scss
 ┃ ┃ ┣ 📂Payment
 ┃ ┃ ┃ ┣ 📜PaymentButton.tsx
 ┃ ┃ ┃ ┣ 📜Paymentmain.css
 ┃ ┃ ┃ ┗ 📜Paymentmain.tsx
 ┃ ┃ ┣ 📂PaymentFail
 ┃ ┃ ┃ ┣ 📜PaymentFail.css
 ┃ ┃ ┃ ┣ 📜PaymentFail.tsx
 ┃ ┃ ┃ ┗ 📜PaymentFailButton.tsx
 ┃ ┃ ┣ 📂products
 ┃ ┃ ┃ ┣ 📜Pagination.tsx
 ┃ ┃ ┃ ┣ 📜ProductCard.tsx
 ┃ ┃ ┃ ┣ 📜ProductCardList.tsx
 ┃ ┃ ┃ ┣ 📜productSearch.tsx
 ┃ ┃ ┃ ┣ 📜Toast.tsx
 ┃ ┃ ┃ ┗ 📜ToastStyle.tsx
 ┃ ┃ ┣ 📂scan
 ┃ ┃ ┃ ┣ 📜BuyCard.tsx
 ┃ ┃ ┃ ┣ 📜BuyList.tsx
 ┃ ┃ ┃ ┣ 📜ChecklistBox.tsx
 ┃ ┃ ┃ ┣ 📜MediaQuery.ts
 ┃ ┃ ┃ ┣ 📜ScanButton.tsx
 ┃ ┃ ┃ ┗ 📜Scanner.tsx
 ┃ ┃ ┗ 📂search
 ┃ ┃ ┃ ┗ 📜SearchCardList.tsx
 ┃ ┣ 📂images
 ┃ ┣ 📂pages
 ┃ ┃ ┣ 📜BuyPage.tsx
 ┃ ┃ ┣ 📜MainPage.tsx
 ┃ ┃ ┣ 📜PaymentFailPage.tsx
 ┃ ┃ ┣ 📜PaymentPage.tsx
 ┃ ┃ ┣ 📜ProductPage.tsx
 ┃ ┃ ┣ 📜ScanPage.tsx
 ┃ ┃ ┗ 📜SearchPage.tsx
 ┃ ┣ 📜App.css
 ┃ ┣ 📜App.test.tsx
 ┃ ┣ 📜App.tsx
 ┃ ┣ 📜index.css
 ┃ ┣ 📜index.tsx
 ┃ ┣ 📜logo.svg
 ┃ ┣ 📜react-app-env.d.ts
 ┃ ┣ 📜reportWebVitals.ts
 ┃ ┣ 📜setupTests.ts
 ┃ ┗ 📜store.ts
 ┣ 📜.eslintrc.json
 ┣ 📜.gitignore
 ┣ 📜.prettierrc
 ┣ 📜Dockerfile
 ┣ 📜package-lock.json
 ┣ 📜package.json
 ┣ 📜README.md
 ┣ 📜tsconfig.json
 ┗ 📜.gitignore
┣ 📜 README.md
┣ 📜 .gitignore
┣ 📜 datasource.yml
┣ 📜 docker-compose.prod.yml
┣ 📜 docker-compose.yml
┣ 📜 prometheus.yml
┣ 📂 nginx
┣ 📂 logging-example
┗ 📂 prometheus

👨‍👩‍👧‍👧 팀원

최지미	백한결	박준수	윤일권	엄선아	권광재
Leader, Front-end Developer	Back-end Developer, AI	Back-end Developer, DevOps	Back-end Developer, DevOps	Front-end Developer	Front-end Developer