Coursera-clone with Backend
So, it is the construct week of Unit 4 at Masai School, where all the students get projects to work on. The projects are allotted group-wise and a full week is given for the completion of the project, which is actually cloning a website and adding backend functionalities. Coursera was the website we were asked to clone. Shubham Singhal, Khushbu Nikhare and I, Ankita Dhiman had the responsibility to build this E-learning website.
In the initial meeting, the tasks were divided as per the skills and proficiency of the members. All the members dedicated efforts to accomplish the project. It was a journey of ups and downs for us, but with grit we made it eventually.
Before moving on to our work, let me tell you a few things about Coursera. Coursera, a global learning platform, was founded by Daphne Koller and Andrew Ng in 2012. Coursera partners with more than 200 leading universities to bring flexible learning to people. 82 million learners, 100+ Fortune 500 companies and more than 6,000 campuses, businesses, and governments come to Coursera for world-class learning-anytime, anywhere.
The tech-stack used in our project includes HTML, CSS, JavaScript, Node.js, Mongodb, Express.
Coming to our work, the website landing page can be seen here.
The above snapshot is of the home page that is created by Ankita Dhiman which is almost similar to the landing page of Coursera.com. The header and footer for all the pages in this project were designed by herself. As the landing page was connected to all the other pages, it consisted with much of the functionality in it.
HTML and CSS were used for styling the website and JavaScript for carousel effects to the buttons on the page. On clicking on the arrows, it slides to the next user page review. The Coursera logo at top-left corner of the page followed by Explore button, for exploring through the number of courses available, search-bar lying besides it, API was made to fetch the courses and their details. Then the remaining options in navigation bar are Online Degrees, Find Careers, For Enterprises, For Students and lastly authentication options. Scrolling down the page gives us an idea about the number of courses available across the platform.
For accessing the platform, the student must signup and sign in to the website by giving the details, such as full name, email address and password for signing up and email address and password for signing in. After signup, the user data is stored in the database on the server and that data is used for signing in to the website. After signing in, the student comes to the home page.
Searching courses or going through any of the options available on navigation bar like, Online Degrees, Find Careers, etc., will take the student to the available programs as per study interest. The data of the courses is being fetched through the database. The courses are showed in cards and by clicking on anyone of the course will make us go to description page of the program.
The description page describes the course in full depth, giving details about the course outcomes, benefits, prerequisites and what not. It provides all the narration of the program, so good, for the student to decide whether to go for the course or not. It shows course fees also to check the affordability. Once the student make decision on purchasing the course, just click on “BUY NOW” button. After clicking, the student gets visited to payment page, can be seen below.
Payment page shows the price details of the course on the top and asks for payment card details like, Name, Card Number, Expiry Date, CVV and Country. After filling in all the details, just click on Pay now, and you’ll get notified with the message of “Payment Successful”.
Final Verdict: As you can see in above images the handwork and part performed by each and every member is up to the mark and during merging of all the work at one place we had a look over every part in every detail so that work should be up to the mark. It is not just about coding, it is about problem-solving. I have always believed in learning by building the code. This project could not have been made possible without the contribution of my team-mates.
Thanks for taking out the time to read the whole blog.