fix: finalize

README.md

@@ -59,3 +59,42 @@ You can check out [the Next.js GitHub repository](https://github.com/vercel/next
 The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
 
 Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+
+**Rendering strategies**
+
+- Login - Static
+- Timeline - Static && Client Side
+- Profile - Client Side
+- Detail - Server side
+
+**Features**
+
+Mobile first design 
+
+Error handling
+
+- Client Side - with error modal, retry option, where retry is possible
+- Server Side - with custom error page
+
+Timeline Page 
+
+- State management: X-state
+- Preserves scrolled down position on page re-entry
+- Background polling for new posts, refresh button
+- Infinity scrolling
+- User data cache (limit the number of requests)
+
+Profile Page
+
+- State management: X-state
+- 3 possible states: new user (suggested users and posts), other user (only posts), loggedInUser (posts and liked posts)
+- Infinity scrolling
+- User data cache (limit the number of requests)
+
+Detail Page
+
+- State management: useReducer
+- Can be shared (by copying and pasting the url in a different window)
+
+
+

next.config.js

@@ -15,6 +15,10 @@ module.exports = withPWA({
         hostname: 'storage.googleapis.com',
         pathname: '/qwacker-api-prod-data/**',
       },
+      {
+        protocol: 'https',
+        hostname: 'cdn.pixabay.com',
+      },
     ],
   },
   i18n: {

package.json

@@ -12,7 +12,7 @@
     "cruiser": "npx depcruise --config .dependency-cruiser.js . --exclude \"^.next\""
   },
   "dependencies": {
-    "@smartive-education/design-system-component-z-index-at": "1.4.22",
+    "@smartive-education/design-system-component-z-index-at": "1.4.31",
     "@types/node": "18.11.9",
     "@types/react": "18.0.25",
     "@types/react-dom": "18.0.8",

pages/auth/login.tsx

@@ -2,6 +2,7 @@ import {
   Button,
   LandingPage,
 } from '@smartive-education/design-system-component-z-index-at';
+import { GetStaticProps } from 'next';
 import { signIn, useSession } from 'next-auth/react';
 import { useRouter } from 'next/router';
 import { useEffect } from 'react';
@@ -34,3 +35,9 @@ export default function LoginPage() {
     </>
   );
 }
+
+export const getStaticProps: GetStaticProps<{}> = async () => {
+  return {
+    props: {},
+  };
+};

pages/error/index.tsx

@@ -17,7 +17,7 @@ export default function ErrorPage() {
           Oops. Das hätte nicht passieren dürfen!
         </Typography>
         <div className="w-[80vh] my-4">
-          <CardWrapper titel="Was wollen sie jetzt tun?" src={errorPicture} />
+          <CardWrapper titel="Was willst du jetzt machen?" src={errorPicture} />
         </div>
         <div className="my-4">
           <Button

pages/profile/[id].tsx

@@ -26,6 +26,7 @@ import {
   noMumblesPicture,
 } from '../../models/constants';
 import { profileMachine } from '../../state/profile-machine';
+import Image from 'next/image';
 
 export default function ProfilePage() {
   const { data: session } = useSession();
@@ -155,24 +156,32 @@ export default function ProfilePage() {
         />
       </Modal>
       {!profileState.context.user ? (
-        <>
-          <div className="my-4 md:h-[35rem]">
-            <Skeleton isProfile={true} />
-          </div>
-        </>
+        <div className="mt-4 mb-4 md:mb-16">
+          <Skeleton isProfile={true} />
+        </div>
       ) : (
         <div className="my-4">
           <ProfileCard
             name={`${profileState.context.user?.firstName} ${profileState.context.user?.lastName}`}
             userName={profileState.context.user?.userName || ''}
-            profileImage={profileState.context.background}
             profilePicture={
               profileState.context.user?.avatarUrl || defaultProfilePicture
             }
             location="Rapperswil"
             calendarText="Mitglied seit 6 Monaten"
             profileText={profileState.context.bio}
-          />
+          >
+            <Image
+              src={profileState.context.background}
+              alt="Profile Background"
+              fill
+              priority={true}
+              sizes="(min-width: 60rem) 40vw,
+                        (min-width: 30rem) 50vw,
+                        100vw"
+              className="object-cover"
+            />
+          </ProfileCard>
         </div>
       )}
       {profileState.context.isNewUserProfile && (