Masai 2.0
☠️ Problem statement ☠️
Consider you have to create a website using CRUD which contains
- Creating a user (user can be a student, admin, or a super-admin)
- On the homepage user is able to see all the courses offered by the company
- 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
- A lecture contains the lecture name, lecture description, and lecture video (you can use youtube videos for reference)
- Make a payment gateway for purchasing the course after purchase user should be able to see the course
- Profile section where the user can add his basic info and see all the courses that he has enrolled
- 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
- Cart page where user can see all the courses added to the cart
- An admin can add any number of lectures in a course, also update the previous lecture,s and can also delete a lecture
- A super admin can add any course and update or delete any course other than all admin features
- 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 💻 👇
👨✈️ Home Page Code💻 👇
👨✈️ Login Page
👨✈️ Login Page for Super Admin 💻 👇
👨✈️ Super Admin Profile Page 💻 👇
👨✈️ Super Admin Update Profile Page 💻 👇
• Super Admin can update his profile
👨✈️ Create Course Page 💻 👇
- Super Admin can create the new course.
- Super Admin can delete the existing course by delete option.
👨✈️ Add Lectures To Course 💻 👇
- Super Admin can add lectures to an existing course.
- Super Admin can delete the existing lectures by delete option.
Manage Admin Data 💻 👇
- Super Admin can add a new Admin to the course platform.
- Super Admin can delete the existing admin by delete option.
👨✈️ Manage Student Data 💻 👇
- Super Admin can add a new student to the course platform.
- Super Admin can delete the existing student by delete option.
👨💼 Login Page For Admin 💻 👇
👨💼 Profile Page of Admin 💻 👇
• Admin can update his profile
👨💼 Change Password 💻 👇
• Admin can update his Password
👨💼 Account Page of Admin 💻 👇
• Admin can see all the available courses and lectures
👨💼 Add Lectures 💻 👇
- Admin can add lectures to an existing course.
- Admin can delete the existing lectures by delete option.
👨💼 Manage Students 💻 👇
- Admin can add a new student to the course platform.
- The admin can delete the existing student by delete option.
🤵🏼 Student Login Page 💻 👇
🤵🏼 Student Profile Page 💻 👇
🤵🏼 Course Demo Classes 💻 👇
- Students can watch demo classes without Purchasing the course
🤵🏼 All Courses 💻 👇
- Students can see all the courses.
🤵🏼 ❤️ Favorite Courses ❤️ 💻 👇
- Students can add courses in favorites.
- Students can remove courses from favorites.
🤵🏼 My Cart Courses 💻 👇
- 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
🤵🏼 💰 Masai Payment Method 💰 💻 👇
🤵🏼 💰 OTP POPUP 💰 💻 👇
🤵🏼 💰 Enter Valid OTP 💰 💻 👇
🤵🏼 🥳 Payment Confirmation 🥳 💻 👇
🤵🏼 Now see Purchased Course in My Course 💻 👇
🤵🏼 📒 Now see all lectures 💻 👇
🤵🏼 💿 Play Video 💿 💻 👇
Create JSON Server
{
"studentLoginData": [
{
"password": "1234",
"email": "vikasmore@gmail.com",
"phone": "9080808080",
"userLoginId": 1658656526044,
"id": 1,
"name": "Vikas More",
"gender": "male",
"address": "Solapur",
"dateOfBirth": "2003-06-18"
}
],
"superAdminLoginData": [
{
"id": 1,
"name": "Akash Surve",
"userName": "superAdmin",
"password": "1234",
"email": "surveakash01@masai.com",
"phone": "8080808080",
"gender": "male",
"address": "Pune",
"dateOfBirth": "1995-07-22",
"userLoginId": "9876543210"
}
],
"adminLoginData": [
{
"name": "Ayush Kumar",
"gender": "male",
"dateOfBirth": "2001-08-05",
"password": "1234",
"email": "ayushkumar@masai.com",
"phone": "9090909090",
"address": "Pune",
"userLoginId": 1658656466564,
"id": 1
}
],
"courses": [
{
"name": "Full Stack Web Development ",
"fees": "250000",
"about": "Start your coding career and become an industry-ready Full Stack Web Developer in India's ever-growing technology job market.",
"courseTime": "FULL TIME",
"courseDuration": "35",
"fav": true,
"cart": false,
"myCourse": true,
"lectures": [
{
"LectureName": "HTML Introduction",
"info": "Introduction to HTML, CSS, JavaScript & How websites work? ",
"urlLecture": "6mbwJ2xhgzM",
"id": 1658656396496
},
{
"LectureName": "JavaScript Tutorial ",
"info": "JavaScript Introduction & Basics of JavaScript ",
"urlLecture": "hKB-YGF14SY",
"id": 1658679435777
},
{
"LectureName": "JavaScript + Setup",
"info": "JavaScript Setup Information ",
"urlLecture": "ER9SspLe4Hg",
"id": 1658679652940
},
{
"LectureName": "const, let and var in JavaScript",
"info": "Java Script data type and Its difference ",
"urlLecture": "Icev9Oxf0WA",
"id": 1658679751331
},
{
"LectureName": "Primitives and Objects in JavaScript",
"info": "Primitives and Objects in JavaScript | JavaScript Tutoria",
"urlLecture": "qpU3WIqRz9I",
"id": 1658679914053
}
],
"id": 1
},
{
"name": "Full Stack Android Development",
"fees": "300000",
"about": "Start your coding career and become an industry-ready Full Stack Android Developer in India's ever-growing technology job market.",
"courseTime": "PART TIME",
"courseDuration": "50",
"fav": true,
"cart": false,
"myCourse": false,
"lectures": [
{
"LectureName": "Android Development Tutorial ",
"info": "Introduction - Downloading Android Studio - Important Note - Installing Android Studio - Configuring Android Studio - Starting New Project - Gradle Scripts ",
"urlLecture": "qK0QNA0sMGc",
"id": 1658680082650
},
{
"LectureName": "Introduction to Next.js",
"info": "Next.js Tutorials for beginners in Hindi: In this video, we will start learning Next.js and will get introduced to this awesome framework. Next.js solves a lot of problems with React which will be discussed in this video!",
"urlLecture": "DZKOunP-WLQ",
"id": 1658680537241
}
],
"id": 2
},
{
"name": "Data Analytics",
"fees": "200000",
"about": "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.",
"courseTime": "PART TIME",
"courseDuration": "30",
"fav": false,
"cart": false,
"myCourse": false,
"lectures": [
{
"LectureName": "Excel",
"info": "Microsoft Excel Tutorial for Beginners - Full Course",
"urlLecture": "Vl0H-qTclOg",
"id": 1658680609944
},
{
"LectureName": "Learn Python - Full Course ",
"info": "This course will give you a full introduction into all of the core concepts in python. Follow along with the videos and you'll be a python programmer in no time!",
"urlLecture": "rfscVS0vtbw",
"id": 1658680672427
}
],
"id": 3
},
{
"name": "Design",
"fees": "500000",
"about": "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.",
"courseTime": "FULL TIME",
"courseDuration": "50",
"fav": false,
"cart": false,
"myCourse": false,
"lectures": [
{
"LectureName": " Web Design Course",
"info": "Learn how to design a website from scratch. ",
"urlLecture": "C72WkcUZvco",
"id": 1658680786928
}
],
"id": 4
}
]
}
Technology Used
• HTML • CSS • JAVASCRIPT • DOM • Local Storage • JSON Server
Tools
• VS Code • Github • Postman
Project link
•Masai 2.0
Github link
•Masai 2.0