.env.example

+# Example .env file
+
+# Database for connecting to Prisma
+DATABASE_URL="file:./dev.db"
+
+# Some URLs
+TWITCH_AUTH_BASE_URL="https://id.twitch.tv/oauth2"
+IGDB_BASE_URL="https://api.igdb.com/v4"
+IGDB_IMG_BASE_URL="https://images.igdb.com/igdb/image/upload"
+
+# For Authentication
+TWITCH_CLIENT_ID="imdb_client_id"
+TWITCH_CLIENT_SECRET="imdb_auth_id"
\ No newline at end of file

.env.sample

-# Environment variables declared in this file are automatically made available to Prisma.
-# See the documentation for more detail: https://pris.ly/d/prisma-schema#accessing-environment-variables-from-the-schema
-
-# Prisma supports the native connection string format for PostgreSQL, MySQL, SQLite, SQL Server, MongoDB and CockroachDB.
-# See the documentation for all the connection string options: https://pris.ly/d/connection-strings
-
-DATABASE_URL="file:./dev.db"
-
-IMDB_CLIENT_ID="imdb-client-id"
-IMDB_AUTH="Bearer imdb-auth-id"
\ No newline at end of file

.gitignore

@@ -25,12 +25,13 @@ yarn-debug.log*
 yarn-error.log*
 
 # local env files
-.env*.local
 .env
+.env*.local
+.env*.production
 
 # vercel
 .vercel
 
 # typescript
 *.tsbuildinfo
-next-env.d.ts
+next-env.d.ts
\ No newline at end of file

app/(auth)/login/page.tsx

+export default function Login() {
+    return (
+        <div>
+            <h1>Login WIP</h1>
+        </div>
+    )
+}
\ No newline at end of file

app/(auth)/signup/page.tsx

+export default function Signup() {
+    return (
+        <div>
+            <h1>Signup WIP</h1>
+        </div>
+    )
+}
\ No newline at end of file

app/(content)/(blog)/blogs/page.tsx

+export default function BlogsPage() {
+    return (
+        <div>
+            <h1>Blog WIP</h1>
+        </div>
+    )
+}
\ No newline at end of file

app/(content)/(community)/communities/page.tsx

+export default function CommunitiesPage() {
+    return (
+        <div>
+            <h1>Community WIP</h1>
+        </div>
+    )
+}
\ No newline at end of file

app/games/[gameid]/loading.tsx → app/(content)/(gaming)/games/[gameid]/loading.tsx

