WedemyClient

(Frontend Repo). Clone of Udemy, PWA (progressive web app) built using Vue 3, Vite, Typescript, Pinia, and Element Plus. At checkout, payments are securely handled by Braintree Payments (owned by PayPal), which also supports cards, Apple Pay, GooglePay, Venmo and many other methods. This project implements Credit-Card and PayPal Checkout only, in Sandbox (DEV) mode. Users may authenticate with simple username and password, or with Google.

Disclaimer ⚠

Wedemy is an open-source project developed for learning purposes only. It is NOT associated with or endorsed by Udemy, Inc. Any resemblance to Udemy or its services is purely inspirational. Please note that Wedemy does not offer any certifications or guarantees similar to those provided by Udemy Inc.

Backend Repo

The backend for the Demo is a separate Java Springboot application available here. However, you may use any Backend framework or language you like with this project.

Install

# Requires node 16.x or higher
npm install

Usage

In local development, the app runs on port 5173 by default. You can change it in vite.config.ts

npm run dev

For production, run npm run build, then follow official Vite guide on deployment, depending on your hosting of choice.

Live Demo - updated 2023 Jan

PLEASE READ: The Demo uses Sandbox (Dev) Mode of Braintree Payments. No actual money will be deducted on Checkout. You should use test credit-card numbers listed here. Also, this demo serves embedded video from YouTube (for simplicity).

Test Accounts for Demo

If you don't want to Register, You can still play around the live demo using any of these Test accounts:

email	pass (Dont ignore the "!")
anna@example.com	`anna_qwerty9876!`
bob@example.com	`bob_qwerty9876!`
coco@example.com	`coco_qwerty9876!`
damian@example.com	`damian_qwerty9876!`
eric@example.com	`eric_qwerty9876!`
fiona@example.com	`fiona_qwerty9876!`

Required 3rd party Services

Google OAuth Credentials (for Google Login)
Braintree Developer Account (for payments handling)
(OPTIONAL) Free PayPal Business Account.
IMPORTANT ⚠: Remember to create an .env file at root folder and fill in appropriate values (see .env.sample)

📕 Resources - learn more

Vite - official Guide
Braintree Payments docs
Google Login docs - latest version
Element Plus - UI framework for Vue.
Pinia docs - modern store for Vue, replacing VueX.
sql-to-ts - Useful DbSchema (SQL) to TS Interface convertor

Pull Requests & Contributions

Contributions, issues and feature requests are welcome! Feel free to check issues page. For more TODO's for this project, see list in CONTRIBUTING.md

📝 License

Credits

Homepage banner image: Avi Richards, Unsplash

enghamzasalem/WedemyClient