fanvue · kaloyanBozhkov · Jun 11, 2024 · Jun 11, 2024 · Jun 11, 2024 · Jun 11, 2024
diff --git a/README.md b/README.md
@@ -1,3 +1,29 @@
+# TODO
+
+totally skipped:
+
+- tests (unit/integ/e2e)
+
+could expand with:
+
+- auth
+- prisma
+- better SEO, analytics etc.. Could use next-seo for sitemaps and more
+- actual FE work (quality mobile responsive designs)
+- vault page can be restructured into better components
+
+for quality teamwork & efficacy at least:
+
+- prettier, ideally with improts sorting
+- eslint
+- dev QOL improvements e.g. absolute imports (tsconfig),
+
+no design system?
+
+- tailwind, tailwind-merge etc..
+
+... much more ...
+
 # Fanvue's Fullstack challenge
 
 Setup the project:

diff --git a/bun.lockb b/bun.lockb
diff --git a/next.config.js b/next.config.js
@@ -1,6 +1,9 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
-}
+  images: {
+    domains: ["via.placeholder.com"],
+  },
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;
diff --git a/package.json b/package.json
@@ -15,9 +15,17 @@
     "@emotion/styled": "^11.9.3",
     "@fontsource/roboto": "^4.5.7",
     "@mui/material": "^5.8.7",
+    "@tanstack/react-query": "latest",
+    "@trpc/client": "next",
+    "@trpc/next": "next",
+    "@trpc/react-query": "next",
+    "@trpc/server": "next",
+    "axios": "^1.7.2",
     "next": "12.1.4",
     "react": "18.0.0",