+// loading component, this renders when loading in /games happens
 export default function Loading() {
     return (
         <div>

app/(content)/(gaming)/games/[gameid]/page.tsx

+import { getGame, getGames } from "@/lib/igdb";
+import { IGame } from "@/types/types";
+import Image from "next/image";
+
+// renders a single game detail page
+export default async function GameDetail({ params }: { params: { gameid: string } }) {
+    const data: IGame[] = await getGame(parseInt(params.gameid))
+
+    return (
+        <div>
+            <h1>Game Detail</h1>
+            <h1>{data[0].name}</h1>
+            <Image src={data[0].cover.url} alt={data[0].name} width={264} height={374} priority={true} />
+            <p>{data[0].summary}</p>
+        </div>
+    )
+}
+
+// pre-renders static paths for all fetched games for faster page loads
+export async function generateStaticParams() {
+    const games = await getGames()
+
+    return games.map((game) => ({
+        gameid: game.id.toString(),
+    }));
+}
\ No newline at end of file

app/(content)/(gaming)/games/layout.tsx

+"use client"
+
+import Dashboard from "@/components/Dashboard";
+import Sort from "@/components/Sort";
+import { Grid, Hidden } from "@mui/material";
+
+export default function DashboardLayout({
+    children,
+}: {
+    children: React.ReactNode;
+}) {
+    return (
+        <section>
+            <Grid container spacing={2}>
+                <Grid item xs={2}>
+                    <Dashboard />
+                </Grid>
+
+                <Grid item xs={10} md={8}>
+                    {children}
+                </Grid>
+
+                <Hidden mdDown>
+                    <Grid item xs={2}>
+                        <Sort />
+                    </Grid>
+                </Hidden>
+            </Grid>
+        </section>
+    );
+}
\ No newline at end of file

app/games/loading.tsx → app/(content)/(gaming)/games/loading.tsx

+// root loading component, this renders when any loading happens
 export default function Loading() {
     return (
         <div>

app/(content)/(gaming)/games/page.tsx

+"use client"
+
+import Game from "@/components/Game";
+import Search from "@/components/Search";
+import { getBaseURL } from "@/lib/utils";
+import { IGame } from "@/types/types";
+import { Card, CardContent, Grid, Stack } from "@mui/material";
+import { Fragment } from "react";
+import InfiniteScroll from "react-infinite-scroll-component";
+import { useInfiniteQuery } from "react-query";
+
+// renders a list of games infinitely (presumably)
+export default function GamesPage() {
+    const {
+        data,
+        error,
+        fetchNextPage,
+        hasNextPage,
+        isFetching,
+        isFetchingNextPage,
+        status,
+    } = useInfiniteQuery(
+        'infiniteGames',
+        async ({ pageParam = 1 }) =>
+            await fetch(
+                `${getBaseURL()}/api/games/?page=${pageParam}`,
+                { cache: 'force-cache', }
+            ).then((result) => result.json() as Promise<IGame[]>),
+        {
+            getNextPageParam: (lastPage, pages) => {
+                return lastPage.length > 0 ? pages.length + 1 : undefined;
+            },
+        }
+    );
+
+    return (
+        <Stack spacing={2}>
+            <Search />
+            <Card>
+                <CardContent>
+                    {status === 'success' && (
+                        <InfiniteScroll
+                            dataLength={data?.pages.length * 20}
+                            next={fetchNextPage}
+                            hasMore={hasNextPage ? true : false}
+                            loader={<h4>Loading...</h4>}
+                            endMessage={
+                                <p style={{ textAlign: 'center' }}>
+                                    <b>Yay! You have seen it all</b>
+                                </p>
+                            }
+                        >
+                            <Grid container spacing={2} justifyContent="center">
+                                {data?.pages.map((page, i) => (
+                                    <Fragment key={i}>
+                                        {page.map((game: IGame) => (
+                                            <Grid item xs={12} ss={6} sm={4} md={3} lg={2} key={game.id}>
+                                                <Game id={game.id} name={game.name} cover={game.cover} key={game.id} />
+                                            </Grid>
+                                        ))}
+                                    </Fragment>
+                                ))}
+                            </Grid>
+                        </InfiniteScroll>
+                    )}
+                </CardContent>
+            </Card>
+        </Stack>
+    )
+}
\ No newline at end of file

app/(content)/(thread)/threads/page.tsx

+export default function ThreadsPage() {
+    return (
+        <div>
+            <h1>Threads WIP</h1>
+        </div>
+    )
+}
\ No newline at end of file

app/(content)/(user)/[userid]/page.tsx

+export default function User({ params }: { params: { userid: string } }) {
+    return (
+        <div>
+            <h1>User Profile Page WIP</h1>
+            <p>Unique UserName: {params.userid}</p>
+        </div>
+    )
+}
\ No newline at end of file

app/(content)/(user)/friends/page.tsx

+export default function Friends() {
+    return (
+        <div>
+            <h1>Friends Page WIP</h1>
+        </div>
+    )
+}
\ No newline at end of file

app/(content)/(user)/notifications/page.tsx

+export default function Notifications() {
+    return (
+        <div>
+            <h1>Notifications Page WIP</h1>
+        </div>
+    )
+}
\ No newline at end of file

app/(content)/(user)/settings/page.tsx

+export default function Settings() {
+    return (
+        <div>
+            <h1>Settings Page WIP</h1>
+        </div>
+    )
+}
\ No newline at end of file

app/api/games/route.ts

+import { getGames } from "@/lib/igdb";
+import { NextRequest, NextResponse } from "next/server";
+
+export async function GET(req: NextRequest) {
+    const p = req.nextUrl.searchParams;
+    const games = await getGames(p.get('page') ? parseInt(p.get('page') as string) : undefined);
+    return NextResponse.json(games);
+}
\ No newline at end of file

app/games/Game.tsx

-import Image from "next/image";
-import Link from "next/link";
-
-export default function Game({ id, name, cover }: { id: any, name: any, cover: any }) {
-    return (
-        <div>
-            <h1>{name}</h1>
-            <Link href={`/games/${id}`}>
-                <Image src={"https:" + cover.url} alt={name} width={200} height={200} />
-            </Link>
-        </div>
-    )
-}

app/games/[gameid]/page.tsx

-import Image from "next/image";
-
-type DetailView = {
-    id: number;
-    name: string;
-    cover: { url: string };
-    summary: string;
-}
-
-type DetailViewArray = DetailView[];
-
-
-
-export default async function GameDetail({ params }: { params: any }) {
-    const res = await fetch("https://api.igdb.com/v4/games", {
-        method: 'POST',
-        headers: {
-            'Accept': 'application/json',
-            'Content-Type': 'application/json',
-            'Client-ID': `${process.env.IMDB_CLIENT_ID}`,
-            'Authorization': `${process.env.IMDB_AUTH}`,
-        },
-        body: `fields name,cover.*,summary; where cover != null; where id = ${params.gameid};`,
-    });
-    const data: DetailViewArray = await res.json()
-
-    return (
-        <div>
-            Game Detail
-            <h1>{data[0].name}</h1>
-            <Image src={"https:" + data[0].cover.url} alt={data[0].name} width={200} height={200} priority />
-            <p>{data[0].summary}</p>
-        </div>
-    )
-}