Add login and merge

eslint.config.mjs

@@ -1,11 +1,19 @@
-import pluginJs from '@eslint/js'
 import globals from 'globals'
+import pluginJs from '@eslint/js'
 import tseslint from 'typescript-eslint'
 
 export default [
     { files: ['**/*.{js,mjs,cjs,ts}'] },
     { languageOptions: { globals: globals.browser } },
     pluginJs.configs.recommended,
     ...tseslint.configs.recommended,
-    { ignores: ['**/dist/*', '**/node_modules/*', '**/jest.config.{ts,js}'] },
+    {
+        ignores: [
+            '**/dist/*',
+            '**/node_modules/*',
+            '**/jest.config.{ts,js}',
+            '**/tailwind.config.{js,ts}',
+            '**/postcss.config.{mjs,js}',
+        ],
+    },
 ]

frontend/.eslintrc.json

@@ -1,3 +1,3 @@
 {
-  "extends": ["next/core-web-vitals", "next/typescript"]
+    "extends": ["next/core-web-vitals", "next/typescript"]
 }

frontend/__tests__/page.test.tsx

@@ -1,12 +1,14 @@
 import '@testing-library/jest-dom'
+
 import { render, screen } from '@testing-library/react'
+
 import Page from '../app/page'
 
 describe('Page', () => {
-    it('renders the main element', () => {
+    it('renders the logo', () => {
         render(<Page />)
 
-        const page = screen.getByRole('main')
+        const page = screen.getByRole('img')
 
         expect(page).toBeInTheDocument()
     })

frontend/app/components/Signup.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import { Logo } from './Logo'
-import { useToast } from '@/components/ui/toast/use-toast'
+import { useToast } from '@/app/components/ui/toast/use-toast'
 
 export default function Signup() {
     const [email, setEmail] = useState('')

frontend/app/globals.css

@@ -11,17 +11,22 @@ input::placeholder {
     --foreground: #171717;
 }
 
-@media (prefers-color-scheme: dark) {
+@media (prefers-color-scheme: light) {
     :root {
         --background: #0a0a0a;
         --foreground: #ededed;
     }
 }
 
+pre,
+code {
+    font-family: var(--font-geist-mono);
+}
+
 body {
     color: var(--foreground);
     background: var(--background);
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: var(--font-geist-sans);
 }
 
 @layer utilities {

frontend/app/home/page.tsx

@@ -0,0 +1,55 @@
+import { NavBar } from '@/components/navbar'
+import { NewSession } from '@/components/dashboard/new-session'
+import { ProgressCard } from '@/components/dashboard/progress-card'
+import { RecentSessions } from '@/components/dashboard/recent-sessions'
+
+export default function Home() {
+    const progressData = [
+        {
+            difficulty: 'Easy',
+            score: '10/20',
+            progress: 50,
+            indicatorColor: 'bg-green-700',
+            backgroundColor: 'bg-green-500',
+        },
+        {
+            difficulty: 'Medium',
+            score: '15/27',
+            progress: 60,
+            indicatorColor: 'bg-amber-500',
+            backgroundColor: 'bg-amber-300',
+        },
+        {
+            difficulty: 'Hard',
+            score: '5/19',
+            progress: 20,
+            indicatorColor: 'bg-red-500',
+            backgroundColor: 'bg-red-400',
+        },
+    ]
+
+    return (
+        <div>
+            <NavBar />
+            <div className="mx-8 my-4">
+                <h2 className="text-xl font-bold my-6 mx-2">Welcome Back, Lynn</h2>
+                <div className="flex flex-row justify-evenly">
+                    {progressData.map(({ difficulty, score, progress, indicatorColor, backgroundColor }, index) => (
+                        <ProgressCard
+                            key={index}
+                            difficulty={difficulty}
+                            score={score}
+                            progress={progress}
+                            indicatorColor={indicatorColor}
+                            backgroundColor={backgroundColor}
+                        />
+                    ))}
+                </div>
+                <div className="flex flex-row justify-between my-4 mx-2">
+                    <NewSession />
+                    <RecentSessions />
+                </div>
+            </div>
+        </div>
+    )
+}

frontend/app/layout.tsx

@@ -1,4 +1,3 @@
-import type { Metadata } from 'next'
 import localFont from 'next/font/local'
 import './globals.css'
 import Toaster from './components/ui/toast/toaster'
@@ -8,17 +7,13 @@ const geistSans = localFont({
     variable: '--font-geist-sans',
     weight: '100 900',
 })
+
 const geistMono = localFont({
     src: './fonts/GeistMonoVF.woff',
     variable: '--font-geist-mono',
     weight: '100 900',
 })
 
-export const metadata: Metadata = {
-    title: 'Create Next App',
-    description: 'Generated by create next app',
-}
-
 export default function RootLayout({
     children,
 }: Readonly<{

frontend/components.json

@@ -1,20 +1,20 @@
 {
-  "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "new-york",
-  "rsc": true,
-  "tsx": true,
-  "tailwind": {
-    "config": "tailwind.config.js",
-    "css": "app/globals.css",
-    "baseColor": "zinc",
-    "cssVariables": true,
-    "prefix": ""
-  },
-  "aliases": {
-    "components": "@/components",
-    "utils": "@/lib/utils",
-    "ui": "@/components/ui",
-    "lib": "@/lib",
-    "hooks": "@/hooks"
-  }
-}
+    "$schema": "https://ui.shadcn.com/schema.json",
+    "style": "new-york",
+    "rsc": true,
+    "tsx": true,
+    "tailwind": {
+        "config": "tailwind.config.js",
+        "css": "app/globals.css",
+        "baseColor": "zinc",
+        "cssVariables": true,
+        "prefix": ""
+    },
+    "aliases": {
+        "components": "@/components",
+        "utils": "@/lib/utils",
+        "ui": "@/components/ui",
+        "lib": "@/lib",
+        "hooks": "@/hooks"
+    }
+}

frontend/components/dashboard/new-session.tsx

@@ -0,0 +1,80 @@
+'use client'
+
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+
+import { Button } from '@/components/ui/button'
+
+export const NewSession = () => {
+    const TopicOptions = [
+        {
+            value: 'strings',
+            label: 'Strings',
+        },
+        {
+            value: 'arrays',
+            label: 'Arrays',
+        },
+        {
+            value: 'linked-lists',
+            label: 'Linked Lists',
+        },
+    ]
+
+    const DifficultyOptions = [
+        {
+            value: 'easy',
+            label: 'Easy',
+        },
+        {
+            value: 'medium',
+            label: 'Medium',
+        },
+        {
+            value: 'difficult',
+            label: 'Difficult',
+        },
+    ]
+
+    return (
+        <div className="border-solid border-2 border-gray-200 rounded flex flex-col w-dashboard p-6 min-h-[60vh] max-h-[90vh] overflow-auto justify-between">
+            <div>
+                <h5 className=" text-xl text-medium font-bold">Recent Sessions</h5>
+                <br />
+                <p className="text-medium font-medium mb-1">
+                    Choose a <strong>Topic</strong> and <strong>Difficulty</strong> level to start your collaborative
+                    coding session!
+                </p>
+
+                <p className="text-medium font-bold mt-6 mb-2">Topic</p>
+                <Select>
+                    <SelectTrigger>
+                        <SelectValue placeholder="Select one..." />
+                    </SelectTrigger>
+                    <SelectContent>
+                        {TopicOptions.map(({ value, label }) => (
+                            <SelectItem key={value} value={value}>
+                                {label}
+                            </SelectItem>
+                        ))}
+                    </SelectContent>
+                </Select>
+
+                <p className="text-medium font-bold mt-6 mb-2">Difficulty</p>
+                <Select>
+                    <SelectTrigger>
+                        <SelectValue placeholder="Select one..." />
+                    </SelectTrigger>
+                    <SelectContent>
+                        {DifficultyOptions.map(({ value, label }) => (
+                            <SelectItem key={value} value={value}>
+                                {label}
+                            </SelectItem>
+                        ))}
+                    </SelectContent>
+                </Select>
+            </div>
+
+            <Button className="mt-4 bg-purple-600">Start matchmaking</Button>
+        </div>
+    )
+}

frontend/components/dashboard/progress-card.tsx

@@ -0,0 +1,21 @@
+'use client'
+
+import { Progress } from '@/components/ui/progress'
+
+interface ProgressCardProps {
+    difficulty: string
+    score: string
+    progress: number
+    indicatorColor: string
+    backgroundColor: string
+}
+
+export const ProgressCard = ({ difficulty, score, progress, indicatorColor, backgroundColor }: ProgressCardProps) => {
+    return (
+        <div className="border-solid border-2 border-gray-200 rounded flex flex-col w-2/6 mx-2 p-6">
+            <p className="text-medium font-medium">{difficulty}</p>
+            <h4 className="text-4xl font-extrabold mb-4">{score}</h4>
+            <Progress value={progress} indicatorColor={indicatorColor} backgroundColor={backgroundColor} />
+        </div>
+    )
+}

frontend/components/dashboard/recent-sessions.tsx

@@ -0,0 +1,64 @@
+'use client'
+
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
+
+import Link from 'next/link'
+import { MoveRight } from 'lucide-react'
+
+export const RecentSessions = () => {
+    const data = [
+        {
+            collaborator: 'Olivia Martin',
+            question: 'Reverse a String',
+        },
+        {
+            collaborator: 'Olivia Martin',
+            question: 'Reverse a String',
+        },
+        {
+            collaborator: 'Olivia Martin',
+            question: 'Reverse a String',
+        },
+        {
+            collaborator: 'Olivia Martin',
+            question: 'Reverse a String',
+        },
+        {
+            collaborator: 'Olivia Martin',
+            question: 'Reverse a String',
+        },
+    ]
+
+    return (
+        <div className="border-solid border-2 border-gray-200 rounded flex flex-col w-dashboard p-6 min-h-[60vh] max-h-[90vh] overflow-auto justify-between">
+            <div>
+                <h5 className=" text-xl text-medium font-bold">Recent Sessions</h5>
+                <br />
+                <Table>
+                    <TableHeader>
+                        <TableRow>
+                            <TableHead>Collaborator</TableHead>
+                            <TableHead className="text-right">Question</TableHead>
+                        </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                        {data.map(({ collaborator, question }, index) => (
+                            <TableRow key={index}>
+                                <TableCell>
+                                    <p>{collaborator}</p>
+                                </TableCell>
+                                <TableCell className="text-right">
+                                    <p>{question}</p>
+                                </TableCell>
+                            </TableRow>
+                        ))}
+                    </TableBody>
+                </Table>
+            </div>
+            <Link className="flex flex-row justify-center underline text-purple-600" href={'/sessions'}>
+                <p className="mr-1">View all sessions</p>
+                <MoveRight />
+            </Link>
+        </div>
+    )
+}