Vivian

README.md

@@ -136,7 +136,7 @@ export default function Page() {
 ## Backend Specifications
 
 - We will be incorporating all we have learned thus far such as API endpoints and database querying!
-- Create all endpoints in `src/app/api`
+- Create all endpoints in `src/pages/api`
 - Reminder that routes are created by using a `route.ts` file
 
 ### Create Operations

next.config.ts

@@ -2,6 +2,8 @@ import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
   /* config options here */
+  experimental: {},
+  reactStrictMode: true,
 };
 
 export default nextConfig;

package.json

@@ -8,16 +8,21 @@
     "start": "next start"
   },
   "dependencies": {
+    "argon2": "^0.44.0",
+    "bcrypt": "^6.0.0",
+    "bcryptjs": "^3.0.3",
+    "mongoose": "^9.3.3",
+    "next": "16.0.1",
     "react": "19.2.0",
-    "react-dom": "19.2.0",
-    "next": "16.0.1"
+    "react-dom": "19.2.0"
   },
   "devDependencies": {
-    "typescript": "^5",
+    "@tailwindcss/postcss": "^4",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
-    "@tailwindcss/postcss": "^4",
-    "tailwindcss": "^4"
+    "baseline-browser-mapping": "^2.10.13",
+    "tailwindcss": "^4",
+    "typescript": "^5"
   }
 }

server/mongodb/connectDb.ts

@@ -0,0 +1,10 @@
+import mongoose from "mongoose";
+
+export default async function connectDb() {
+    try {
+        await mongoose.connect(process.env.MONGODB_URL!);
+        console.log("Connected to MongoDB!");
+    } catch (e) {
+        console.log("Unable to connect", e);
+    }
+}

server/mongodb/instrumentation.ts

@@ -0,0 +1,7 @@
+// this will prevent our MongoDB from running at every instance
+import connectDb from "./connectDb";
+
+// register executes the connectDb once immediately when we run the server
+export function register(){
+    connectDb();
+}

server/mongodb/models/Animal.ts

@@ -0,0 +1,13 @@
+import mongoose from "mongoose";
+
+const AnimalSchema = new mongoose.Schema({
+  name: { type: String, required: true },
+  breed: { type: String, required: true },
+  owner: { type: mongoose.Schema.Types.ObjectId, ref: "User", required: true },
+  hoursTrained: { type: Number, default: 0 },
+  profilePicture: { type: String }
+});
+
+// Prevent model overwrite error in Next.js
+const Animal = mongoose.models.Animal || mongoose.model("Animal", AnimalSchema);
+export default Animal;

server/mongodb/models/Training-Log.ts

@@ -0,0 +1,35 @@
+import mongoose from "mongoose";
+
+const TrainingLogSchema = new mongoose.Schema(
+    {
+        title : {
+            type: String,
+            required: true,
+        },
+        description: {
+            type: String,
+            required: true,
+        },
+        hours: {
+            type: Number,
+            required: true,
+        },
+        date: {
+            type: Date,
+            required: true,
+        },
+        animalId: {
+            type: mongoose.Schema.Types.ObjectId,
+            ref: "Animal",
+            required: true,
+        },
+        userId: {
+            type: mongoose.Schema.Types.ObjectId,
+            ref: "User",
+            required: true,
+        },
+    },
+    { timestamps: true }
+);
+
+export default mongoose.models.TrainingLog || mongoose.model("TrainingLog", TrainingLogSchema);

server/mongodb/models/User.ts

@@ -0,0 +1,11 @@
+import mongoose from "mongoose";
+
+const UserSchema = new mongoose.Schema({
+  fullName : {type: String, required: true},
+  email: { type: String, required: true}, 
+  password: {type : String, required: true},
+  isAdmin: {type: Boolean, default: false}
+});
+
+// Prevent model overwrite error in Next.js
+export default mongoose.models.User || mongoose.model("User", UserSchema);

src/AuthContext.tsx

