web13_Boarlog

KO | EN

Minimalist Open Source Repository Search Engine

gitlite — search

#typescript #ai-agents #deepseek-harness #dsh-plugin #open-source #ai #cli #claude-code #windows #codex #developer-tools #dsh

★ 35 Open GitHub ↗

🙂 기록으로 남기는 실시간 화이트보드 강의, Boarlog

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

![boarlog1](https://github.com/boostcampwm2023/web13_Boarlog/assets/86391351/89de8827-e5ac-4494-a196-982af8ea2c5f)

<br/>

<br/>

## Boarlog의 주요 기능

### 🧑‍🏫 강의 생성 및 진행

> 강의자가 강의를 생성하고, **음성**으로 강의하며 **화이트보드**를 실시간으로 편집할 수 있습니다. 또한, 참여자의 질문을 받아 화이트보드에 포스트잇 형태로 추가할 수 있습니다.

<table align=center>
<tr>
  <td>
	  <video src="https://github.com/boostcampwm2023/web13_Boarlog/assets/86391351/4c24d511-7914-4d2e-aafc-303568c015f4" />
  </td>
  <td>
	  <video src="https://github.com/boostcampwm2023/web13_Boarlog/assets/86391351/1e9d5624-71ad-46d3-801f-c0a74317807d" />
  </td>
</tr>
<tr>
  <td>
    <p align=center>강의 생성 및 마이크 설정</p>
  </td>
  <td>
    <p align=center> 화이트보드 편집 및 질문 확인</p>
  </td>
</tr>
</table>

<br/>

### 🧑‍🎓 강의 참여 및 피드백

> 강의자가 공유한 **강의번호**를 입력하여 강의에 참여하고, 강의자의 음성과 화이트보드 내용을 실시간으로 볼 수 있습니다. 강의자에게 질문을 보낼 수도 있습니다.

<br/>

### 🎥 강의 다시보기

> 강의 종료 후에는 서버에서 화이트보드와 음성, AI를 이용한 음성 스크립트를 저장하여 언제든지 다시볼 수 있습니다.

<br/>

## 클라이언트 요청 흐름도
![서버 아키텍처](https://github.com/boostcampwm2023/web13_Boarlog/assets/70827921/43e476a7-6493-4ce9-b244-aba01cbf8612)

<br/>

## Boarlog의 기술 스택

<table align=center>
    <thead>
        <tr>
            <th>category</th>
            <th>stack</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <p align=center>Common</p>
            </td>
            <td>
		<img src="https://img.shields.io/badge/npm-CB3837?logo=npm&logoColor=ffffff">
                <img src="https://img.shields.io/badge/WebRTC-333333?logo=webrtc">
                <img src="https://img.shields.io/badge/Socket.io-010101?logo=Socket.io">
                <img src="https://img.shields.io/badge/Prettier-F7B93E?logo=prettier&logoColor=ffffff">
                <img src="https://img.shields.io/badge/ESLint-4B32C3?logo=Eslint">
		<img src="https://img.shields.io/badge/TypeScript-3178C6?logo=typescript&logoColor=ffffff">
                <img src="https://img.shields.io/badge/.ENV-ECD53F?logo=.ENV&logoColor=ffffff">
            </td>
        </tr>
        <tr>
            <td>
                  <p align=center>Frontend</p>
            </td>
            <td>
                <img src="https://img.shields.io/badge/React-61DAFB?logo=React&logoColor=ffffff">
                <img src="https://img.shields.io/badge/Vite-646CFF?logo=Vite&logoColor=ffffff">
                <img src="https://img.shields.io/badge/TailwindCSS-06B6D4?logo=tailwindcss&logoColor=ffffff">
                <img src="https://img.shields.io/badge/Recoil-3578E5?logo=recoil&logoColor=ffffff">
                <img src="https://img.shields.io/badge/Axios-5A29E4?logo=axios&logoColor=ffffff">
		<img src="https://github.com/boostcampwm2023/web13_Boarlog/assets/86391351/646e36a9-366d-4b91-9b42-a4e2eef584cd">
		<img src="https://github.com/boostcampwm2023/web13_Boarlog/assets/86391351/54880738-cc88-4f63-8cfa-d955dc5721e3">
            </td>
        </tr>
        <tr>
            <td>
                <p align=center>Backend</p>
            </td>
            <td>
                <img src="https://img.shields.io/badge/NestJS-E0234E?logo=nestjs">
                <img src="https://img.shields.io/badge/MongoDB-114411?logo=mongodb">
                <img src="https://img.shields.io/badge/Mongoose-114411?logo=mongodb">
                <img src="https://img.shields.io/badge/Redis-DC382D?logo=redis&logoColor=ffffff">
            </td>
        </tr>
        <tr>
            <td>
                <p align=center>CI/CD</p>
            </td>
            <td>
                 <img src="https://img.shields.io/badge/GitHub Actions-000000?logo=github-actions">
            </td>
        </tr>
                <tr>
            <td>
                <p align=center>Deployment</p>
            </td>
            <td>
                <img src="https://img.shields.io/badge/Netlify-00C7B7?logo=netlify&logoColor=ffffff&">
                <img src="https://img.shields.io/badge/Docker-2496ED?logo=docker&logoColor=ffffff&">
                <img src="https://img.shields.io/badge/nginx-014532?logo=Nginx&logoColor=009639&">
                <img src="https://img.shields.io/badge/Naver Cloud Platform-03C75A?logo=naver&logoColor=ffffff">  
            </td>
        </tr>
        <tr>
            <td>
                <p align=center>Collaboration</p>
            </td>
            <td>
                <img src="https://img.shields.io/badge/Notion-000000?logo=Notion">
                <img src="https://img.shields.io/badge/Figma-F24E1E?logo=Figma&logoColor=ffffff">
                <img src="https://img.shields.io/badge/Slack-4A154B?logo=Slack&logoColor=ffffff">
            </td>
        </tr>
    </tbody>
</table>

<br/>

## 핵심 개발 일지
> **🔗 프로젝트 진행 과정에서 고민하고 도전한 과정이 담긴 핵심 개발 일지입니다.**

- ```변진상``` : [프로그래스 바 구현과 성능 개선을 위한 트러블 슈팅](https://velog.io/@quswlstkd88/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EC%8A%A4-%EB%B0%94-%EA%B5%AC%ED%98%84%EA%B3%BC-%EC%84%B1%EB%8A%A5-%EA%B0%9C%EC%84%A0%EC%9D%84-%EC%9C%84%ED%95%9C-%ED%8A%B8%EB%9F%AC%EB%B8%94-%EC%8A%88%ED%8C%85)
- ```이동령``` : [반응형 UX를 위한 Modernizr 적용기](https://velog.io/@pexe99/Boarlog-%EC%9A%B0%EB%A6%AC-%EC%84%9C%EB%B9%84%EC%8A%A4%EB%8A%94-%EB%AA%A8%EB%B0%94%EC%9D%BC-%EC%82%AC%EC%A0%88%EC%9E%85%EB%8B%88%EB%8B%A4)
- ```정주완``` : [실시간 화이트보드 공유 구현 과정](https://boarlog.notion.site/ad59de67865345ff8a91eed36d074820)
- ```이승연``` : [DB 해킹 당한 뒤 VPC와 Subnet 활용한 재구축](https://boarlog.notion.site/DB-e4a9628f03c44b4e8c42670afe899117)
- ```이현종``` : [미디어 서버 메모리 누수 원인 찾고 해결하기](https://www.notion.so/boarlog/939c0576a3394a049b2c1bdd29bbd51f)
<br/>

## 팀 소개: TEAM_528

```jsx
const camperIdArray = ["J063", "J095", "J105", "J124", "J141"];

const teamName = camperIdArray.reduce((team, camperId) => {
  return (team += parseInt(camperId.replace(/[^0-9]/g, "")));
}, 0);
```

> 5명이 모여 **하나의** 개발자처럼 : J0**63** + J0**95** + J**105** + J**124** + J**141**

`528`은 팀원 5명의 캠퍼 번호를 더한 숫자입니다. 5명의 캠퍼가 하나의 번호를 가지고 서로 다른 기술, 경험, 및 아이디어를 결합하여 시너지를 발휘하겠다는 의미입니다.

<br/>

<table align=center>
    <thead>
        <tr>
            <th>변진상 (FE)</th>
            <th>이동령 (FE)</th>
            <th>이승연 (BE)</th>
            <th>이현종 (BE)</th>
            <th>정주완 (FE)</th>
        </tr>
    </thead>
    <tbody align=center>
        <tr>
            <td width="150">
              <a href="https://github.com/Byeonjin"><img width="120" height="120" src="https://avatars.githubusercontent.com/u/54176384?v=4" /></a>
            </td>
            <td width="150">
              <a href="https://github.com/LellowMellow"><img width="120" height="120" src="https://avatars.githubusercontent.com/u/79556112?v=4" /></a>
            </td>
            <td width="150">
              <a href="https://github.com/tmddus2"><img width="120" height="120" src="https://avatars.githubusercontent.com/u/49530253?v=4" /></a>
            </td>
            <td width="150">
              <a href="https://github.com/platinouss"><img width="120" height="120" src="https://avatars.githubusercontent.com/u/70827921?v=4" /></a>
            </td>
            <td width="150">
              <a href="https://github.com/Jw705"><img width="120" height="120" src="https://avatars.githubusercontent.com/u/86391351?v=4" /></a>
            </td>
        </tr>
        <tr>
            <td><a href="https://github.com/Byeonjin">@Byeonjin</a></td>
            <td><a href="https://github.com/pexe99">@pexe99</a></td>
            <td><a href="https://github.com/tmddus2">@tmddus2</a></td>
            <td><a href="https://github.com/platinouss">@platinouss</a></td>
            <td><a href="https://github.com/Jw705">@Jw705</a></td>
        </tr>
        <tr align=left>
            <td width="150">깊이있게 고민하고 기록하기</td>
            <td width="150">괜한 걱정 하지 않고 차근차근 쌓아올리기</td>
            <td width="150">두려워하지 않고 문제 해결하기</td>
            <td width="150">모든 선택에 나만의 근거 만들기</td>
            <td width="150">작성한 코드에 대한 의도를 잘 기록하기</td>
        </tr>
    </tbody>
</table>

<br/>

## 바로가기

- [그라운드 룰](https://boarlog.notion.site/Ground-Rules-43ebfd44b76c482a983c4a47481028ca)
- [branch/conmmit 컨벤션](https://boarlog.notion.site/Git-Branch-Commit-882a35cba1cc433eb0f01abf2e3b134d)
- [기획/디자인](https://www.figma.com/file/vd1TPvzMNwy6OfVmNFw8cI/Untitled?type=design&node-id=4%3A22&mode=design&t=NS1IQkeFYsr7lSuf-1)
- [위키](https://github.com/boostcampwm2023/web13_TEAM_528/wiki)
- [노션](https://boarlog.notion.site/?pvs=74)
- [백로그](https://boarlog.notion.site/d1fb2080ff934e859d50c5cd3620e223?pvs=74)
- [데모 링크](https://boarlog.netlify.app)

web13_Boarlog

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README