Skip to content

Latest commit

 

History

History
516 lines (335 loc) · 11.4 KB

README.md

File metadata and controls

516 lines (335 loc) · 11.4 KB

masai_2.0

☠️ 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 super-admin)
  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
  • else the user can preview 1st lesson in it and for others, he has to buy that course
  1. A lecture contains the lecture name, lecture description, and lecture video (you can use youtube videos for reference)
  2. Make a payment gateway for purchasing the course after purchase user should be able to see the course
  3. Profile section where the user can add his basic info and see all the courses that he has enrolled
  4. Make a wishlist where the user can add any course to buy it later this can also be seen in the profile section, the user can also delete the course from the profile section
  5. Cart page where user can see all the courses added to the cart
  6. An admin can add any number of lectures in a course, also update the previous lectures and can also delete a lecture
  7. A super admin can add any course and update or delete any course other than all admin features
  8. Admin and super admin 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


Masai2.0 landing page 👇 💻


image


User login as a


image


👨‍✈️ Super admin login 👇 💻


image


👨‍✈️ Super admin dashboard 👇 💻


image image


👨‍✈️ Create and Manage course 👇 💻

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

image


List of course 👆🏼 💻




👨‍✈️ Create and Manage lecture 👇 💻

  • Super Admin can add lectures to an existing course.
  • Super Admin can remove the existing lectures.

image


👨‍✈️ List of lecture 👆🏼 💻




👨‍✈️ Create and Manage admin user 👇 💻

  • Super Admin can add a new Admin to the course platform.
  • Super Admin can remove the existing admin.

image


Admin list 👆🏼 💻




👨‍✈️ Create and Manage student user 👇 💻

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


image

Student list 👆🏼 💻




Super admin profile page 👇 💻


image


Super admin update profile 👇 💻

• Super Admin can update his profile


image

Super admin update password 👇 💻

• Super Admin can update his password


image

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






👨‍💼 Admin login 👇 💻


image


👨‍💼 Admin dashboard 👇 💻


image


👨‍💼 Create and Manage lecture 👇 💻

  • Admin can add lectures to an existing course.
  • Admin can remove the existing lectures.

image


List of lecture 👆🏼 💻



👨‍💼 Create and Manage student user 👇 💻

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


image


Student list 👆🏼 💻



👨‍💼 Admin profile info 👇 💻


image


👨‍💼 Admin update profile 👇 💻

• Super Admin can update his profile


image


👨‍💼 Admin update password 👇 💻

• Super Admin can update his password


image

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






🤵🏼 Student SignIn and SignUp page 👇 💻

image


🤵🏼 Student dashboard 👇 💻


  • Students can watch demo classes without Purchasing the course
  • Students can see all the courses.
  • Students can add courses in favorites.
  • Students can remove courses from favorites.

image image



🤵🏼 Add to cart 👇 💻

Students can add courses to the cart. Students can remove courses from the cart. Students can buy the courses which are added to the cart


image


🤵🏼 💰** Masai Payment Method** 💰 👇 💻

  • Fill Card Details
  • OTP Popup
  • Enter Valid OTP
  • Payment Confirmation

image


Card Details

  • Card Number - 1234567891234567
  • CVV Number - 123
  • Exp Date - 12/22
  • Otp - 8652


🤵🏼 Now see Purchased Course in My Course 👇 💻


image


🤵🏼 📒 Now see all lectures 💻 👇


image


🤵🏼 💿 Play Video 💿 💻 👇


image


🤵🏼 Student profile info 👇 💻


image


🤵🏼 Student update profile 👇 💻


image


🤵🏼 Student change password 👇 💻


image


Create JSON Server(masai.json)

{
  "studentLoginData": [
    {
      "name": "masai demo",
      "password": "123456",
      "email": "masai@school.com",
      "phone": "9876543210",
      "gender": "male",
      "address": "India",
      "dateOfBirth": "2022-07-21",
      "userLogID": "MSU_1658413592310",
      "id": 1
    }
  ],
  "superAdminLoginData": [
    {
      "id": 1,
      "name": "masai school",
      "userName": "superadmin",
      "password": "123456",
      "email": "superadmin@masai.com",
      "phone": "9876543210",
      "dateOfBirth": "2018-01-01",
      "userLogID": "SAU_1658319733856",
      "gender": "male",
      "address": "India"
    }
  ],
  "adminLoginData": [
    {
      "name": "masai schoole",
      "userName": "admin",
      "password": "123456",
      "email": "admin@masaischool.com",
      "phone": "9876543210",
      "gender": "male",
      "address": "India",
      "dateOfBirth": "2022-07-21",
      "userLogID": "MAU_1658413662910",
      "id": 1
    }
  ],
  "coures": [
    {
      "coursesName": "Software Development",
      "coursesFees": "500000",
      "coursesAbout": "Start your coding career and become an industry-ready Full Stack Web Developer in India's ever-growing technology job market.",
      "coursesFavorite": false,
      "coursesCart": false,
      "coursesPrech": false,
      "coursesLecture": [
        {
          "lectureName": "Intro java",
          "lectureUrl": "ntLJmHOJ0ME",
          "lectureAdout": "java",
          "id": 1658420398415
        },
        {
          "lectureName": "JEX",
          "lectureUrl": "ntLJmHOJ0ME",
          "lectureAdout": "java",
          "id": 1658420582595
        }
      ],
      "id": 1
    },
    {
      "coursesName": "Data Analytics",
      "coursesFees": "500000",
      "coursesAbout": "Break into the fast-growing field of Data Analytics and launch yourself into a variety of roles like Business Intelligence Analyst, Data Analyst & Data Scientist among others.",
      "coursesFavorite": false,
      "coursesCart": false,
      "coursesPrech": true,
      "coursesLecture": [
        {
          "lectureName": "Excel Intro",
          "lectureUrl": "rwbho0CgEAE",
          "lectureAdout": "excel",
          "id": 1658420464200
        },
        {
          "lectureName": "Excel ",
          "lectureUrl": "rwbho0CgEAE",
          "lectureAdout": "excel",
          "id": 1658425549550
        }
      ],
      "id": 2
    },
    {
      "coursesName": "Design",
      "coursesFees": "250000",
      "coursesAbout": "Become the catalyst that bridges the interaction between humans and computers by landing job roles in UI Design, UX Design, Product Design among many others.",
      "coursesFavorite": false,
      "coursesCart": false,
      "coursesPrech": false,
      "coursesLecture": [
        {
          "lectureName": "CorelDRAW Intro",
          "lectureUrl": "K0xge7JAUEo",
          "lectureAdout": "corelDRAW ",
          "id": 1658420519689
        },
        {
          "lectureName": "CorelDRAW",
          "lectureUrl": "K0xge7JAUEo",
          "lectureAdout": "corelDRAW",
          "id": 1658420629278
        }
      ],
      "id": 3
    }
  ]
}

Start JSON Server

json-server --watch masai.json

Project

GitHub - Code
Netlify - Live demo
Hash node - Blog

Technology Used

• HTML
• CSS
• JAVASCRIPT
• DOM
• JSON Server
• Local Storage

Tools

• VS Code
• Github
• Postman

System display size 💻 = 1280x720 pixels