Giter VIP home page Giter VIP logo

coursera-clone's Introduction

Coursera Clone star repo

Fully responsive single page application made using MERN Stack! ๐Ÿ’™

TECH USED

  • React
  • Node
  • Mongo db
  • Express
  • Redux
  • Redis
  • Jest

DATABASE USED

  • Mongo
  • Redis

Getting Started

Clone the repo to your local environment, you have to seperately install all the dependencies for backend and frontend.

For Backend, go to the backend folder (cd Backend) and run npm i

  • Install MongoDB

  • or, you can use the website

  • add your environmental variables

  • Create a .env file in the root directory of the backend folder and add your tokens there with respect to the config files variables.

    • ACCESS_TOKEN_SECRET = "some secret"
    • ACCESS_TOKEN_LIFE = time
    • REFRESH_TOKEN_SECRET = "some secret"
    • REFRESH_TOKEN_LIFE = time
    • SENDGRID_KEY = ""
    • MONGO_DATABASE = ""
    • OAuth2Client = ""
    • STRIPE_SECRET_TOKEN = ""
    • REDIS_HOST = ""
    • REDIS_PASSWORD = ""
    • REDIS_PORT = ""

Note: Make sure the .env files variables matches with that of the config files like the image below.

env files variables

For Frontend, go to the frontend folder (cd Front-end) and run npm i

To run a development environment, you can use the npm start command. This will start up a development web server on port 3000 for frontend, and a nodemon-watched API server on port 8080.

Note: you have to do npm start for backend and frontend seperately.

Unit testing

You can test the backend, express endpoints using command ( npm test )

Docker Compose

Coursera Clone is dockerised and docker hub repository can be found here https://hub.docker.com/repository/docker/ayushverma/coursera/general

If you use Docker and Docker Compose, you can start the entire project with:

docker-compose up

๐Ÿญ Features

Student

  • Authentication system with signup,login,otp verification,resend otp,forgot password (fully validated with bootstrap alerts)
  • Google authentication (Oauth2) using react-google-login and google auth-library
  • Stripe Payment gateway integrated with backend to buy courses
  • Redux store to easily manage states
  • Homepage with courses being fetched categorically
  • Recommended Courses based on user's preferences
  • Rating of Courses
  • Bookmarked Courses where users can remove or add bookmark
  • Download resourses (pdf - notes)
  • Responsive React Video player for videos
  • Progress bar
  • CoursePage with all the content of the course
  • Searching based on course and teacher
  • Real Time Live Group classes

Teacher

  • Proper Authentication system with signup,login,otp verification,resend otp,forgot password (fully validated with bootstrap alerts)
  • Fully validated teacher uploading form with descriptition,title,Image and other details
  • CkEditor for writing in textbox with abilities to add diffrent headings,paragraphs,bold,italics,link,tables,sizes etc
  • Teacher can upload upto 5 videos with upload bar to show progress
  • Teacher can see their uploaded courses
  • Teacher can delete their course
  • Teacher can edit their course

Testing using jest and supertest for express endpoints.

Real Time Live Group Classes using socket.io and Optimized with redis for caching messages

Screenshots

Authentication pages

Signup Page

alt text

Login Page

alt text

Otp and Resend Otp Page

alt text

Forgot Password Page

alt text


Main Screens

Homepage

alt text

Course Page

alt text

Bookmark Page

alt text

Payment Checkout Page

alt text

Live Classes Page

alt text

Preference Page

alt text

Teacher's Courses

alt text

Teacher Uploading Details

alt text

Teacher Uploading Videos

alt text


Responsive Designs

Mobile Design Authentication

alt text

Mobile Design CoursePage

alt text

coursera-clone's People

Contributors

ayush-lab avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

coursera-clone's Issues

Explanation

Hey friend, hope you are fit and fine, if you don't mind would you tell how/from where you learned to create such complex and great project?

Opensource

Can you upload a video on how to run the app?
Thanks!

By the way, good work!

need more info

can you please share more information for backend because it gives some error and not connecting with mongo.

Courses content

Hello dear friend
Very good job, but I have a problem
I donโ€™t think itโ€™s connected, but everything works fine for me except for downloading content.
Can you tell me how you can solve the problem?
I'm just a beginner
ะบัƒั€ัั‹

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.