Sign in
Log inSign up

Coursera.org Clone with backend

By using Node Js, Express, Mongodb, HTML and CSS.

Abhay Gedam's photo
Abhay Gedam
·Aug 29, 2021·

2 min read

Hello I am Abhay Gedam. After Graduation in Electrical Engineering, I got interest in web-development and coding. Then I decided to pursue a web development course. After lots research I found Masai -school is the best school offering full stack web- development course. I took admission in Masai-school.

During construct week, we get project to clone Coursera website and add backend. My team member are Pratik Shaha. We already had frontend code which we wrote in last construct week. At first day of construct week we both get confused about how will we do. We decides to do research for one day and then meet. I spend whole day to research about functionality and learn EJS method to connect the frontend with backend.

Second day we meet again and make plan and starts breaking work on functionality basic. First we decides what functionality we want to develop today and then we divide work equally. After work done we pushed code on Github and If their any needs to improvement we discussed it solve it with suggestions. At the end of the fourth day, we were able to add all functionality its possible just because team work. Working on this project has strengthened our concept of Node Js, Express, Mongodb, HTML and CSS.

Home Page

The home page have may section. Below are a few screenshots of the homepage.

home1.jpeg

home2.jpeg

home3.jpeg

Footer.png

Login Page

After Signup and Login user redirected to user profile page and user data we stored on mongodb server.

login1.jpeg

login2.jpeg

Search Box

We added debouncing to search box through Api calls with server.

Screenshot (541).png

Course Browser Page

To select a preferred course students will land on this page, where they can choose the required course by filtering through various categories. Express , Mongodb, JavaScript has been used to provide filter functionality.

course1.jpeg

course2.jpeg

Course detail page

After selecting a required course user will be directed to the course detail page that will contain all the necessary details about the Instructor and Course.

detail1.jpeg

detail2.jpeg

Enrollment window

For enrollment user have two option. After that user will directed to payment section.

payment1.jpeg

Payment

Upon making payment, the user will be enrolled in the course and the course will get updated into his profile.

payment2.jpeg

My Purchases

Before and after purchased course. Course get added from database.

Screenshot (542).png

Screenshot (543).png

This has been a great and wonderful experience for us and we coordinate with each other and build this website in a given time.

Thank You! Thank you very much for reading my article if you made it this far. Any feedback or suggestions are welcome.

Thanks again!

Hassle-free blogging platform that developers and teams love.
  • Docs by Hashnode
    New
  • Blogs
  • AI Markdown Editor
  • GraphQL APIs
  • Open source Starter-kit

© Hashnode 2024 — LinearBytes Inc.

Privacy PolicyTermsCode of Conduct