지구에 사는 멍멍이들, 지구멍! 🐶🐾!
강아지 견종 분류 및 정보 제공 서비스입니다.

📒 Medium

Introduction

📹 Demo

견종 이미지 검색

견종 조회

견종 키워드 검색

💡Tech Stack

➡️ Why do we choose these tech stacks for this project?

- Frontend : React, Chart.js
- Backend : Flask
- Web Server: Nginx
- Middleware : Gunicorn
- AI model : Pytorch
- DevOps : Docker
- Database: MySQL
- Crawling : Selenium
- API Test : Postman
- API Documentation : Swagger
- Deployment : AWS
- VCS: Git

💻 System Architecture

📗 API

🚀 How to Start

1. Clone Repository

https://github.com/2022-Summer-Bootcamp-teamG/puppy-classification.git

2. Install Pacakages

$ cd pupppy-classification-frontend
$ yarn run build

3. Set .env file

### settings/.env
# === Database ===
RDS_HOST =
RDS_DATABASE =
RDS_USER =
RDS_PASSWORD =

# === S3Bucket ===
S3_ID =
S3_SECRET_KEY =
S3_BUCKET_REGION =
S3_BUCKET_NAME =

4. Run Docker

$ docker-compose up --build         # build images and run containers
$ docker-compose down               # stop running containers
$ docker-compose down -v            # stop running containers and delete its volume

📂 Directory Structure

├── README.md
├── docker-compose.prod.yml
├── docker-compose.yml
├── nginx
│   ├── Dockerfile
│   └── nginx.conf
├── puppy-classification-backend
│   ├── Dockerfile
│   ├── README.md
│   ├── app.py
│   ├── config
│   │   ├── __init__.py
│   │   ├── connection.py
│   │   ├── rdsConfig.py
│   │   └── s3Config.py
│   ├── imagenet_class_index.json
│   ├── predict.py
│   ├── requirements.txt
│   ├── tasks.py
│   ├── views.py
│   ├── weights.pt
│   └── wsgi.py
├── puppy-classification-frontend
│   ├── Dockerfile
│   ├── Dockerfile.prod
│   ├── README.md
│   ├── build
│   ├── package-lock.json
│   ├── package.json
│   ├── public
│   ├── src
│   │   ├── App.css
│   │   ├── App.tsx
│   │   ├── assets
│   │   │   ├── fonts
│   │   │   └── images
│   │   ├── components
│   │   │   ├── common
│   │   │   │   ├── Button.ts
│   │   │   │   ├── Common.ts
│   │   │   │   ├── CustomAxios.ts
│   │   │   │   ├── Header.tsx
│   │   │   │   ├── Loading.tsx
│   │   │   │   ├── Logo.ts
│   │   │   │   ├── MediaQuery.ts
│   │   │   │   ├── NotFound.tsx
│   │   │   │   ├── SearchBar.tsx
│   │   │   │   ├── SearchBarStyle.ts
│   │   │   │   └── Title.ts
│   │   │   ├── detail
│   │   │   │   ├── ChartBox.tsx
│   │   │   │   ├── DetailImage.ts
│   │   │   │   ├── FeatureBox.tsx
│   │   │   │   └── ItemBox.ts
│   │   │   ├── list
│   │   │   │   ├── CardItem.tsx
│   │   │   │   ├── CardList.tsx
│   │   │   │   ├── Categories.tsx
│   │   │   │   ├── ItemImage.ts
│   │   │   │   ├── Pagination.tsx
│   │   │   │   └── pagination.module.scss
│   │   │   ├── main
│   │   │   │   ├── Dropzone.ts
│   │   │   │   ├── ImageUploader.tsx
│   │   │   │   ├── LabelButton.ts
│   │   │   │   ├── MainImage.ts
│   │   │   │   └── PuppyButton.tsx
│   │   │   ├── result
│   │   │   │   ├── Carousel.tsx
│   │   │   │   ├── CarouselBox.tsx
│   │   │   │   └── ResultImage.ts
│   │   │   └── search
│   │   │       └── SearchCardList.tsx
│   │   ├── custom.d.ts
│   │   ├── global.d.ts
│   │   ├── index.css
│   │   ├── index.tsx
│   │   ├── logo.svg
│   │   ├── pages
│   │   │   ├── DetailPage.tsx
│   │   │   ├── ListPage.tsx
│   │   │   ├── MainPage.tsx
│   │   │   ├── ResultPage.tsx
│   │   │   └── SearchPage.tsx
│   │   ├── setupTests.ts
│   ├── tsconfig.json
│   ├── yarn-error.log
│   └── yarn.lock
├── settings
    └── .env

👨‍👩‍👧‍👧 팀원

최지미	김혜린	박희경	장현우	하도균
Leader, Front-end Developer	Front-end Developer, DevOps	Back-end Developer	AI, Backend-Developer	Front-end Developer