Notes.txt

----BACKEND-CLASS-01---------

1--> npm i otp-generator package for generating otp's

2--> create all 9 models

3--> use .pre() middleware in otp model(after schema and before model exports) to send otp before saving otp doc to db

4--> create a mail sender inside file in ./utils/

5--> create Auth and ResetPassword controller in ./controllers

----BACKEND-CLASS-02---------

1--> write Auth.js logic/fn's

2--> use dicebear.com api to create image url for profile pic it creates profile pic by first letter of fname and lname alphabet
    https://api.dicebear.com/5.x/initials/svg?seed=${firstName}${lastName}

3--> write auth.js middleware in ./middlewares/

4--> write fn for ResetPassword logic

5--> add two more field in User Model token and resetpasswordExpires

6--> genrate random string(ie token) used for ResetPassword
using crypto.randomUUID()

----BACKEND-CLASS-03---------

1--> only admin can decide tags in web app and before adding course(by instructor) tags must be defined

2--> create Tags.js controller - getAllTags, createTag

3--> create Course.js controller - createCourse, getAllCourse & getCourseById

4--> add a utils fn imageUploader

----BACKEND-CLASS-04---------

1--> rename Tag.js model to Category.js model and same for Tags Controller & its fn's

2--> because tag will be just , separated strings

    course to tag -- one to many reln
    category to course -- one to many reln

3--> write Section controller - create, update and delete fn

4--> and subsection controller - create , update and delete

5--> create Profile controller - updateProfile fn, deleteAccount fn, getAllUserDetails fn

----BACKEND-CLASS-05---------

1--> read razorpay documentation for integration

2--> create a mail template using html and css so that email sent to user look good
    under ./mail/templates/
    courseEnrollmentEmail.js, emailVerificationTemplate.js, paymentSuccess.js and passwordUpdate.js

3--> create payments.js controller - capturePayment and verifySignature fn
    npm i razorpay

4--> create ./configs/razorpay.js which return an instance of razorpay

----BACKEND-CLASS-06---------

1-->add getCourseDetails fn (which fetch all detail of course) in Course.js controller

2--> add RatingAndReview.js controller - createRatingAndReview, getAverageRating, getAllRatingsAndReviewsByCourseId and getAllRatingsAndReviews fn

3--> add a categoryPageDetails fn in Category controller

----BACKEND-CLASS-07---------

1--> fill all env values
2--> add cloudinary.js in configs/ folder
3-> login/signup in razorpay 
    -account and settings>documentaion>search for api sand box setup
    https://razorpay.com/docs/api/sandbox-setup/

4--> generate keys in test mode first
    test api key and test key secret

5--> create server.js file
6--> all routes file in ./routes

7--> first test Auth.js controller fn using postman
    simmilarly for other controllers fn

8--> add a updateDP fn in Profile controller which updates user img

