Coursera Clone

โคลน Coursera

แอปพลิเคชันหน้าเดียวที่ตอบสนองได้อย่างเต็มที่โดยใช้ Mern Stack! -

เทคโนโลยีที่ใช้

• ตอบโต้
• โหนด
• DB Mongo
• ด่วน
• redux
• Redis
• ล้อเล่น

ฐานข้อมูลที่ใช้

• Mongo
• Redis

---

เริ่มต้น

โคลน repo ไปยังสภาพแวดล้อมในพื้นที่ของคุณคุณต้องติดตั้งการพึ่งพาทั้งหมดสำหรับแบ็กเอนด์และส่วนหน้า

สำหรับแบ็กเอนด์ไปที่โฟลเดอร์แบ็กเอนด์ (แบ็กเอนด์ซีดี) และเรียกใช้ npm i

• ติดตั้ง MongoDB

• หรือคุณสามารถใช้เว็บไซต์

• เพิ่มตัวแปรสภาพแวดล้อมของคุณ

• สร้างไฟล์. env ในไดเรกทอรีรูทของโฟลเดอร์แบ็กเอนด์และเพิ่มโทเค็นของคุณที่เกี่ยวข้องกับตัวแปรไฟล์ config

  • access_token_secret = "ความลับบางอย่าง"
  • access_token_life = เวลา
  • refresh_token_secret = "ความลับบางอย่าง"
  • refresh_token_life = เวลา
  • sendgrid_key = ""
  • mongo_database = ""
  • OAuth2Client = ""
  • stripe_secret_token = ""
  • redis_host = ""
  • redis_password = ""
  • redis_port = ""

หมายเหตุ: ตรวจสอบให้แน่ใจว่าตัวแปรไฟล์. ENV ตรงกับไฟล์กำหนดค่าเช่นภาพด้านล่าง

สำหรับส่วนหน้าไปที่โฟลเดอร์ Frontend (CD Front-end) และเรียกใช้ npm i

ในการเรียกใช้สภาพแวดล้อมการพัฒนาคุณสามารถใช้คำสั่ง npm start สิ่งนี้จะเริ่มต้นเว็บเซิร์ฟเวอร์การพัฒนาบนพอร์ต 3000 สำหรับ Frontend และเซิร์ฟเวอร์ API ที่ดู Nodemon บนพอร์ต 8080

หมายเหตุ: คุณต้องเริ่มต้น NPM สำหรับแบ็กเอนด์และส่วนหน้าแยกต่างหาก

การทดสอบหน่วย

คุณสามารถทดสอบแบ็กเอนด์จุดสิ้นสุดโดยใช้คำสั่ง (การทดสอบ NPM)

นักเทียบท่า

Coursera Clone เป็นที่เก็บ Dockerised และ Docker Hub Hub สามารถพบได้ที่นี่ https://hub.docker.com/repository/docker/ayushverma/coursera/general

หากคุณใช้ Docker และ Docker Compose คุณสามารถเริ่มโครงการทั้งหมดด้วย:

 docker-compose up

---

- คุณสมบัติ

นักเรียน

• ระบบการรับรองความถูกต้อง ด้วยการลงชื่อเข้าใช้การเข้าสู่ระบบการตรวจสอบ OTP, ส่ง OTP, ลืมรหัสผ่าน (ตรวจสอบอย่างเต็มที่ด้วยการแจ้งเตือน bootstrap)
• Google Authentication (OAUTH2) โดยใช้ React-google-Login และ Google Auth-Library
• เกตเวย์ การชำระเงินแบบแถบ รวมเข้ากับแบ็กเอนด์เพื่อซื้อหลักสูตร
• Redux store เพื่อจัดการสถานะได้อย่างง่ายดาย
• หน้าแรกที่มีหลักสูตรที่ถูกนำมาเป็นหมวดหมู่
• หลักสูตรที่แนะนำ ตามการตั้งค่าของผู้ใช้
• คะแนน ของหลักสูตร
• หลักสูตร ที่บุ๊กมาร์ก ซึ่งผู้ใช้สามารถลบหรือเพิ่มบุ๊กมาร์ก
• ดาวน์โหลด Resourses (PDF - Notes)
• Responsive React Video Player สำหรับวิดีโอ
• แถบความคืบหน้า
• หลักสูตรด้วยเนื้อหาทั้งหมดของหลักสูตร
• ค้นหา ตามหลักสูตรและครู
• ชั้นเรียนกลุ่มสดแบบเรียลไทม์

ครู

• ระบบการตรวจสอบความถูกต้องที่เหมาะสมพร้อมการลงชื่อเข้าใช้การเข้าสู่ระบบการตรวจสอบ OTP, ส่ง OTP, ลืมรหัสผ่าน (ตรวจสอบอย่างเต็มที่ด้วยการแจ้งเตือน bootstrap)
• แบบฟอร์มการอัปโหลดครูที่ผ่านการตรวจสอบอย่างเต็มที่พร้อมคำอธิบายชื่อเรื่องรูปภาพและรายละเอียดอื่น ๆ
• ckeditor สำหรับการเขียนในกล่องข้อความที่มีความสามารถในการเพิ่มส่วนหัวที่แตกต่างย่อหน้า, ตัวหนา, ตัวเอียง, ลิงค์, ตาราง, ขนาด ฯลฯ
• ครูสามารถอัปโหลดวิดีโอไม่เกิน 5 วิดีโอด้วยการอัปโหลดแถบเพื่อแสดงความคืบหน้า
• ครูสามารถดูหลักสูตรที่อัปโหลดได้
• ครูสามารถลบหลักสูตรได้
• ครูสามารถแก้ไขหลักสูตรได้

การทดสอบโดยใช้ Jest และ Supertest สำหรับจุดสิ้นสุดด่วน

คลาส Live กลุ่มแบบเรียลไทม์โดยใช้ socket.io และปรับให้เหมาะสมกับ Redis สำหรับข้อความแคช

ภาพหน้าจอ

หน้าตรวจสอบ

หน้าลงทะเบียน

หน้าเข้าสู่ระบบ

หน้า OTP และกลับไปที่หน้า OTP

ลืมหน้ารหัสผ่าน

---

หน้าจอหลัก

หน้าแรก

หน้าหลักสูตร

หน้าบุ๊คมาร์ค

หน้าชำระเงินการชำระเงิน

หน้าคลาสเรียนสด

หน้าการตั้งค่า

หลักสูตรของครู

ครูอัปโหลดรายละเอียด

ครูอัปโหลดวิดีโอ

---

การออกแบบที่ตอบสนอง

การรับรองความถูกต้องของการออกแบบมือถือ

หลักสูตรการออกแบบมือถือ