English Learning Site

Biengual - 영어 학습 플랫폼 웹사이트 '2개국어능통자'라는 Bilingual이라는 단어에서 착안하여, 홀로 영어공부학습을 시도하는 사람들에게 '2가지' 학습방법(리스닝,리딩)을 통해 '영어능통자'가 되기 위한 여정을 함께하는 영어학습플랫폼

🎯 기획의도

목표: 사용자의 관심사에 맞춘 실생활 콘텐츠를 통해 리딩과 리스닝 능력 향상 CNN기사와 유튜브 영상 콘텐츠의 관심있는 주제 콘텐츠 학습

❓문제상황

1. 인터넷에 있는 영어 컨텐츠들을 학습하기 위해서는 바로바로 기록할 수 있는 것이 아니라, 메모 플랫폼에 따로 기록해야 하는 번거로움 존재.
2. 홀로 영어공부를 하는 사람을 위한 실력 검증 과정 부족
3. 영상을 공부하면서 학습 진행상황을 학습자가 스스로 기록해야하는 번거로움

💡 해결방법

1. Ebook처럼 기사, 영상 스크립트에 문장 단위로 하이라이팅(북마크), 필기(메모) 가능
2. 퀴즈를 통한 개별 컨텐츠 복습 기능
3. 시각화된 대시보드로 학습 진행 상황 확인 가능

⭐ 주요기능

** 학습 페이지 (리스닝 | 리딩) (동영상) **

리스닝	리딩

** 스크랩 페이지 | 검색 페이지**

스크랩	검색

** 로그인 페이지 | 마이 페이지 **

로그인 페이지	마이 페이지

프로젝트 소개

• 구현 기능
  • 소셜 로그인
    • Kakao
    • Naver
    • Google
  • 크롤링
    • Youtube API - Youtube 정보
    • Selenium - Youtube 자막 동적 크롤링
    • JSoup - CNN 기사 크롤링
  • 카테고리
    • 크롤링 해 온 카테고리가 없으면 엔티티 추가하는 방식으로 생성
  • 번역
    • Microsoft Azure AI API
  • 북마크, 스크랩
    • 기본적인 CRUD
  • Swagger
  • 배포 : Docker, Github Action
  • 로그 : Kibana
  • 컨텐츠 메인 화면: 인기있는 콘텐츠를 리스닝과 리딩 각각 8개씩 볼 수 있습니다.
  • 컨텐츠 프리뷰 화면: 카테고리를 선택할 수 있고, 해당 조건의 컨텐츠를 10개씩 볼 수 있습니다.
  • 컨텐츠 디테일 화면(리스닝): 선택한 컨텐츠에 대한 유튜브 영상을 재생할 수 있고, 해당 영상에 대한 En, Ko 스크립트를 볼 수 있습니다.
  • 컨텐츠 디테일 화면(리딩): 선택한 컨텐츠에 대한 CNN 기사를 볼 수 있고, 해당 기사에 대한 En, Ko 스크립트를 볼 수 있습니다.
  • 검색: 키워드에 해당하는 컨텐츠를 검색할 수 있습니다.
  • 스크랩 화면: 스크랩한 컨텐츠, 북마크, 메모한 내용을 볼 수 있습니다.
  • 마이페이지: 자신의 정보를 볼 수 있습니다.

ERD

• ERD
  • MySQL : 전반적인 데이터 저장
  • Mongo : 스크립트 및 문제 관련 내용 저장

기술 스택

• Java
• Spring Boot
• Spring Security
• JWT
• Cookie
• JPA
• QueryDsl
• MySQL
• MongoDB
• Swagger
• OAuth2
• Jsoup
• Selenium
• Rest API
• AOP
• ELK
• EC2
• GitHub Actions
• Docker
• Nginx