Chore: Introduce Loading Skeletons, GitHub Workflow & Cypress Tests

.env.example

@@ -3,4 +3,5 @@ GOOGLE_SECRET_ID=
 GOOGLE_CLIENT_ID=
 NEXTAUTH_SECRET=
 NEXTAUTH_URL=
-MONGODB_URI=
+MONGODB_URI=
+GOOGLE_SITE_VERIFICATION_ID=

.github/workflows/preview.yaml

@@ -0,0 +1,60 @@
+name: AWS R/Start Labs Preview Deployment
+env:
+  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
+on:
+  push:
+    branches-ignore:
+      - main
+jobs:
+  Format:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+      - name: Use Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: 18.17.0
+      - name: Install Dependencies
+        run: npm install
+      - name: Code Format
+        run: npm run format
+
+  Tests:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+      - name: Use Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: 18.17.0
+      - name: Clear npm cache
+        run: npm cache clean -f
+      - name: Delete node_modules and package-lock.json
+        run: |
+          rm -rf node_modules
+          rm package-lock.json
+      # - name: Install Dependencies
+      #   run: npm install
+      # - name: Cypress e2e tests 🧪
+      #   uses: cypress-io/[email protected]
+      #   with:
+      #     start: npm run dev
+      #     wait-on: "http://localhost:3000"
+      #     browser: electron
+      #     config-file: cypress.config.ts
+
+  Deploy-Preview:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Install Vercel CLI
+        run: npm install --global vercel@latest
+      - name: Pull Vercel Environment Information
+        run: vercel pull --yes --environment=preview --token=${{ secrets.VERCEL_TOKEN }}
+      - name: Build Project Artifacts
+        run: vercel build --token=${{ secrets.VERCEL_TOKEN }}
+      - name: Deploy Project Artifacts to Vercel
+        run: vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }}

.github/workflows/production.yaml

@@ -0,0 +1,60 @@
+name: AWS R/Start Labs Production Deployment
+env:
+  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
+on:
+  push:
+    branches:
+      - main
+jobs:
+  Format:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+      - name: Use Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: 18.17.0
+      - name: Install Dependencies
+        run: npm install
+      - name: Code Format
+        run: npm run format
+
+  Tests:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+      - name: Use Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: 18.17.0
+      - name: Clear npm cache
+        run: npm cache clean -f
+      - name: Delete node_modules and package-lock.json
+        run: |
+          rm -rf node_modules
+          rm package-lock.json
+      # - name: Install Dependencies
+      #   run: npm install
+      # - name: Cypress e2e tests 🧪
+      #   uses: cypress-io/[email protected]
+      #   with:
+      #     start: npm run dev
+      #     wait-on: "http://localhost:3000"
+      #     browser: electron
+      #     config-file: cypress.config.ts
+
+  Deploy-Production:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Install Vercel CLI
+        run: npm install --global vercel@latest
+      - name: Pull Vercel Environment Information
+        run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}
+      - name: Build Project Artifacts
+        run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}
+      - name: Deploy Project Artifacts to Vercel
+        run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}

.gitignore

@@ -27,6 +27,7 @@ yarn-error.log*
 
 # local env files
 .env*.local
+*.env*.json
 
 # vercel
 .vercel

.prettierrc

@@ -0,0 +1,11 @@
+{
+  "plugins": [
+    "prettier-plugin-organize-imports",
+    "prettier-plugin-tailwindcss"
+  ],
+  "trailingComma": "all",
+  "semi": false,
+  "singleQuote": false,
+  "useTabs": false,
+  "tabWidth": 2
+}

app/api/labs/[id]/route.ts

@@ -1,6 +1,6 @@
-import { NextResponse } from "next/server"
 import Lab from "@/models/Lab"
 import { LabRequestType } from "@/types/Requests"
