lint and format fixes

.eslintrc.json

@@ -0,0 +1,78 @@
+{
+  "extends": ["next/core-web-vitals", "prettier"],
+  "root": true,
+  "parserOptions": {
+    "ecmaVersion": 2023,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "env": {
+    "browser": true,
+    "node": true,
+    "es6": true
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
+  "rules": {
+    "quotes": ["warn", "double"],
+    "semi": ["warn", "never"],
+    "indent": ["warn", 2],
+    "comma-dangle": ["error", "never"],
+    "react/react-in-jsx-scope": "off",
+    "react/prop-types": "off",
+    "react/jsx-filename-extension": ["warn", { "extensions": [".tsx", ".jsx"] }],
+    "react/jsx-props-no-spreading": "off",
+    "react/jsx-boolean-value": ["error", "never"],
+    "react/self-closing-comp": ["error", { "component": true, "html": true }],
+    "react/jsx-max-props-per-line": ["error", { "maximum": 1, "when": "multiline" }],
+    "no-unused-vars": [
+      "warn",
+      {
+        "argsIgnorePattern": "^_",
+        "varsIgnorePattern": "^_",
+        "caughtErrorsIgnorePattern": "^_"
+      }
+    ],
+    "no-console": [
+      "warn",
+      {
+        "allow": ["warn", "error"]
+      }
+    ],
+    "@next/next/no-html-link-for-pages": "error",
+    "@next/next/no-img-element": "warn",
+    "@next/next/no-sync-scripts": "error",
+    "import/order": [
+      "error",
+      {
+        "groups": ["builtin", "external", "internal", "parent", "sibling", "index"],
+        "newlines-between": "always",
+        "alphabetize": { "order": "asc" }
+      }
+    ],
+    "sort-imports": [
+      "error",
+      {
+        "ignoreCase": true,
+        "ignoreDeclarationSort": true,
+        "ignoreMemberSort": false
+      }
+    ],
+    "max-len": ["warn", { "code": 100, "ignoreStrings": true, "ignoreTemplateLiterals": true }],
+    "no-multiple-empty-lines": ["error", { "max": 1, "maxEOF": 0 }],
+    "object-curly-spacing": ["error", "always"],
+    "array-bracket-spacing": ["error", "never"],
+    "eol-last": ["error", "always"],
+    "arrow-parens": ["error", "always"],
+    "no-trailing-spaces": "error",
+    "no-var": "error",
+    "prefer-const": "error",
+    "prefer-template": "error",
+    "no-nested-ternary": "error"
+  }
+}

.github/workflows/node.js.yml

@@ -89,4 +89,4 @@ jobs:
 
         with:
           push: true
-          tags: ${{ steps.meta.outputs.tags }}
+          tags: ${{ steps.meta.outputs.tags }}

.gitignore

@@ -19,6 +19,7 @@
 # misc
 .DS_Store
 *.pem
+/.vscode/
 
 # debug
 npm-debug.log*

.prettierignore

@@ -0,0 +1,5 @@
+node_modules
+.next
+build
+dist
+public

.prettierrc.json

@@ -0,0 +1,10 @@
+{
+  "semi": false,
+  "trailingComma": "none",
+  "singleQuote": false,
+  "printWidth": 100,
+  "tabWidth": 2,
+  "useTabs": false,
+  "bracketSpacing": true,
+  "endOfLine": "auto"
+}

README.md

@@ -1,4 +1,5 @@
 # Banana Math :)
+
 We're creating a user-friendly website for mental math practice that's all about simplicity and speed. Our mission? To make math practice effortless and enjoyable. We're carefully building our tech stack, prioritizing quality over quantity at every step. Testing is a big part of our process to ensure everything runs smoothly. With a strong focus on user experience and an agile approach, we're excited to bring you a top-notch math practice platform. Ready to dive in and crunch some numbers with us?
 
 Stage 1: Basic Web app with calculation generated client-side
@@ -15,17 +16,20 @@ Stage 5: Ads and Subscription for upkeep cost, launch site!
 
 Have a look at the .env.sample file and follow the steps in the link to create a .env.local
 
-Local compiling 
+Local compiling
+
 ```
 brew install npm
 npm install next
 npm run dev
 ```
 
 Local compiling using docker
+
 ```
 docker build . -t banana-math
 ```
+
 ```
 docker run -d -p 3000:3000 banana-math
 ```

app/attempts/page.tsx

@@ -1,56 +1,73 @@
-import { createClient } from "@/utils/supabase/server";
-import { redirect } from "next/navigation";
+import { redirect } from "next/navigation"
+
+import { createClient } from "@/utils/supabase/server"
 
 export default async function AttemptHistory() {
-  const supabase = createClient();
+  const supabase = createClient()
 
   const {
-    data: { user },
-  } = await supabase.auth.getUser();
+    data: { user }
+  } = await supabase.auth.getUser()
 
   //console.log("User:", user?.id);
 
   if (!user) {
-    return redirect("/login");
+    return redirect("/login")
   }
 
-  let { data: entries, error } = await supabase
-  .from('entries')
-  .select('*')
-  .eq('user_id', user?.id)
-  .order('created_at', { ascending: false })
+  const { data: entries, error: _error } = await supabase
+    .from("entries")
+    .select("*")
+    .eq("user_id", user?.id)
+    .order("created_at", { ascending: false })
 
   //console.log("Entries:",entries, error);
 
-    return (
-        <div className="flex flex-col items-center justify-center min-h-screen py-2">
-            <h1 className="text-2xl font-bold mb-5">Attempts</h1>
-            <div className="overflow-x-auto">
-                <div className="align-middle inline-block min-w-full shadow overflow-hidden sm:rounded-lg border-b border-gray-200">
-                    <table className="min-w-full">
-                        <thead>
-                            <tr>
-                                <th className="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-slate-800 uppercase tracking-wider">Rank</th>
-                                <th className="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-slate-800 uppercase tracking-wider">User ID</th>
-                                <th className="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-slate-800 uppercase tracking-wider">Score</th>
-                                <th className="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-slate-800 uppercase tracking-wider">Date</th>
-                            </tr>
-                        </thead>
-                        <tbody className="bg-white">
-                            {entries?.map((entry, index) => {
-                                return (
-                                    <tr key={index}>
-                                        <td className="px-6 py-4 whitespace-no-wrap border-b text-stone-900 border-gray-200">{index + 1}</td>
-                                        <td className="px-6 py-4 whitespace-no-wrap border-b text-stone-900 border-gray-200">{user.email}</td>
-                                        <td className="px-6 py-4 whitespace-no-wrap border-b text-stone-900 border-gray-200">{entry.percentage}%</td>
-                                        <td className="px-6 py-4 whitespace-no-wrap border-b text-stone-900 border-gray-200">{new Date(entry.created_at).toLocaleDateString()}</td>
-                                    </tr>
-                                );
-                            })}
-                        </tbody>
-                    </table>
-                </div>
-            </div>
+  return (
+    <div className="flex flex-col items-center justify-center min-h-screen py-2">
+      <h1 className="text-2xl font-bold mb-5">Attempts</h1>
+      <div className="overflow-x-auto">
+        <div className="align-middle inline-block min-w-full shadow overflow-hidden sm:rounded-lg border-b border-gray-200">
+          <table className="min-w-full">
+            <thead>
+              <tr>
+                <th className="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-slate-800 uppercase tracking-wider">
+                  Rank
+                </th>
+                <th className="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-slate-800 uppercase tracking-wider">
+                  User ID
+                </th>
+                <th className="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-slate-800 uppercase tracking-wider">
+                  Score
+                </th>
+                <th className="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-slate-800 uppercase tracking-wider">
+                  Date
+                </th>
+              </tr>
+            </thead>
+            <tbody className="bg-white">
+              {entries?.map((entry, index) => {
+                return (
+                  <tr key={index}>
+                    <td className="px-6 py-4 whitespace-no-wrap border-b text-stone-900 border-gray-200">
+                      {index + 1}
+                    </td>
+                    <td className="px-6 py-4 whitespace-no-wrap border-b text-stone-900 border-gray-200">
+                      {user.email}
+                    </td>
+                    <td className="px-6 py-4 whitespace-no-wrap border-b text-stone-900 border-gray-200">
+                      {entry.percentage}%
+                    </td>
+                    <td className="px-6 py-4 whitespace-no-wrap border-b text-stone-900 border-gray-200">
+                      {new Date(entry.created_at).toLocaleDateString()}
+                    </td>
+                  </tr>
+                )
+              })}
+            </tbody>
+          </table>
         </div>
-    );
+      </div>
+    </div>
+  )
 }

app/auth/callback/route.ts

@@ -1,19 +1,20 @@
-import { createClient } from "@/utils/supabase/server";
-import { NextResponse } from "next/server";
+import { NextResponse } from "next/server"
+
+import { createClient } from "@/utils/supabase/server"
 
 export async function GET(request: Request) {
   // The `/auth/callback` route is required for the server-side auth flow implemented
   // by the SSR package. It exchanges an auth code for the user's session.
   // https://supabase.com/docs/guides/auth/server-side/nextjs
-  const requestUrl = new URL(request.url);
-  const code = requestUrl.searchParams.get("code");
-  const origin = requestUrl.origin;
+  const requestUrl = new URL(request.url)
+  const code = requestUrl.searchParams.get("code")
+  const origin = requestUrl.origin
 
   if (code) {
-    const supabase = createClient();
-    await supabase.auth.exchangeCodeForSession(code);
+    const supabase = createClient()
+    await supabase.auth.exchangeCodeForSession(code)
   }
 
   // URL to redirect to after sign up process completes
-  return NextResponse.redirect(`${origin}/protected`);
+  return NextResponse.redirect(`${origin}/protected`)
 }

app/layout.tsx

@@ -1,28 +1,22 @@
-import { GeistSans } from "geist/font/sans";
-import "./globals.css";
+import { GeistSans } from "geist/font/sans"
+import "./globals.css"
 
 const defaultUrl = process.env.VERCEL_URL
   ? `https://${process.env.VERCEL_URL}`
-  : "http://localhost:3000";
+  : "http://localhost:3000"
 
 export const metadata = {
   metadataBase: new URL(defaultUrl),
   title: "Next.js and Supabase Starter Kit",
-  description: "The fastest way to build apps with Next.js and Supabase",
-};
+  description: "The fastest way to build apps with Next.js and Supabase"
+}
 
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
+export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en" className={GeistSans.className}>
       <body className="bg-background text-foreground">
-        <main className="min-h-screen flex flex-col items-center">
-          {children}
-        </main>
+        <main className="min-h-screen flex flex-col items-center">{children}</main>
       </body>
     </html>
-  );
+  )
 }