9--> now create razorpay webhook in razorpay acc and save that in env file
    it is a custom secret key that you define when you create a webhook by giving webhook url(Your backend endpoint where you’ll handle Razorpay webhook events e.g. https://yourdomain.com/api/payment/verify ) in your Razorpay Dashboard.
    save this secret to env file

------------FRONT-END-CLASS01------------------

1--> what is concurrently ? 
    concurrently is an npm package that allows you to run multiple npm scripts or commands concurrently (in parallel), instead of running them one by one.

2--> setup react + tailwindcss

3--> install concurrently at root proj dir ie. studynotion
    add this script "dev": "concurrently -n \"SERVER,CLIENT\" -c \"blue,green\" \"npm run server --prefix backend\" \"npm run client --prefix frontend\""

    and this script
    "server": "nodemon server.js"
    to backend folder package.json

    and this "client": "vite" to frontend folder package.json

4--> add utils folder and data folder in ./src

5--> add custom theme in index.css

6--> define home route in app.jsx

7--> write home page

8--> npm i react-type-animation

------------FRONT-END-CLASS02------------------

1--> add section 2 and 3 of home page
2--> added remaining explore page in section 1 called ExploreMore.jsx component

------------FRONT-END-CLASS03-04------------------

1--> first mount navbar component at app.jsx 

2--> now when creating login/signup btn on nav we need to check whether user is logged in and if yes then hide both btn and show dashboard link and a profile icon
    if(token === null) show btn's
    else means login show profile icon

3--> will use redux toolkit
    npm install @reduxjs/toolkit
    npm install react-redux

4--> wrap App.jsx in <Provider store={store}></Provider> at main.jsx

    -create store at main.jsx and add all reducers to this store

    -since we have multiple reducer eg-auth, cart and profile etc 

    -so we combined all reducer at/redux/reducer/index.jsx and make root reducer and add to the store

    -all these reducers made from slices so create slice for each state auth, cart etc

5--> create apiConnector.js and apis.js in ./services
    -npm i axios

6--> add login/signup pages

------------FRONT-END-CLASS05------------------

1--> added verify-email page
   -RegExp.prototype.test() checks if a given string matches the pattern. 

2--> setup authentication login signup logout change password etc with server

3--> protect routes using Private and PublicRoute

4--> add /auth/me - meController and /logout controller fn

5--> add profiledropdown component

------------FRONT-END-CLASS06------------------

1--> add about us page and contact page

2--> npm i react-hook-form
    used for contactusform component

3--> create contact route and contactUs controller in backend in respective folders

------------FRONT-END-CLASS07------------------

1--> mounting at app.jsx and creating rateus page & project page

2--> npm i framer-motion 
    framer-motion is a popular React library for animations and transitions.

3--> add a dashboard button in profile drop down which links to /dashboard/profile

------------FRONT-END-CLASS08------------------

1--> adding privacypolicy page and t&c page
    npm i styled-components
    styled-components is a CSS-in-JS library for React.
    It allows you to write actual CSS inside JavaScript and attach the styles directly to components.

2-->Mounting & adding Dashboard page
    npm install chart.js react-chartjs-2
    npm i react-dropzone
    npm i react-player OR USE <video></video> tag we used video tag
    npm install react-super-responsive-table
    npm install @ramonak/react-progress-bar
    npm i react-rating-stars-component
    npm install plyr plyr-react

------------FRONT-END-CLASS09------------------

1--> adding catalog, course and view course page page nad  and mounting it
    npm i swiper
    npm i react-markdown
    npm i copy-to-clipboard

---------Payment integration---------

1. Webhook URL for Razorpay Dashboard (LOCALHOST)

Razorpay cannot call your localhost directly, so you have two options:

Use ngrok --> Expose your local server:
    ngrok http 4000 or 
    npx ngrok http 4000

need to save authentication token by login in ngrok and open ngrok.exe and paste command there to svae token

will get something like:
https://a1b2c3d4.ngrok-free.app

Now your webhook URL becomes:
https://a1b2c3d4.ngrok-free.app/api/v1/payments/webhook

// Razorpay needs raw body for signature validation ie /api/v1/payments/webhook

------- SIGNUP / SIGNIN WITH GOOGLE (FRONTEND + BACKEND) -------


1) CREATE GOOGLE OAUTH CREDENTIALS
---------------------------------

- Go to Google Developer Console
- Create a new project
- Inside that project:
  - Configure OAuth Consent Screen
    - App name
    - Support email
    - Scopes: basic profile & email (default)
- Create OAuth Client ID
  - Application type: Web
  - Add Authorized JavaScript Origins:
    - http://localhost:3000
    - production frontend URL
  - Add Authorized Redirect URIs:
    - same frontend URLs
- After creation, Google provides:
  - Client ID
  - Client Secret

Store Client ID in frontend .env file:

VITE_GOOGLE_CLIENT_ID=xxxxxxxxxxxx.apps.googleusercontent.com

Note:
- Client Secret should never be exposed to frontend
- Env changes always require redeploy


2) INSTALL GOOGLE OAUTH PACKAGE (FRONTEND)
------------------------------------------

Inside frontend folder run:

npm install @react-oauth/google

This package:
- Opens Google login popup
- Handles OAuth flow
- Returns Google access_token after success


3) WRAP APP WITH GOOGLEOAUTHPROVIDER
------------------------------------

In main.jsx / index.jsx:

- Wrap the App component with GoogleOAuthProvider
- Pass Google Client ID from env

Purpose:
- Makes Google OAuth available globally
- Injects Google client config into the app


4) CREATE GOOGLE AUTH BUTTON COMPONENT
--------------------------------------

