Enhanced GitHub Authentication Details in README for Improved Clarity and Usability

README.md

@@ -119,23 +119,26 @@ REACT_APP_FIREBASE_STORAGE_BUCKET=""
 REACT_APP_FIREBASE_MESSAGING_SENDER_ID=""
 REACT_APP_FIREBASE_APP_ID=""
 ```
-## GitHub Authentication Setup
+## GitHub Authentication Configuration
 
 To enable GitHub authentication for the Custom Code Editor, follow these steps:
 
 1. **Enable GitHub Authentication in Firebase Console:**
    - Go to your Firebase project in the [Firebase Console](https://firebase.google.com/).
    - Navigate to **Authentication** > **Sign-in method**.
    - Enable **GitHub** as a sign-in provider.
-   - In the GitHub configuration, click **Add app**, which will take you to the GitHub Developer settings to register a new OAuth application.
+   - Note the **Authorization Callback URL** provided by Firebase, as you will need this for your GitHub OAuth App.
 
 2. **Register a New OAuth Application on GitHub:**
    - Go to your GitHub [Developer Settings](https://github.com/settings/developers).
    - Click on **OAuth Apps** and select **New OAuth App**.
    - Fill in the application details:
      - **Application Name**: Custom Code Editor
-     - **Homepage URL**: ( `http://localhost:3000` for local development)
-     - **Authorization Callback URL**: ( `http://localhost:3000` for local development)
+     - **Homepage URL**: 
+       - For **local development**, use `http://localhost:3000`
+       - For **production deployment**, use your public URL (e.g., `https://custom-code-editor.vercel.app/`)
+     - **Authorization Callback URL**: 
+       - Use the **Authorization Callback URL** provided by Firebase.
    - Click **Register Application**.
 
 3. **Retrieve GitHub Client ID and Client Secret:**

package.json

@@ -11,7 +11,7 @@
     "@mui/styled-engine-sc": "^6.0.0-alpha.18",
     "@snaddyvitch-dispenser/react-router-sitemap": "^1.2.6",
     "CustomCodeEditor": "file:",
-    "firebase": "^10.14.0",
+    "firebase": "^10.14.1",
     "monaco-themes": "^0.4.4",
     "notistack": "^3.0.1",
     "react": "^18.3.1",

src/components/js/Stars.js

@@ -25,7 +25,7 @@ const Stars = () => {
         <div style={styles.stars}>
           <FaGithub fontSize={32} />
           <div style={styles.starsCount}>
-            <span>Star on GitHub</span>
+            <span>Stars on GitHub</span>
             <span style={{ color: "gold" }}>
               {repositoryStarts} {repositoryStarts > 1 ? "stars" : "star"}{" "}
               <FaStar style={styles.star} color='gold' />

src/hooks/useGetStars.js

@@ -21,7 +21,7 @@ export const useGetStars = () => {
         setRepositoryStars(result.stargazers_count);
         setFetchState(initialFetchState);
       } else
-        throw Error("Error happend in getting repository stars, retry again!.");
+        throw Error("Error happened in getting repository stars, retry again!.");
     } catch (error) {
       setFetchState({
         ...initialFetchState,