@@ -0,0 +1,63 @@
+import { createContext, useContext, useState, useEffect, ReactNode } from "react";
+
+type User = {
+  id: string;
+  isAdmin: boolean;
+  fullName: string, 
+} | null;
+
+
+type AuthContextType = {
+  user: User;
+  login: (data: { userid: string; isAdmin: boolean, fullName: string }) => void;
+  logout: () => void;
+};
+
+
+const AuthContext = createContext<AuthContextType | undefined>(undefined);
+
+
+type AuthProviderProps = {
+  children: ReactNode;
+};
+
+export function AuthProvider({ children }: AuthProviderProps) {
+  const [user, setUser] = useState<User>(null);
+
+
+  useEffect(() => {
+    const stored = localStorage.getItem("user");
+    if (stored) setUser(JSON.parse(stored));
+  }, []);
+
+  const login = (data: { userid: string; isAdmin: boolean, fullName: string }) => {
+    const newUser = {
+      id: data.userid,
+      isAdmin: data.isAdmin,
+      fullName: data.fullName, 
+    };
+
+    setUser(newUser);
+    localStorage.setItem("user", JSON.stringify(newUser));
+  };
+
+  const logout = () => {
+    setUser(null);
+    localStorage.removeItem("user");
+  };
+
+  return (
+    <AuthContext.Provider value={{ user, login, logout }}>
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+
+export function useAuth() {
+  const context = useContext(AuthContext);
+  if (!context) {
+    throw new Error("useAuth must be used within an AuthProvider");
+  }
+  return context;
+}

src/component/animal_card.tsx

@@ -0,0 +1,48 @@
+import Image from "next/image";
+import { Animal } from "../types/animal";
+
+interface AnimalCardProps {
+  animal: Animal;
+  compact?: boolean;
+}
+
+export const AnimalCard = ({ animal, compact = false }: AnimalCardProps) => {
+    return (
+        <div className="w-full overflow-hidden rounded-xl bg-white shadow-sm transition-all group hover:shadow-md">
+            {/* Image Container */}
+            <div className={`relative w-full overflow-hidden rounded-t-[20px] bg-gray-100 ${compact ? "h-40 lg:h-44" : "h-56 sm:h-60 lg:h-64"}`}>
+                <Image 
+                    src={animal.profilePicture} 
+                    alt={`${animal.name} - ${animal.breed}`} 
+                    fill className="object-cover group-hover:scale-105 transition-transform duration-300"
+            />
+            </div>
+
+            {/* Info Section */}
+            <div className={`flex items-start ${compact ? "gap-3 px-4 py-4" : "gap-4 px-5 py-5 lg:gap-6 lg:px-6 lg:py-6"}`}>
+                {/* Owner Avater */}
+                <div className={`flex flex-shrink-0 items-center justify-center rounded-full bg-[#d13a2f] font-bold text-white ${compact ? "h-10 w-10 text-lg" : "h-12 w-12 text-xl lg:h-[50px] lg:w-[50px] lg:text-[24px]"}`}>
+                    {/* Owner Name's first character */}
+                    {animal.owner.fullName.charAt(0)}
+                </div>
+
+                <div className="flex flex-col min-w-0">
+                    <h3
+                      className={`font-heebo leading-tight text-gray-900 ${compact ? "truncate text-xl" : "truncate text-2xl lg:text-[27px]"}`}
+                      title={`${animal.name} - ${animal.breed}`}
+                    >
+                        <span className="font-bold tracking-tight">
+                            {animal.name}
+                        </span>
+                        <span className="font-bold">
+                            {` - ${animal.breed}`}
+                        </span>
+                    </h3>
+                    <p className={`font-heebo font-medium leading-[1.2] text-gray-600 ${compact ? "mt-2 text-sm" : "mt-3 text-base lg:mt-[12px] lg:text-[18px]"} truncate`}>
+                        {animal.owner.fullName} • Trained: {animal.hoursTrained} hours
+                    </p>
+                </div>
+            </div>
+        </div>
+    );
+}

src/component/dashboard.tsx

@@ -0,0 +1,11 @@
+"use client";
+import Link from "next/link";
+import { useState } from "react";
+import { useRouter } from "next/router";
+import Sidebar from "./sidebar";
+
+export default function Dashboard() {
+    return (
+        <Sidebar/>
+    )
+}

src/component/progressbar.tsx

@@ -0,0 +1,45 @@
+type ProgressBarProps = {
+  searchValue?: string;
+  onSearchChange?: (value: string) => void;
+  showSearch?: boolean;
+};
+
+export default function ProgressBar({
+  searchValue = "",
+  onSearchChange,
+  showSearch = true,
+}: ProgressBarProps) {
+  return (
+    <header className="flex items-center justify-between border-b border-gray-300 px-4 py-3 shadow-md sm:px-6 sm:py-4 lg:px-8 lg:py-4">
+      <div className="flex w-[240px] shrink-0 items-center gap-3">
+        <img src="/images/appLogo.png" alt="App logo" className="h-9 w-auto sm:h-10" />
+        <h1 className="text-2xl font-medium text-black font-oswald sm:text-3xl lg:text-4xl">
+          Progress
+        </h1>
+      </div>
+
+      {showSearch ? (
+        <div className="flex flex-1 justify-center px-4">
+          <div className="relative h-[48px] w-full max-w-[550px]">
+            <img
+              src="/images/searchLogo.png"
+              alt="Search logo"
+              className="pointer-events-none absolute left-5 top-1/2 h-5 w-5 -translate-y-1/2"
+            />
+            <input
+              type="text"
+              placeholder="Search"
+              value={searchValue}
+              onChange={(e) => onSearchChange?.(e.target.value)}
+              className="h-full w-full rounded-[15px] border-[1.5px] border-gray-300 bg-white pl-14 pr-4 font-heebo text-lg text-gray-700 outline-none placeholder:text-gray-400 focus:border-gray-400"
+            />
+          </div>
+        </div>
+      ) : (
+        <div className="flex-1" />
+      )}
+
+      <div className="flex w-[200px] shrink-0 justify-end" />
+    </header>
+  );
+}