Hello, Readers, I hope you all are doing great.
I am Sagar Dhyani. I joined Masai School 3 months ago. In the second construct week, I along with two other team members got the project of cloning the Coursera website. In this post, you will get to know in detail about how we cloned a website called Coursera and the various challenges we faced associated with it. Before starting the project, I was unclear and having a lot of doubts related to the development of the project. Here are some of the big ones:
• The key points to focus on.
• Implementation of the flow of the functionalities.
• Fetching data from Mongodb atlas according to the requirements of the project.
• Manage the Github repository while collaborating with the team members.
• Division of the tasks amongst the team members considering their respective strengths.
But, all the challenges and questions were answered along the initial analysis process where we brainstormed on the various aspects of the project.
A brief overview of the Coursera website: Coursera partners with more than 200 top major universities and companies to bring affordable, job-relevant online learning to individuals and organizations worldwide. Coursera offers a wide scope of learning opportunities—from hands-on courses to job-ready certificates and various degree programs. I have done courses from Coursera and I think this helped me in understanding the functionalities as a user.
Tools and Technologies used : VS Code, HTML, CSS, Javascript, mpngoose, express, mongodb atlas for Database and Github.
A quick walkthrough:
-### Landing page:
The first thing a user encounter in a website is a landing page/home page. We decided to create a beautiful landing page that will attract users. Our main focus here was not only designing the page but ensuring that users are able to understand the flow of the website.
Other than this, we have created various beautiful static pages for categories like enterprise and students.
Sign-up and login page
With a sign-up and login page, the website looks more functional and provides users with an option to proceed further. So we have created a Coursera sign-up page where the users can register themselves. We have used local storage for saving the details of the users as soon as they register. With the same details, the user can login to the main website.
About University registration and login page:
Coursera provides various degree programs where users can register. So, we have used the same functionality where users can apply for any university degree by providing their details for the registration process.
Various Degrees Available:
After that user will get an OTP in the console. If the user types the wrong OTP, a new OTP is generated.
After ensuring that the user provided the correct OTP, a pop-up appears to set up the password. Users can log in by entering registered email id and password. We are using local storage to store the details of the respective users.
About University registration: Coursera provides various degree programs where users can register. All the required data is fetched from mongodb atlas. So, we have used the same functionality where users can apply for any university degree by providing their details for the registration process.
After that user will get an OTP in the console. If the user types the wrong OTP, a new OTP is generated.
After ensuring that the user provided the correct OTP, a pop-up appears to set up the password. After setting the password correctly, user is registered to the applied university.
About Free courses:
Coursera provides a variety of courses. We have created the same UI where a user can choose any course from the list and enroll for the same. All the required data is coming from backend side.
A user can enroll in two ways:
- Enroll for free:
Here, a user won't receive any certificate.
- Enroll for certified courses:
Here, a user is required to provide the debit card details. A transaction OTP gets generated in the console once the user enters the card details. The user is redirected to the home page after a successful transaction.
Roles and responsibilities :
Sharoof Khan: Sharoof created a beautiful landing page with various features like carousel for slideshow.
Rahul Yadav: Rahul have worked on both frontend and backend of the free courses page, about Course page, checkout page, and payment page including all the functionalities.
Sagar Dhyani : I have worked on both frontend and backend of the University page, university registration page, Coursera signup page, Coursera login page with all the functionalities.
What I learned from this collaborated project:
- Understand the process and divide the task into sub-tasks.
- Time management
- Effective communication
- Implementation of theoretical knowledge into real-life projects.
Conclusion:
It was a great experience collaborating with team members to develop this project. It helped me to enhance my skills and understand the process of developing the project in collaboration. I am thankful to Masai School for giving me an opportunity to learn the skills and implement them for this project.