Skip to content

Latest commit

 

History

History
409 lines (242 loc) · 10.3 KB

README.md

File metadata and controls

409 lines (242 loc) · 10.3 KB

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 - Client Code
GitHub - Backend Code
Netlify - Client Live
Render - Backend Live
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 ----------------------