Skip to content

About Masai 2.0--> I used CRUD operations to build this website --> HTML | CSS | JavaScript

Notifications You must be signed in to change notification settings

sukhdev-bajiya/masai_2.0

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

14 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

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

About

About Masai 2.0--> I used CRUD operations to build this website --> HTML | CSS | JavaScript

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published