-    "react-dom": "18.0.0"
+    "react-dom": "18.0.0",
+    "superjson": "^2.2.1",
+    "zod": "^3.23.8"
   },
   "devDependencies": {
     "@types/node": "17.0.23",

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -1,14 +1,23 @@
 import type { AppProps } from "next/app";
 import { ThemeProvider, CssBaseline } from "@mui/material";
 import lightTheme from "../themes/lightTheme";
+import { trpc } from "../src/utils/trpcNext";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { useState } from "react";
 
-function MyApp({ Component, pageProps }: AppProps) {
+function App({ Component, pageProps }: AppProps) {
+  const [queryClient] = useState(() => new QueryClient());
+
+  // @TODO add top level error boundary wrapper
+  // @TODO add session provider etc...
   return (
     <ThemeProvider theme={lightTheme}>
       <CssBaseline />
-      <Component {...pageProps} />
+      <QueryClientProvider client={queryClient}>
+        <Component {...pageProps} />
+      </QueryClientProvider>
     </ThemeProvider>
   );
 }
 
-export default MyApp;
+export default trpc.withTRPC(App);
diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -0,0 +1,45 @@
+import { Head, Html, Main, NextScript } from "next/document";
+
+export default function Document() {
+  return (
+    <Html>
+      <Head>
+        {/* @TODO handle multiple sizes icons for tablet/mobile/shortcuts etc.. */}
+        <link rel="icon" href="/favicon.ico" />
+        {/* @TODO quick meta tags from ChatGPT, will have to analyse and remove some, ensure assets & links are good  */}
+        <meta
+          name="description"
+          content="Fanvue is the ultimate platform for fans to connect, share, and celebrate their passions. Join our vibrant community of enthusiasts to discover new content, engage with like-minded fans, and express your fandom in exciting ways."
+        />
+        <meta property="og:title" content="Fanvue - Connect with Fellow Fans" />
+        <meta
+          property="og:description"
+          content="Fanvue is the ultimate platform for fans to connect, share, and celebrate their passions. Join our vibrant community of enthusiasts to discover new content, engage with like-minded fans, and express your fandom in exciting ways."
+        />
+        <meta property="og:type" content="website" />
+        <meta property="og:url" content="https://www.fanvue.com" />
+        <meta
+          property="og:image"
+          content="https://www.fanvue.com/assets/logo.png"
+        />
+        <meta property="twitter:card" content="summary_large_image" />
+        <meta
+          property="twitter:title"
+          content="Fanvue - Connect with Fellow Fans"
+        />
+        <meta
+          property="twitter:description"
+          content="Fanvue is the ultimate platform for fans to connect, share, and celebrate their passions. Join our vibrant community of enthusiasts to discover new content, engage with like-minded fans, and express your fandom in exciting ways."
+        />
+        <meta
+          property="twitter:image"
+          content="https://www.fanvue.com/assets/logo.png"
+        />
+      </Head>
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  );
+}
diff --git a/pages/api/trpc/[trpc].ts b/pages/api/trpc/[trpc].ts
@@ -0,0 +1,15 @@
+import { createContext } from "../../../src/server/context";
+import appRouter from "./../../../src/server/index";
+import * as trpcNext from "@trpc/server/adapters/next";
+
+export default trpcNext.createNextApiHandler({
+  router: appRouter,
+  createContext,
+});
+
+// @TODO could add public-facing APIs via https://github.com/jlalmes/trpc-openapi
+// also trpc-panel to test procedures
+
+//@TODO could also add trpc dev tools
+
+// @TODO could also add NextAuth or Clerk to provide a user's feed based on their user ID
diff --git a/pages/feed.tsx b/pages/feed.tsx
@@ -1,7 +1,68 @@
-import type { NextPage } from "next";
+import Head from "next/head";
+import trpcSS from "../src/utils/trpcSS";
+import { InferGetServerSidePropsType } from "next";
+import { Box, Container, Typography } from "@mui/material";
+import Post from "../src/components/organisms/Post.organism";
 
-const Feed: NextPage = () => {
-  return <div></div>;
+const FeedPage = ({
+  initialPosts,
+}: InferGetServerSidePropsType<typeof getServerSideProps>) => {
+  // @TODO after loading initial posts - add pagination & load more as user infinitely scrolls
+  //   const hello = trpc.feedRouter.getAllPosts.useQuery(undefined, {
+  //   initialData: initialPosts,
+  // });
+
+  // -> If we dont care about SEO indexing feed page, can load data on client after showing skeleto loader
+
+  return (
+    <>
+      <Head>
+        <title>Feed Page</title>
+        <meta name="description" content="Some page desc" />
+        {/* more tags */}
+      </Head>
+      {/* @TODO add a layout/template component that will strucutre the page */}
+      {/* @TODO Move to own components (I like the react ATOMIC design pattern. Based on its principles this would be an organism composed of molecules which themselves would be made of atoms) */}
+      <Container component="main" maxWidth="md">
+        <Typography variant="h1" component="h1" gutterBottom>
+          Feed Page
+        </Typography>
+        <Box component="section">
+          {initialPosts.length ? (
+            initialPosts.map((post) => <Post key={post.id} post={post} />)
+          ) : (
+            <Typography variant="body1" component="p">
+              No posts available
+            </Typography>
+          )}
+        </Box>
+      </Container>
+    </>
+  );
+};
+
+// handle SEO with SSR preloading html to crawl/index on
+export const getServerSideProps = async () => {
+  try {
+    // @TODO use ctx req session to get user id from cookie or wherever and filter posts based on that, if present - otherwise show generic
+    // @TODO limit to x initial posts to avoid excess data transfers
+    const initialPosts = await trpcSS.feedRouter.getAllPosts.fetch();
+
+    return {
+      props: {
+        initialPosts,
+      },
+    };
+  } catch (err) {
+    // @TODO DataDog logger/Sentry or whatever
+    // @TODo move top level to all trpc procedure error scenarios
+    console.warn(err);
+    return {
+      props: {
+        initialPosts: [],
+      },
+    };
+  }
 };
 
-export default Feed;
+export default FeedPage;
diff --git a/pages/vault.tsx b/pages/vault.tsx
@@ -0,0 +1,122 @@
+import Head from "next/head";
+import trpcSS from "../src/utils/trpcSS";
+import { InferGetServerSidePropsType } from "next";
+import { Box, Container, Grid, Modal, Typography } from "@mui/material";
+import Post from "../src/components/organisms/Post.organism";
+import { useState } from "react";
+import Image from "next/image";
+
+const VaultPage = ({
+  initialPhotos,
+}: InferGetServerSidePropsType<typeof getServerSideProps>) => {
+  const [selectedPhoto, setSelectedPhoto] = useState<
+    (typeof initialPhotos)[number] | null
+  >(null);
+
+  const handleOpen = (photo: NonNullable<typeof selectedPhoto>) =>
+    setSelectedPhoto(photo);
+
+  const handleClose = () => setSelectedPhoto(null);
+
+  return (
+    <>
+      <Head>
+        <title>Vault Page</title>
+        <meta name="description" content="Some page desc" />
+        {/* more tags */}
+      </Head>
+      <Container>
+        <Typography variant="h1" gutterBottom>
+          Vault
+        </Typography>
+        {/* @TODO move to own organism for handling img gallery */}
+        <Grid container spacing={2}>
+          {/* @TODO veritaulize list to improve performance */}
+          {initialPhotos.length ? (
+            initialPhotos.slice(0, 20).map((photo) => (
+              <Grid
+                item
+                xs={6}
+                sm={4}
+                md={3}
+                lg={2}
+                key={photo.id}
+                onClick={() => handleOpen(photo)}
+              >
+                {/* add add loading animation via img background */}
+                <Image
+                  width={300}
+                  height={300}
+                  src={photo.thumbnailUrl}
+                  alt={photo.title}
+                  style={{ width: "100%", cursor: "pointer" }}
+                />
+              </Grid>
+            ))
+          ) : (
+            <Typography variant="h6" sx={{ mt: 2 }}>
+              No photos
+            </Typography>
+          )}
+        </Grid>
+        {/* @TODO move to own organism & move top level for handling common modals */}
+        <Modal open={Boolean(selectedPhoto)} onClose={handleClose}>
+          <Box
+            sx={{
+              position: "absolute",
+              top: "50%",
+              left: "50%",
+              transform: "translate(-50%, -50%)",
+              bgcolor: "background.paper",
+              boxShadow: 24,
+              p: 4,
+              maxWidth: "90%",
+              maxHeight: "90%",
+              overflow: "auto",
+            }}
+          >
+            {selectedPhoto && (
+              <>
+                <Image
+                  width={300}
+                  height={300}
+                  src={selectedPhoto.url}
+                  alt={selectedPhoto.title}
+                  style={{ width: "100%", height: "auto" }}
+                />
+                <Typography variant="h6" sx={{ mt: 2 }}>
+                  {selectedPhoto.title}
+                </Typography>
+              </>
+            )}
+          </Box>
+        </Modal>
+      </Container>
+    </>
+  );
+};
+
+export const getServerSideProps = async () => {
+  // @TODO use ctx req session to get user id from cookie or wherever and filter posts based on that, if present - otherwise show generic
+  // @TODO limit to x initial photos to avoid excess data transfers
+  try {
+    const initialPhotos = await trpcSS.vaultRouter.getPhotos.fetch();
+
+    return {
+      props: {
+        initialPhotos,
+      },
+    };
+  } catch (err) {
+    // @TODO DataDog logger/Sentry or whatever
+    // @TODo move top level to all trpc procedure error scenarios
+    console.warn(err);
+    return {
+      props: {
+        initialPhotos: [],
+      },
+    };
+  }
+};
+
+export default VaultPage;
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/src/components/molecules/Comments.molecule.tsx b/src/components/molecules/Comments.molecule.tsx
@@ -0,0 +1,50 @@
+import { Button, Paper, Typography } from "@mui/material";
+
+const Comments = ({
+  className = "",
+  comments,
+  onClose,
+}: {
+  className?: string;
+  comments: { id: string; email: string; name: string; body: string }[];
+  onClose?: () => void;
+}) => {
+  return (
+    // @TODO add tailwind, tailwind-merge & extend this
+    <div className={className}>
+      {comments.map((c) => (
+        <Paper
+          key={c.id}
+          style={{
+            padding: "16px",
+            marginBottom: "16px",
+          }}
+        >
+          <Typography variant="body1" style={{ marginBottom: "8px" }}>
+            {c.body}
+          </Typography>
+          <div>
+            <Typography variant="subtitle2" style={{ marginRight: "8px" }}>
+              Author
+            </Typography>
+            <Typography variant="body2">
+              {c.name} - {c.email}
+            </Typography>
+          </div>
+        </Paper>
+      ))}
+      {onClose && (
+        <Button
+          style={{ marginTop: "14px" }}
+          variant="contained"
+          onClick={() => onClose(true)}
+          aria-label={`Hide comments`}
+        >
+          Hide comments
+        </Button>
+      )}
+    </div>
+  );
+};
+
+export default Comments;