https://github.com/longwater1234/wedemyclient
Udemy Clone PWA, (frontend) built using Vue 3, Vite, Element Plus + TypeScript + Paypal, and Pinia (No Vuex!)
https://github.com/longwater1234/wedemyclient
element-plus googlesignin onlinelearning payments paypal pinia typescript udemy-clone vite vue3 vuejs
Last synced: 19 days ago
JSON representation
Udemy Clone PWA, (frontend) built using Vue 3, Vite, Element Plus + TypeScript + Paypal, and Pinia (No Vuex!)
- Host: GitHub
- URL: https://github.com/longwater1234/wedemyclient
- Owner: Longwater1234
- License: mit
- Created: 2021-09-29T15:58:01.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2025-04-29T10:55:20.000Z (22 days ago)
- Last Synced: 2025-04-29T11:44:14.366Z (22 days ago)
- Topics: element-plus, googlesignin, onlinelearning, payments, paypal, pinia, typescript, udemy-clone, vite, vue3, vuejs
- Language: Vue
- Homepage: https://wedemy.up.railway.app
- Size: 3.3 MB
- Stars: 43
- Watchers: 4
- Forks: 16
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
WedemyClient
[](https://www.npmjs.com/package/vue)
[](https://www.npmjs.com/package/vite)
[](https://github.com/Longwater1234/WedemyClient/blob/master/LICENSE)
[](https://www.npmjs.com/package/typescript)
(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.
### 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.
## Backend Repo
The backend for the Demo is a separate Java Springboot
application [available here](https://github.com/Longwater1234/WedemyServer) with API Docs. However, you may use any
server framework or language you like with this project.
## Install
```sh
# Requires node 20.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](vite.config.ts).
Create an `.env` file at project root directory and fill in appropriate values (see `.env.sample`).
```sh
npm run dev
```
For production, run `npm run build`, then follow official Vite guide
on [deployment](https://vitejs.dev/guide/static-deploy.html), depending on your hosting of choice. Remember to set ENV
variables on your target Cloud platform.
## [Live Demo](https://wedemy.up.railway.app/)
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](https://developer.paypal.com/braintree/docs/guides/credit-cards/testing-go-live/java). Also, this
Demo serves embedded video from YouTube (just for simplicity).
### Test Accounts for Demo
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.
## Required 3rd party Services
- [Google OAuth Credentials](https://console.developers.google.com/apis/credentials) (for Google Login)
- [Braintree Developer](https://developer.paypal.com/braintree/docs) Account (for payments handling)
- (OPTIONAL) Free PayPal Business Account.
- (OPTIONAL) Free HCaptcha account (login and SignUp pages)
## Resources - learn more
- [Vite](https://vitejs.dev/guide/) - official Guide
- [Braintree Payments docs](https://developer.paypal.com/braintree/docs/guides/drop-in/setup-and-integration/javascript/v3)
- [Google Login docs](https://developers.google.com/identity/gsi/web/guides/overview) - latest version for Web
- [Element Plus](https://element-plus.org/en-US/) - UI framework for VueJS.
- [Pinia docs](https://pinia.vuejs.org/) - modern store for Vue (replacing VueX)
- [Vue DevTools](https://devtools.vuejs.org/guide/installation.html) -✨ plugin for all major Browsers
- [sql-to-ts](https://rmp135.github.io/sql-ts/) -✨ quick Db Schema (SQL) --> TS Interface generator
## Deploying your App 🌍
This App can be easily deployed within few minutes, straight from GitHub to your Cloud PaaS of choice. Popular PaaS with CI/CD for VueJS projects
include: Heroku, AWS Amplify, Vercel, Netlify, Azure Web Apps. The following may **require** a Dockerfile:
Dokku, Railway, Render.com, Fly.io. Do not forget to set ENV variables as shown in `env.sample` file!
## Pull Requests & Contributions
Contributions, issues and feature requests are welcome!
Feel free to check [issues page](https://github.com//Longwater1234/WedemyClient/issues). For more TODO's for this
project, see list in [CONTRIBUTING.md](CONTRIBUTING.md)
## 📝 License
© 2022 Davis Tibbz
This project is [MIT](https://github.com/Longwater1234/WedemyClient/blob/master/LICENSE) licensed.
### Credits
- Logo by author (@Longwater1234). [CC-BY-4.0](https://creativecommons.org/licenses/by/4.0/?ref=chooser-v1) License.
- Homepage banner image: [Avi Richards, Unsplash](https://unsplash.com/@avirichards)
- Demo video content: all creators listed on "Credits" webpage.
- Web font used: [Fira Sans](https://fonts.google.com/specimen/Fira%20Sans)