Component responsibilities:

- Trigger Google popup using useGoogleLogin
- Handle success and error callbacks
- Receive Google access_token
- Send access_token to backend API
- Handle both signup and signin
- Store JWT returned by backend
- Update user state in Redux

API called from frontend:

POST /api/v1/auth/google


5) ROLE SELECTION POPUP (FOR GOOGLE SIGNUP)
-------------------------------------------

Google does NOT provide account type (Student / Instructor).

Recommended flow:
- If formtype === signup:
  - Show popup before Google login
  - Ask user to select role:
    - Student
    - Instructor
- Save selected role in state
- After selection, open Google popup
- Send selected role to backend along with access_token

For signin:
- Skip role popup
- Directly open Google login


6) BACKEND ROUTE FOR GOOGLE AUTH
-------------------------------

Create a single route:

POST /api/v1/auth/google

This route handles:
- Google signup
- Google signin


7) GOOGLE AUTH CONTROLLER (BACKEND LOGIC)
----------------------------------------

Controller steps:

1. Receive from frontend:
   - access_token
   - accountType (optional)
2. Call Google userinfo API using access_token
3. Extract user data:
   - email
   - full name
   - profile image
4. Check database for existing user by email
5. If user does NOT exist:
   - Split name into firstName and lastName
   - Create Profile document (if required by schema)
   - Create new User with:
     - firstName
     - lastName
     - email
     - image
     - accountType (default to Student if not provided)
     - authProvider = "google"
6. If user exists:
   - Skip user creation
7. Generate JWT token
8. Send response:
   - success
   - token
   - user object

Important:
- Password is NOT required for Google users
- Schema validation handles this using authProvider field


8) JWT & SESSION HANDLING
------------------------

- Backend generates JWT after Google auth
- Frontend:
  - Stores token in localStorage
  - Saves user data in Redux store
- Protected routes use JWT for authentication


9) IMPORTANT NOTES / COMMON MISTAKES
------------------------------------

- Google OAuth only verifies identity, not authorization
- Backend must always create / validate user
- Never trust frontend blindly for role
- Always redeploy after env variable changes
- Frontend env vars must start with VITE_
- Backend and frontend axios are separate installs
- Do not mix require/exports with import/export


10) COMPLETE FLOW SUMMARY
-------------------------

Click Google Button
↓
(If signup) Select account type
↓
Google popup opens
↓
Google returns access_token
↓
Frontend sends token to backend
↓
Backend fetches Google profile
↓
User created if new
↓
JWT generated
↓
User logged into app


------- END -------


------Mobile number verification via otp------

Mobile Number OTP Verification – Implementation Notes

1. Identified where phone verification fits
Phone number is part of user profile, not signup/login.
So OTP verification was added during profile update, not auth flow.
Goal was to verify phone only when user adds or changes it.

2. Created backend OTP APIs
Added separate APIs under profile routes for phone OTP.
One API sends OTP, another verifies OTP.
OTP is generated on backend and stored in Otp collection with type "phone".

3. Handling OTP verification on backend
While verifying OTP, latest OTP for that phone is checked.
If OTP matches, phone number is saved in user profile.
OTP entry is deleted after successful verification.

4. OTP delivery during development
Initially OTP was printed in backend console for testing.
SMS integration was explored but blocked due to DLT / provider setup.
Final decision was to send OTP to user email for now.

5. Integrated email OTP sending
Reused existing email sender utility.
Same phone OTP is sent to user email when phone verification is triggered.
No frontend changes were needed for delivery switch.

6. Frontend profile form changes
Save button is kept enabled, OTP flow is handled inside submit.
On submit, phone number is compared with previously saved value.
If phone is new or changed, OTP API is called and modal is opened.

7. OTP modal handling
OTP modal opens only when phone verification is required.
User enters OTP and clicks verify.
On success, modal closes and profile update continues.

8. Handling form and state issues
Used react-hook-form watch instead of manual onChange.
Fixed issue where tempPhone was not being stored correctly.
Handled async user data so isPhoneVerified does not stay undefined.

9. Final flow check
Adding phone first time triggers OTP.
Changing phone triggers OTP again.
Updating bio or name does not trigger OTP.
Profile update happens only after successful OTP verification.