Frontend Masters Clone using Mongodb database

Frontend Masters Clone using Mongodb database

This blog is about my second project at Masai school made during the construct week. In this project, I along with two other team members clone the website called "Frontend Masters". This website basically offers all the frontend courses necessary to become a good frontend developer.

Concepts learned at Masai school in Unit III

In the 3rd unit at Masai school, we learned about mongodb database which we have used in our project to make this clone along with other tech like css, HTML and javascript.

Project statements

We were given to clone the website Frontend masters. So first of all we explore the original website thoroughly. Then we decided what workflow should our cloned website should have and made plans accordingly.

Learnings

  • Learned how to store data using mongodb database.
  • Learned how to integrate backend with frontend.
  • How to work in a team
  • Time management

Team Members


Main Pages

  • Landing Page
  • Register page
  • Login Page
  • Courses Page
  • Track course page
  • My account page
  • Payment gateway

Sources

  • Images: Frontend-masters
  • Fonts: Google Fonts,sans-serif family
  • Icons:Awesome Icon
  • Live demo:Frontend-Masters

Funtionality

  • Responsive landing page
  • Signup page using mongodb database
  • Login page using mongodb database
  • Enrolling particular course
  • Tracking course progress using circular progress bar
  • Payment gateway
  • Course video play

Steps to run website locally

  • Open GitBash in the location you want to clone and store the files
  • Copy-Paste the command "git clone github.com/asutoshb/Frontend-Masters.git" on the terminal and run it
  • Install all the dependencies required by typing "npm install" in the terminal
  • Then run "npm run server" on the terminal
  • use "localhost:3000" on your browser to run the website locally

Screenshots of pages

  • landing page Landing page

  • Register page Register page

  • Login page Login Page

  • course page Course page