notes

1] Activate emmet: settings => search emmet => include languages => add item => javascript : javascriptreact => add => save

2] after running npm eun dev if you cant see JIT engine enable msg then goto tailwind.config.js file and save that file

2] If using external links for images whitelist those links in next.onfig.js file otherwise it will give an error

3] As I am usingg fakestore for api, this is whitelisted in next.config file

4] Creating custom tailwind css classes:
    goto global.css => @layer components{ .classname { @apply styling here} }

5] tailwind css is mobile first so all the styles applied are by default for mobile view

6] Banner: https://www.npmjs.com/package/react-responsive-carousel

7] Facestore api: https://fakestoreapi.com/

8]  {products.map((product) => (
        <p>{product.title}</p>
      ))} 

      After destructuring:
     {products.map(({id, title}) => (
        <p>{title}</p>
      ))} 

9] react-currency-formatter: https://www.npmjs.com/package/react-currency-formatter

10] NextAuth: https://next-auth.js.org/getting-started/example
      add folder called auth inside api and create a file named [...nextauth].js inside auth folder

11] Create a folder named api to store api endpoints [Next.js feature] 

12] process.env [environmental variables] used so that others cant see your creds

13] After setting up firebase:
      Steps: 
            - click on sign in with google
            - Goto googles developers console https://console.cloud.google.com/apis/
            - select project => credentials => client => add localhost 3000
            - In Authorized urls add URL given in error: http://localhost:3000/api/auth/callback/google 
            - Click save

14] After implementing nextauth google authentication:
      - It will give an error on production build when you try to signin using google etc. 
      - To resolve this error we need to add client id in environment variables
      - As environment variables are local to our machine hence we need to upload them to vercel also
      - go to project => settings => environment variable => open env.local file in project => copy GOOGLE_ID place it in Name and value in value => Click add => follow same for GOOGLE_SECRET
      - go to latest build in vercel (deployments) and click on redeploy
      - Again you will get error while signing in through google i.e. developers error
      - Go to developer console and follow same steps you followed for whitelisting localhost instead here whitelist vercel deployed URL in Authorized redirect URIs and add vercel URL to JS origins

15] Stripe Checkout: https://stripe.com/docs/payments/accept-a-payment
      -Steps:
            - npm install stripe
            - npm install @stripe/stripe-js
            - Goto stripe's offiial website and create a new account
            - developers => API keys => copy publishable key => env.local => paste publick key
            - IMP: only for stripe publick key goto next.config.js and add 
            env: {
                  stripe_public_key: process.env.STRIPE_PUBLIC_KEY
                 }
            - Inside api folder create new file create-checkout-session.js this is backend endpoint
            - In env.local change HOST to deployment URL 
            - Stripe allowed countries: https://www.nationsonline.org/oneworld/country_code_list.htm
            - Setting shipping rates: developer => products => shipping rates => new => fill info => save => copy ID => goto create-checkout-session.js => add shipping_rates
            - Set up an account name in stripe: IMP

16] Webhooks:
      - Stripe cli: https://stripe.com/docs/stripe-cli
      - Download CLI: https://github.com/stripe/stripe-cli/releases/tag/v1.7.0
      - Open that unzipped folder in cmd
      - follow: https://stripe.com/docs/stripe-cli#login-account
      - After logging run: stripe listen --forward-to localhost:3000/api/webhook in cmd
      - Copy secret => goto env.local => past STRIPE_SIGNING_SECRET
      - Inside api create webhook.js
      - Install micro: npm install micro
      - Install firebase-admin: npm install firebase-admin
      - Goto firebase console => project => project settings => service accounts => generate new private key => download => paste file in project folder => rename (optional)
      - Connecting webhooks webhook.js: https://stripe.com/docs/connect/webhooks
      - After implementing again run stripe listen --forward-to localhost:3000/api/webhook in cmd (make sure secret is same) and after clicking checkout you will see intent 
      - Dont worry if you get heraders error in cmd

17] success:
      - Build a static success page which will redirect to orders

18] Orders:
      - Get info from stripe and firebase
      - setup firebase app in firebase.js file

19] After completion:
      - Add all keys to vercel => settings => environment variables
      - Go to vercel url => grab URL (after clicking on sign in with google) => https://amazon-clone-two-jet.vercel.app/
      - Again goto environment variables => Name is NEXTAUTH_URL => value is above URL 
      - Again environment variables => Name is HOSt => Value is domain name prod: https://amazon-clone-two-jet.vercel.app/
      - STRIPE_SIGNING_SECRET => goto stripe => developers => webhooks => add endpoints => vercel url => https://amazon-clone-two-jet.vercel.app/api/webhook => select event: checkout.session.completed => add endpoints => signing secret

20] SOLUTION to stripe-checkout not working on deployed version but works on localhost. Sonny Sangha
So the issue is because of the domain name (solution is the same for everyone who faces this particular error).
1. So first change your NEXTAUTH_URL and HOST url in environment variables on vercel to the short version in my case -> https://amazon-clone-two-jet.vercel.app
(DON'T ADD THE TRAILING SLASH IN THE URL EG: "https://amazon-clone-two-jet.vercel.app/")
You can find the short version by going to the dashboard by clicking on the triangle icon on vercel in header -> select your project and click visit. From there you can copy the url.
2. After doing this visit the short version of the url and the google login will freak out. Change the redirect url and the other url to the same in step 1 (without the trailing /) and follow the instructions that google give regarding url.
3. Change the url in the stripe dashboard to the same in step 1. it should look something like this -> https://amazon-clone-two-jet.vercel.app/api/webhook
4. Remove the long ugly version that is similar to -> https://amazon-clone-jdt4n165n-viraaaj.vercel.app from everywhere mentioned above.
-This ugly version of url changes with every redeployment of the app or via github.
5.Now once all that is done. Go to the deployments section on vercel and on the latest version -> click on the 3 dots -> Do Promote to production. That should redeploy the app.
6. Now once the redeployment is done go to dashboard and navigate to the short url not the long version that is given when you redeploy.