Prisma doneso

.idea/.gitignore

@@ -0,0 +1,5 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/

.idea/frasier-gifs.iml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

.idea/inspectionProfiles/Project_Default.xml

@@ -0,0 +1,6 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
+  </profile>
+</component>

.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/frasier-gifs.iml" filepath="$PROJECT_DIR$/.idea/frasier-gifs.iml" />
+    </modules>
+  </component>
+</project>

.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>

models/Gif.ts

@@ -0,0 +1,9 @@
+export interface Gif {
+    id: string;
+    title: string;
+    description: string;
+    fileName: string;
+    dateCreated: string;
+    upVotes: Number;
+    downVotes: Number;
+}

models/index.ts

@@ -0,0 +1,3 @@
+import {Gif} from "./Gif";
+
+export type {Gif}

pages/index.tsx

@@ -1,10 +1,38 @@
-import type { NextPage } from "next";
-import Head from "next/head";
+import { PrismaClient } from "@prisma/client";
+import type { GetServerSideProps, NextPage } from "next";
+import { Gif } from "../models";
 import Image from "next/image";
-import styles from "../styles/Home.module.css";
 
-const Home: NextPage = () => {
-  return <h1 className="text-3xl text-red-700 font-bold underline">Hello world!</h1>;
+interface IHomeProps {
+    gifs: Gif[]
+}
+
+const Home: NextPage<IHomeProps> = ({ gifs }) => {
+    return (
+        <div>
+            <h1 className="text-3xl font-bold text-red-700 underline">
+                Frasier Gifs
+            </h1>
+            <div className="grid grid-cols-3">
+                {gifs.map((gif: Gif) => {
+                    return (
+                        <div key={gif.id}>
+                            <h2>{gif.title}</h2>
+                            <Image alt={gif.title} width={64} height={64} src={`/samples/${gif.fileName}.gif`} />
+                        </div>
+                    )
+                })}
+            </div>
+        </div>
+    );
 };
 
+export const getServerSideProps: GetServerSideProps = async ({ req }) => {
+    const prisma = new PrismaClient();
+    const gifs = await prisma.gif.findMany({
+        take: 12, orderBy: { title: 'asc' },
+    });
+
+    return { props: { gifs: JSON.parse(JSON.stringify(gifs)) } };
+};
 export default Home;