🏆 2024 Techeer Winter BootCamp 1등 🏆

2024 Techeer Winter BootCamp Team I

DevSketch

URL : https://devsketch.xyz

🔮 Table of Contents

• Medium
• Demo
• System Architechture
• Tech stack
• ERD
• API
• Monitoring
• Directory Structure
• How to Start
• Member

📝 Medium

DevSkatch Medium

✨ Demo

Onboarding

DevSketch의 간략한 설명을 담고 있습니다.

Main

설계와 세팅 페이지로 이동할 수 있으며 각각 개별적으로 가능합니다.

Create system design

입력한 프로젝트 설명을 기반으로 ai가 기능 명세를 만들어줍니다.
생성된 기능 명세를 기반으로 ERD, Diagram, Api (swagger-ui)를 시각화하여 만들어줍니다.

Set up the initial environment

설계를 바탕으로 초기 세팅을 할 수도 있으며, 메인 페이지에서 초기 세팅만 할 수도 있습니다.
초기 세팅은 깃허브에 업로드 가능하며, 사용자는 생성된 api를 가상환경을 통해 30분간 실제로 사용해 볼 수 있습니다.

🏢 System Architechture

💻 Tech stack

Field	Technology of Use
Frontend
Backend
Database
AI
DevOps
Monitoring
ETC

🗺️ ERD

📄 API

🧑🏻‍💻 Monitoring

Prometheus & Grafana

Django
cAdvisor

📂 Directory Structure

DevSketch-Backend

🗂️Backend
┣🗂️.github
┃┗ 🗂️ISSUE_TEMPLATE
┣🗂️config
┃ ┣ 📃__init__.py
┃ ┣ 📃asgi.py
┃ ┣ 📃celery.py
┃ ┣ 📃settings.py
┃ ┣ 📃urls.py
┃ ┗ 📃wsgi.py
┣🗂️dind
┃ ┣ 📂migrations
┃ ┣ 📃__init__.py
┃ ┣ 📃admin.py
┃ ┣ 📃apps.py
┃ ┣ 📃models.py
┃ ┣ 📃serializers.py
┃ ┣ 📃tasks.py
┃ ┣ 📃tests.py
┃ ┣ 📃urls.py
┃ ┗ 📃views.py
┣🗂️document
┃ ┣ 📂migrations
┃ ┣ 📃__init__.py
┃ ┣ 📃admin.py
┃ ┣ 📃apps.py
┃ ┣ 📃models.py
┃ ┣ 📃serializers.py
┃ ┣ 📃tasks.py
┃ ┣ 📃tests.py
┃ ┣ 📃urls.py
┃ ┗ 📃views.py
┣🗂️grafana/data
┃ ┣ 🗂️csv
┃ ┣ 🗂️pdf
┃ ┣🗂️plugins
┃ ┣ 🗂️png
┃ ┗ 📃grafana.db
┣🗂️prometheus
┃ ┗ 📃prometheus.yml
┣🗂️document
┃ ┣ 📂migrations
┃ ┣ 📃__init__.py
┃ ┣ 📃admin.py
┃ ┣ 📃apps.py
┃ ┣ 📃authentication.py
┃ ┣ 📃models.py
┃ ┣ 📃serializers.py
┃ ┣ 📃tests.py
┃ ┣ 📃urls.py
┃ ┗ 📃views.py
┣🗂️repo
┃ ┣ 📂migrations
┃ ┣ 📃__init__.py
┃ ┣ 📃admin.py
┃ ┣ 📃apps.py
┃ ┣ 📃models.py
┃ ┣ 📃serializers.py
┃ ┣ 📃tasks.py
┃ ┣ 📃tests.py
┃ ┣ 📃urls.py
┃ ┗ 📃views.py
┣🗂️Tech_Stack
┃ ┣ 📂backend
┃ ┣ 📂frontend
┃ ┣ 📃__init__.py
┃ ┣ 📃apps.py
┃ ┣ 📃models.py
┃ ┣ 📃tasks.py
┃ ┣ 📃urls.py
┃ ┣ 📃utils.py
┃ ┗ 📃views.py
┣ 📃.gitignore
┣ 📃docker-compose.yml
┣ 📃Dockerfile
┣ 📃Jenkinsfile
┣ 📃manage.py
┣ 📃README.md
┣ 📃requirements.txt

