학습 관리 시스템 (LMS)
(Next.js 및 Express.js)
소개
LMS 앱-대화식 및 포괄적 인 온라인 학습 경험을 제공하도록 설계된 최첨단 학습 관리 시스템 인 LMS 앱에 오신 것을 환영합니다. Next.js 및 Express.js로 제작 된이 플랫폼에는 코스 관리, 학생 참여 및 안전하고 원활한 사용자 경험을위한 고급 기능이 장착되어 있습니다.
일부 UI 미리보기
가입/로그인 페이지
보안 사용자를위한 서기 인증
코스 페이지
코스 목록을 볼 교사/관리자
코스/: 코스 페이지
교사/관리자가 생성, 편집, 삭제 및 전체 세부 사항 과정을 볼 수 있습니다.
챕터 페이지
코스의 교사/관리자 (작성, 편집, 삭제 및 전체 세부 사항 참조).
분석 페이지
교사/관리자가 얼마나 많은 과정을 판매하고 얼마나 많은 수익을 얻는 지 분석 할 수있는 교사/관리자
챕터 페이지
고객은 코스에 등록하고 무료 장을 참조하십시오
결제 프로세스를위한 스트라이프
고객은 결제 proccess를 확인합니다
챕터 페이지
고객은 코스 첨부 파일, 코스 구매 후 진행 상황을 볼 수 있습니다.
대시 보드 페이지
고객은 진행 과정, 완료된 과정을 볼 수 있습니다
사이드 바 메뉴/알림
반응 형 및 사용자 친화적 인 인터페이스
주요 기능
동적 코스 생성 및 관리 : 이미지 및 첨부 파일을 포함한 코스 컨텐츠를 쉽게 만들고 관리합니다. 강력한 인증 : 서기를 사용하여 보안 사용자 인증. 대화식 비디오 재생 및 업로드 : 부드러운 비디오 경험을 위해 MUX와 통합. 보안 지불 : 코스 지불 및 가입을 처리하기위한 스트라이프 통합. 사용자 친화적 인 인터페이스 : Tailwind CSS가있는 현대적이고 반응 형 디자인. 문서 및 이미지 업로드 : 번거롭지 않은 파일 관리를 위해 업로드를 활용합니다.
사용 된 기술
프론트 엔드
사용 된 기술 :
- 반응 18.2.0
- 다음. JS 13.4.12
- 꼬리 바람 CSS 3.3.5
- 반응 후크 양식 7.48.2
- 반응-quill 2.0.0
- Recharts 2.10.3
- Lucide-react 0.294.0
주요 라이브러리 :
- @clerk/nextjs 4.27.2 : 보안 사용자 인증.
- @mux/mux-node 및 @mux/mux-player-react 7.3.3 & 2.3.0 : 비디오 재생 및 업로드.
- @uploadthing/React 6.0.2 : 처리 문서 및 이미지 업로드를 처리합니다.
- REACT-HOT-TOAST 2.4.1 : 우아한 알림 용.
- Zustand 4.4.7 : 주 관리.
UI/UX 향상 :
- 테일 윈드 CSS 클래스를 최적화하기 위해 2.0.0을 합병합니다 .
- CMDK 0.2.0 : 명령 메뉴 인터페이스.
- 반응-드롭 존 14.2.3 : 파일 업로드를 드래그 앤 드롭.
- @tanstack/react-table 8.10.7 : 테이블을 구축하고 관리합니다.
- @radix-ui/react-dialog , @radix-ui/react-dropdown-menu 등, 고급 UI 구성 요소.
특징:
- 대화식 및 사용자 친화적 인 인터페이스.
- 비디오 스트리밍 및 파일 업로드 서비스와 완벽한 통합.
- 포괄적 인 과정 창출 및 관리 도구.
- 다양한 장치에서 호환성을 보장하는 반응 형 디자인.
개발 도구 :
- ESLINT 8.54.0 : 코드 라인의 경우.
- Postcss 8.4.31 및 AutoPrefixer 10.4.16 : CSS 처리 용.
- TypeScript 5.3.2 : 유형 확인 용.
백엔드
주요 기술 :
- Express.js 4.18.2 : 서버의 중추, 라우팅 및 미들웨어 처리.
- Mongoose 8.0.2 : MongoDB의 ODM, 데이터베이스 상호 작용을 단순화합니다.
- Node.js : 서버 측에서 JavaScript를 실행하기위한 런타임 환경.
데이터 베이스:
- MongoDB : 응용 프로그램 데이터 저장에 사용되는 NOSQL 데이터베이스.
주요 라이브러리 및 미들웨어 :
- DOTENV 16.3.1 : 환경 변수 관리.
- Nodemon 3.0.2 (개발) : 개발 중에 서버를 자동으로 다시 시작합니다.
특징:
- 데이터 검색 및 조작에 대한 강력한 REST API 엔드 포인트.
- 효율적인 쿼리 처리로 데이터베이스에 대한 보안 연결.
- 기능 및 사용자 기반을 확장하기에 적합한 확장 가능한 아키텍처.
보안 및 인증 :
- API 엔드 포인트에 대한 통합 보안 조치.
- 사용자 데이터를 보호하기위한 인증 및 인증 로직.
개발 도구 :
- 기능 및 효율성을 향상시키기위한 다양한 NPM 패키지.
- API 엔드 포인트 테스트 및 검증을위한 우체부.
통합 :
- 결제 처리를위한 스트라이프 : 거래 처리를위한 Stripe의 Webhooks와 통합.
- 응용 프로그램에서 요구하는 기타 타사 서비스.