+import { NextResponse } from "next/server"
 
 export async function PUT(
   req: Request,

app/globals.css

@@ -33,9 +33,9 @@ body {
 }
 
 h1 {
-  @apply text-2xl sm:text-4xl font-bold mt-4 mb-4 dark:text-white text-gray-500;
+  @apply mb-4 mt-4 text-2xl font-bold text-gray-500 sm:text-4xl dark:text-white;
 }
 
 h2 {
-  @apply sm:text-xl text-lg mt-2 mb-2;
+  @apply mb-2 mt-2 text-lg sm:text-xl;
 }

app/home/page.tsx

@@ -1,10 +1,10 @@
 "use client"
 
+import { UserLabs } from "@/components"
+import { useUserLabsData } from "@/hooks"
+import { ButtonStatusType } from "@/types/Common"
 import { signOut, useSession } from "next-auth/react"
 import { useState } from "react"
-import { ButtonStatusType } from "@/types/Common"
-import { useUserLabsData } from "@/hooks"
-import { UserLabs } from "@/components"
 
 const HomePage = () => {
   const { data: userData } = useSession()
@@ -32,14 +32,15 @@ const HomePage = () => {
   }
 
   return (
-    <div className="sm:w-[500px] m-auto mt-8 p-4">
+    <div className="m-auto mt-8 p-4 sm:w-[500px]">
       <div className="flex items-center justify-between">
         <div>
-          <h1>AWS r/Start Labs</h1>
+          <h1 data-test="aws-rstart-title">AWS r/Start Labs</h1>
         </div>
         <div>
           <button
-            className="p-1 px-4 rounded hover:bg-gray-700 disabled:cursor-not-allowed disabled:opacity-50"
+            data-test="sign-out"
+            className="rounded p-1 px-4 hover:bg-gray-700 disabled:cursor-not-allowed disabled:opacity-50"
             disabled={buttonStatus.status === "submitting"}
             onClick={() => handleSignOut()}
           >

app/layout.tsx

@@ -1,20 +1,20 @@
-import type { Metadata } from "next";
-import { Inter } from "next/font/google";
-import "./globals.css";
+import { metaDataOptions } from "@/lib/metadata-options"
+import type { Metadata } from "next"
+import { Inter } from "next/font/google"
+import "./globals.css"
 
-import { Analytics } from "@vercel/analytics/react";
+import { Analytics } from "@vercel/analytics/react"
 
-const inter = Inter({ subsets: ["latin"] });
+const inter = Inter({ subsets: ["latin"] })
 
 export const metadata: Metadata = {
-  title: "Track AWS r/Start Labs",
-  description: "Keep Track Of AWS r/Start Labs",
-};
+  ...metaDataOptions,
+}
 
 export default function RootLayout({
   children,
 }: Readonly<{
-  children: React.ReactNode;
+  children: React.ReactNode
 }>) {
   return (
     <html lang="en">
@@ -23,5 +23,5 @@ export default function RootLayout({
         <Analytics />
       </body>
     </html>
-  );
+  )
 }

app/page.tsx

@@ -1,10 +1,11 @@
 "use client"
 
+import { GoogleIcon } from "@/components"
+import { appTitle } from "@/lib/const"
+import { ButtonStatusType } from "@/types/Common"
 import { signIn } from "next-auth/react"
+import Image from "next/image"
 import { useState } from "react"
-import { ButtonStatusType } from "@/types/Common"
-import { GoogleIcon } from "@/components"
-import toast from "react-hot-toast"
 
 const LoginPage = () => {
   const [buttonStatus, setButtonStatus] = useState<ButtonStatusType>({
@@ -28,14 +29,23 @@ const LoginPage = () => {
   return (
     <main className="flex min-h-screen flex-col items-center justify-center">
       <div>
+        <div className="mb-10 flex items-center justify-center">
+          <Image
+            alt={appTitle}
+            src="/aws-restart-logo.png"
+            width={120}
+            height={50}
+          />
+        </div>
         <div className="mb-4">
           <h2>Track AWS r/Start Labs 👍🏽</h2>
         </div>
         <div>
           <button
+            data-test="sign-in-with-google"
             onClick={() => handleSignIn()}
             disabled={buttonStatus.status === "submitting"}
-            className="w-full rounded-md border bg-white dark:bg-black dark:text-white p-4 text-center text-sm text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-900 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+            className="w-full rounded-md border bg-white p-4 text-center text-sm text-gray-500 hover:bg-gray-100 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:bg-black dark:text-white dark:hover:bg-gray-900"
           >
             <GoogleIcon className="mr-2 inline size-5" />
             {buttonStatus.status === "submitting"

components/UI/Divider.tsx

@@ -1,5 +1,5 @@
 const Divider = () => {
-  return <hr className="dark:bg-gray-500 bg-white" />
+  return <hr className="bg-white dark:bg-gray-500" />
 }
 
 export default Divider

components/UI/Lab.tsx

@@ -1,10 +1,10 @@
 import type { LabType } from "@/lib/labs"
-import toast from "react-hot-toast"
-import { CheckMark } from ".."
-import { useState, useEffect, ChangeEvent } from "react"
-import { ErrorResponse, LabResponseType } from "@/types/Responses"
 import { saveLab, updateLab } from "@/service/requests"
 import { LabRequestType } from "@/types/Requests"
+import { ErrorResponse, LabResponseType } from "@/types/Responses"
+import { ChangeEvent, useEffect, useState } from "react"
+import toast from "react-hot-toast"
+import { CheckMark } from ".."
 
 interface LabProps {
   email?: string | null
@@ -92,22 +92,23 @@ const Lab = ({ email, lab, data, mutate }: LabProps) => {
   return (
     <div className="flex items-center">
       <label
-        className="relative flex items-center p-3 rounded-full cursor-pointer"
+        className="relative flex cursor-pointer items-center rounded-full p-3"
         htmlFor={lab.name}
       >
         <input
+          data-test={`lab-checkbox-${lab.labId}`}
           type="checkbox"
-          className="before:content[''] peer relative h-5 w-5 cursor-pointer appearance-none rounded-md border border-blue-gray-200 transition-all before:absolute before:top-2/4 before:left-2/4 before:block before:h-12 before:w-12 before:-translate-y-2/4 before:-translate-x-2/4 before:rounded-full before:bg-blue-gray-500 before:opacity-0 before:transition-opacity checked:border-gray-900 checked:bg-blue-700 checked:before:bg-gray-900 dark:checked:border-gray-200 dark:checked:before:bg-gray-200 hover:before:opacity-10"
+          className="before:content[''] border-blue-gray-200 before:bg-blue-gray-500 peer relative h-5 w-5 cursor-pointer appearance-none rounded-md border transition-all before:absolute before:left-2/4 before:top-2/4 before:block before:h-12 before:w-12 before:-translate-x-2/4 before:-translate-y-2/4 before:rounded-full before:opacity-0 before:transition-opacity checked:border-gray-900 checked:bg-blue-700 checked:before:bg-gray-900 hover:before:opacity-10 dark:checked:border-gray-200 dark:checked:before:bg-gray-200"
           id={lab.name}
           onChange={(e) => handleTrackLab({ event: e, lab })}
           checked={completed}
         />
-        <span className="absolute text-white transition-opacity opacity-0 pointer-events-none top-2/4 left-2/4 -translate-y-2/4 -translate-x-2/4 peer-checked:opacity-100">
+        <span className="pointer-events-none absolute left-2/4 top-2/4 -translate-x-2/4 -translate-y-2/4 text-white opacity-0 transition-opacity peer-checked:opacity-100">
           <CheckMark />
         </span>
       </label>
       <label
-        className="mt-px font-light text-gray-200 cursor-pointer select-none"
+        className="mt-px cursor-pointer select-none font-light text-black dark:text-gray-200"
         htmlFor={lab.name}
       >
         {lab.name}

components/UI/Loading/LoadingLabs.tsx

@@ -0,0 +1,19 @@
+const LoadingLabs = () => {
+  const loadingItems = Array.from({ length: 20 }, () => 1)
+  return (
+    <div className="flex animate-pulse">
+      <div className="mt-2 w-full">
+        <ul className="mt-5 space-y-3">
+          {loadingItems.map((_, idx) => (
+            <li
+              key={idx}
+              className="h-10 w-full rounded bg-gray-200 dark:bg-gray-700"
+            ></li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  )
+}
+
+export default LoadingLabs

components/UI/Loading/LoadingLogo.tsx

@@ -0,0 +1,12 @@
+import { appTitle } from "@/lib/const"
+import Image from "next/image"
+
+const LoadingLogo = () =>{
+    return (
+        <div className="h-screen flex items-center justify-center animate-bounce">
+            <Image alt={appTitle} src="/aws-restart-logo.png" width={120} height={50} />
+        </div>
+    )
+}
+
+export default LoadingLogo

components/UI/Loading/index.ts

@@ -0,0 +1,4 @@
+import LoadingLabs from "./LoadingLabs"
+import LoadingLogo from "./LoadingLogo"
+
+export { LoadingLabs, LoadingLogo }