Coursera Clone

Coursera 클론

Mern Stack을 사용하여 작성된 완전 반응 형 단일 페이지 응용 프로그램! ?

사용 된 기술

• 반응
• 마디
• 몽고 DB
• 표현하다
• redux
• 레 디스
• 농담

사용 된 데이터베이스

• 몽고
• 레 디스

---

시작하기

Repo를 지역 환경에 복제하려면 백엔드 및 프론트 엔드에 대한 모든 종속성을 별도로 설치해야합니다.

백엔드를 위해 백엔드 폴더 (CD 백엔드)로 이동하여 npm i 실행하십시오.

• MongoDB를 설치하십시오

• 또는 웹 사이트를 사용할 수 있습니다

• 환경 변수를 추가하십시오

• 백엔드 폴더의 루트 디렉토리에 .env 파일을 작성하고 구성 파일 변수와 관련하여 토큰을 추가하십시오.

  • access_token_secret = "일부 비밀"
  • access_token_life = 시간
  • refresh_token_secret = "some secret"
  • refresh_token_life = 시간
  • sendgrid_key = ""
  • mongo_database = ""
  • oauth2Client = ""
  • stripe_secret_token = ""
  • redis_host = ""
  • redis_password = ""
  • redis_port = ""

참고 : .env 파일 변수가 아래 이미지와 같은 구성 파일의 변수와 일치하는지 확인하십시오.

Frontend의 경우 Frontend 폴더 (CD 프론트 엔드)로 이동하여 npm i 실행하십시오.

개발 환경을 실행하려면 npm start 명령을 사용할 수 있습니다. 이로 인해 Frontend 용 Port 3000의 개발 웹 서버가 시작되고 Port 8080의 Nodemon 시합 API 서버가 시작됩니다.

참고 : 백엔드 및 프론트 엔드를 위해 NPM을 시작해야합니다.

단위 테스트

명령 (NPM 테스트)을 사용하여 백엔드, Express Endpoints를 테스트 할 수 있습니다.

Docker Compose

Coursera Clone은 Dockered and Docker Hub Repository에서 https://hub.docker.com/repository/docker/ayushverma/coursera/general을 찾을 수 있습니다.

Docker 및 Docker Compose를 사용하는 경우 전체 프로젝트를 시작할 수 있습니다.

 docker-compose up

---

? 특징

학생

• 가입, 로그인, OTP 검증, OTP 재현, 비밀번호 잊어 버린 인증 시스템 (부트 스트랩 알림으로 완전히 검증)
• React-Google-Login 및 Google Auth-Library를 사용하는 Google 인증 (OAUTH2)
• Stripe Payment Gateway는 백엔드와 통합되어 코스를 구매합니다
• Redux Store는 상태를 쉽게 관리합니다
• 코스가 범주 적으로 가져 오는 홈페이지
• 사용자의 선호도를 기반으로 권장되는 과정
• 코스 등급
• 사용자가 북마크를 제거하거나 추가 할 수있는 북마크 코스
• 리소스 다운로드 (PDF- 노트)
• 반응 형 반응 비디오 플레이어
• 진행률 바
• 코스의 모든 내용을 사용하여 코스 페이지
• 코스와 교사를 기반으로 검색
• 실시간 라이브 그룹 클래스

선생님

• 가입, 로그인, OTP 검증, OTP 재현, 비밀번호 잊어 버린 적절한 인증 시스템 (부트 스트랩 알림으로 완전히 검증)
• 설명, 제목, 이미지 및 기타 세부 사항으로 완전히 검증 된 교사 업로드 양식
• CKEDITOR TEXTBOX에서 다양한 제목, 단락, 대담한, 이탤릭체, 링크, 테이블, 크기 등을 추가 할 수있는 능력이있는 텍스트 상자에 쓰기
• 교사는 업로드 바와 함께 최대 5 개의 비디오를 업로드하여 진행 상황을 보여줄 수 있습니다.
• 교사는 업로드 된 과정을 볼 수 있습니다
• 교사는 코스를 삭제할 수 있습니다
• 교사는 코스를 편집 할 수 있습니다

Express 엔드 포인트에 대한 농담 및 Supertest를 사용하여 테스트합니다.

Socket.io를 사용한 실시간 라이브 그룹 클래스 및 캐싱 메시지를위한 Redis로 최적화

스크린 샷

인증 페이지

가입 페이지

로그인 페이지

OTP 및 OTP 페이지를 재사용합니다

비밀번호 페이지를 잊어 버립니다

---

주요 화면

홈페이지

코스 페이지

북마크 페이지

결제 점검 페이지

라이브 클래스 페이지

기본 설정 페이지

교사의 과정

교사 업로드 세부 사항

교사 업로드 비디오

---

반응 형 디자인

모바일 디자인 인증

모바일 디자인 코스 페지