DevSketch-Frontend

🗂️Frontend
┣🗂️.github
┃┗ 🗂️ISSUE_TEMPLATE
┣🗂️.storybook
┃ ┣ 📃main.js
┃ ┗ 📃preview.jsx
┣🗂️.vite/deps
┃ ┣ 📃_metadata.json
┃ ┣ 📃chunk-GT27OAPC.js
┃ ┣ 📃chunk-GT27OAPC.js.map
┃ ┣ 📃chunk-SY4HHCYH.js
┃ ┣ 📃chunk-SY4HHCYH.js.map
┃ ┣ 📃package.json
┃ ┣ 📃react-dom_client.js
┃ ┣ 📃react-dom_client.js.map
┃ ┣ 📃react-router-dom.js
┃ ┣ 📃react-router-dom.js.map
┃ ┣ 📃react.js
┃ ┗ 📃react.js.map
┣🗂️.vscode
┃ ┣ 📃launch.json
┃ ┗ 📃tasks.json
┣🗂️dist
┃ ┣ 📂assets
┃ ┗ 📃index.html
┣🗂️src
┃ ┣ 📂api
┃ ┣ 📂assets
┃ ┣ 📂components
┃ ┣ 📂config
┃ ┣ 📂pages
┃ ┣ 📂store
┃ ┣ 📂utils
┃ ┣ 📃.DS_Store
┃ ┣ 📃App.css
┃ ┣ 📃App.jsx
┃ ┣ 📃index.css
┃ ┗ 📃main.jsx
┣ 📃.DS_Store
┣ 📃.gitignore
┣ 📃.dockerignore
┣ 📃.eslintignore
┣ 📃.eslintrc.json
┣ 📃.gitattributes
┣ 📃.gitignore
┣ 📃.prettierignore
┣ 📃.prettierrc
┣ 📃.yarnrc.yml
┣ 📃Dockerfile
┣ 📃README.md
┣ 📃build-storybook.log
┣ 📃chromatic.config.json
┣ 📃docker-compose.debug.yml
┣ 📃docker-compose.yml
┣ 📃eslint.config.js
┣ 📃index.html
┣ 📃migration-storybook.log
┣ 📃package.json
┣ 📃postcss.config.js
┣ 📃tailwind.config.js
┣ 📃vite.config.js
┗ 📃yarn.lock

🧐 How to Start

Backend

git clone --recursive https://github.com/2024-Techeer-Winter-BootCamp-Team-I/Backend.git

env setting in the Backend folder

• backend/.env

MYSQL_ROOT_PASSWORD=
MYSQL_DATABASE=
MYSQL_USER=
MYSQL_PASSWORD=

DATABASE_HOST=
DATABASE_HOST2=
DATABASE_NAME=
DATABASE_USER=
DATABASE_PASSWORD=

OPENAI_API_KEY=

DEEPSEEK_API_KEY=
DEEPSEEK_API_URL=

FRONTEND_RESULT_URL=

GITHUB_CLIENT_ID=
GITHUB_CLIENT_SECRET=

GITHUB_REDIRECT_URI=

CELERY_BROKER_URL=
CELERY_RESULT_BACKEND=

ENVIRONMENT=develop
DEBUG=True

Run Docker

docker-compose up -d --build

Frontend

git clone --recursive https://github.com/2024-Techeer-Winter-BootCamp-Team-I/Frontend.git

Install

yarn install

Run

yarn run dev

👪 Member

Pictures
Name	박유경	김예은	정원희	진기태	김환희	임승제
Position	Team Leader Frontend	Frontend	Frontend	Backend DevOps	Backend	Backend
GitHub