(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. This is the Student-facing web app -- does NOT include Instructor or Admin panel. Users may log in with either email/password or with Google.
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.
The backend for the Demo is a separate Java Springboot application available here with API Docs. However, you may use any server framework or language you like with this project.
# Requires node 16.x or higher
npm install
In local development, the app runs on port 5173 by default. You can change it in vite.config.ts.
Create an .env
file at project root directory and fill in appropriate values (see .env.sample
).
npm run dev
For production, run npm run build
, then follow official Vite guide
on deployment, depending on your hosting of choice. Remember to set ENV
variables on your target Cloud platform.
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 (just for simplicity).
If you don't want to Register, you can still play around the live demo using any of the Test accounts. Visit the login page and click Login with Test Account button.
- Google OAuth Credentials (for Google Login)
- Braintree Developer Account (for payments handling)
- (OPTIONAL) Free PayPal Business Account.
- Vite - official Guide
- Braintree Payments docs
- Google Login docs - latest version for Web
- Element Plus - UI framework for VueJS.
- Pinia docs - modern store for Vue (replacing VueX)
- Vue DevTools -✨ plugin for all major Browsers
- sql-to-ts -✨ quick Db Schema (SQL) --> TS Interface generator
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
© 2022 Davis Tibbz This project is MIT licensed.
- Logo by author (@Longwater1234). CC-BY-4.0 License.
- Homepage banner image: Avi Richards, Unsplash
- Demo video content: all creators listed on "Credits" webpage.
- Web font used: Fira Sans