Giter Site home page Giter Site logo

sukhdev-bajiya / devtecheducation Goto Github PK

View Code? Open in Web Editor NEW
1.0 1.0 0.0 8.69 MB

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. <> Backend - https://github.com/sukhdev-bajiya/DevTechEducation_server

Home Page: https://devtecheducation.netlify.app/

HTML 0.08% CSS 1.22% JavaScript 98.69%
react bcryptjs coreldraw cors crypto-js express-js full-stack google-apps-script jsonwebtoken material-ui

devtecheducation's Introduction

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 ----------------------

devtecheducation's People

Contributors

sukhdev-bajiya avatar

Stargazers

 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.