Skip to content

About Dev Tech Education Website--> Online Education platform --> Technology Used - MERN --> User can be join as a student, teachers, or admins. Admin and teacher manage course, subject, lectures and student. Student add course and learn.

sukhdev-bajiya/DevTechEducation-2.0

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

47 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

DevTechEducation

☠️ Problem Statement ☠️

Consider you have to create a website using CRUD which contains

  1. Creating a user (user can be a student, admin, or a teacher)

  2. On the homepage user is able to see all the courses offered by the company

  3. Once the user clicks on any course there are some conditions

    • If the user has bought that course then he can see all the lectures in it
  4. A lecture contains the lecture name, lecture description, and lecture video (you can use youtube videos for reference)

  5. Make a payment gateway for purchasing the course after purchase user should be able to see the course

  6. Profile section where the user can add his basic info and see all the courses that he has enrolled

  7. Cart page where user can see all the courses added to the cart

  8. An admin can add any number of lectures in a course, also update the previous lectures and can also delete a lecture

  9. A teacher can add any lectures and update or delete any lectures other than all admin features

  10. Admin and teacher can see all the courses

πŸ’‘ The Idea πŸ’‘

I am pursuing a Full Stack Web Development course at Masai school, In Masai school, I have given a project. It was a pretty good project to work on. The task was to create a course platform. Let's look at how I designed it


Project

GitHub - Code
Netlify - Live demo
Hash node - Blog

Technology Used

β€’ React
β€’ Redux
β€’ Redux-Thunk
β€’ React-Router
β€’ Material-UI
β€’ Express-js
β€’ Mongoose
β€’ Google-Apps-Script
β€’ Jsonwebtoken
β€’ Bcryptjs
β€’ Crypto-js
β€’ Cors
β€’ Universal-cookie

Tools

β€’ VS Code
β€’ Github
β€’ Netlify
β€’ Render
β€’ Thunder Client
β€’ Mongodb-Atlas
β€’ CorelDRAW



DevTechEducation landing page πŸ‘‡ πŸ’»


1.png


🀡🏼 Student signup πŸ‘‡ πŸ’»


2.png


🀡🏼 Student, πŸ‘¨β€πŸ’Ό Teacher and πŸ‘¨β€βœˆοΈ Admin login πŸ‘‡ πŸ’»


3.png


πŸ‘¨β€βœˆοΈ Admin dashboard πŸ‘‡ πŸ’»


4.png


πŸ‘¨β€βœˆοΈ Create and Manage course πŸ‘‡ πŸ’»

  • Admin can create the new course.
  • Admin can edit the existing course.
  • Admin can remove the existing course.

5.png 6.png 7.png 8.png


List of course πŸ‘†πŸΌ πŸ’»




πŸ‘¨β€βœˆοΈ Create and Manage Subjects πŸ‘‡ πŸ’»

  • Admin can add subjects to an existing course.
  • Admin can edit the existing subjects.
  • Admin can remove the existing subjects.

9.png 10.png 11.png 12.png


πŸ‘¨β€βœˆοΈ List of Subjects πŸ‘†πŸΌ πŸ’»




πŸ‘¨β€βœˆοΈ Create and Manage lecture πŸ‘‡ πŸ’»

  • Admin can add lectures to an existing subjects.
  • Admin can edit the existing lectures.
  • Admin can remove the existing lectures.

13.png 14.png 15.png 16.png


πŸ‘¨β€βœˆοΈ List of lecture πŸ‘†πŸΌ πŸ’»




πŸ‘¨β€βœˆοΈ Create and Manage admin user πŸ‘‡ πŸ’»

  • Admin can add a new teacher to the course platform.
  • Admin can edit the existing teacher.
  • Admin can do active and inactive the existing teacher.

17.png 18.png 19.png 20.png


Teacher list πŸ‘†πŸΌ πŸ’»




πŸ‘¨β€βœˆοΈ Create and Manage student user πŸ‘‡ πŸ’»

Admin can add a new student to the course platform. Admin can remove the existing student. Admin can do active and inactive the existing student.


21.png 22.png 23.png 24.png

Student list πŸ‘†πŸΌ πŸ’»




Admin profile page πŸ‘‡ πŸ’»


25.png


Admin update profile and password πŸ‘‡ πŸ’»

β€’ Admin can update his profile and password


26.png

---------------------- Admin Part Done ----------------------






πŸ‘¨β€πŸ’Ό Teacher dashboard πŸ‘‡ πŸ’»


27.png


πŸ‘¨β€πŸ’Ό Course and Subject List πŸ‘‡ πŸ’»

28.png 29.png

πŸ‘¨β€πŸ’Ό Create and Manage lecture πŸ‘‡ πŸ’»

  • Teacher can add lectures to an existing subject.
  • Teacher can edit the existing lectures.
  • Teacher can do active and inactive the existing lectures.

30.png 31.png 32.png 33.png


List of lecture πŸ‘†πŸΌ πŸ’»



πŸ‘¨β€πŸ’Ό Create and Manage student user πŸ‘‡ πŸ’»

Teacher can add a new student to the course platform. Teacher can remove the existing student. Teacher can remove the existing student.


21.png 22.png 23.png 24.png


Student list πŸ‘†πŸΌ πŸ’»



πŸ‘¨β€πŸ’Ό Teacher profile info πŸ‘‡ πŸ’»


25.png


πŸ‘¨β€πŸ’Ό Teacher update profile and password πŸ‘‡ πŸ’»

β€’ Teacher can update his profile and password


26.png

---------------------- Teacher Part Done ----------------------






🀡🏼 Student dashboard πŸ‘‡ πŸ’»


  • Students can see all the courses and about course.

34.png



🀡🏼 πŸ’°** Purchase Course** πŸ’° πŸ‘‡ πŸ’»

  • Step 1: Click Buy Now

35.png

  • Step 2: View Course

36.png

  • Step 2: Make Payment

36.1.png 36.2.png 37.png


Card Details

  • Card Number - 1234567891234567
  • CVV Number - 123
  • Exp Date - 01/12/25
  • Card Holder - Dev Tech Education


🀡🏼 Now see Purchased Course in My Course πŸ‘‡ πŸ’»


38.png


🀡🏼 πŸ“’ Now see all lectures πŸ’» πŸ‘‡


39.png


🀡🏼 πŸ’Ώ Play Video πŸ’Ώ πŸ’» πŸ‘‡


40.png


πŸ‘¨β€πŸ’Ό Student profile info πŸ‘‡ πŸ’»


25.png


πŸ‘¨β€πŸ’Ό Student update profile and password πŸ‘‡ πŸ’»

β€’ Student can update his profile and password


26.png

---------------------- Student Part Done ----------------------

About

About Dev Tech Education Website--> Online Education platform --> Technology Used - MERN --> User can be join as a student, teachers, or admins. Admin and teacher manage course, subject, lectures and student. Student add course and learn.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages