💠 Facebook 2.0 with REACT.JS

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

README.md

@@ -0,0 +1,34 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+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.

components/Feed.tsx

@@ -0,0 +1,38 @@
+import { onSnapshot, query, collection, orderBy } from "firebase/firestore";
+import React, { useEffect, useState } from "react";
+import { firestore } from "../firebase/firebase";
+import Post from "./Post";
+
+type Props = {};
+
+export default function Feed({}: Props) {
+  const [posts, setPosts] = useState<any[]>([]);
+
+  useEffect(
+    () =>
+      onSnapshot(
+        query(collection(firestore, "posts"), orderBy("timestamp", "desc")),
+        (snapshot) => {
+          setPosts(snapshot.docs);
+        }
+      ),
+    [firestore]
+  );
+
+  return (
+    <div>
+      {posts.map((post) => (
+        <div key={post.id}>
+          <Post
+            id={post.id}
+            author={post.data().username}
+            caption={post.data().caption}
+            image={post.data().image}
+            profileImage={post.data().profileImage}
+            timestamp={post.data().timestamp}
+          />
+        </div>
+      ))}
+    </div>
+  );
+}

components/LeftMenu.tsx

@@ -0,0 +1,171 @@
+/* eslint-disable @next/next/no-img-element */
+import React, { useEffect, useState } from "react";
+import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
+import { useAuthState } from "react-firebase-hooks/auth";
+import { auth } from "../firebase/firebase";
+import { signOut } from "firebase/auth";
+import { useRouter } from "next/router";
+import { faker } from "@faker-js/faker";
+
+type LeftMenuProps = {};
+
+const LeftMenu: React.FC<LeftMenuProps> = () => {
+  const [user] = useAuthState(auth);
+  const router = useRouter();
+
+  const logout = async () => {
+    await signOut(auth);
+  };
+
+  const [suggestions, setSuggestions] = useState<any[]>([]);
+
+  useEffect(() => {
+    const suggestions = [...Array(4)].map((_, i) => ({
+      userId: faker.datatype.uuid(),
+      image: faker.image.image(),
+      name: faker.company.bs(),
+      city: faker.image.city(),
+      id: i,
+    }));
+    setSuggestions(suggestions);
+    //console.log(suggestions);
+  }, []);
+
+  return (
+    <div className="overflow-scroll scrollbar-hide w-1/5 pt-16 h-full hidden xl:flex flex-col fixed top-0 left-0">
+      <ul className="p-4">
+        <li>
+          {user ? (
+            <div
+              onClick={logout}
+              className="flex items-center space-x-2 p-2 hover:bg-gray-200 rounded-lg transition-all dark:text-dark-txt dark:hover:bg-dark-third cursor-pointer"
+            >
+              <img
+                src={user?.photoURL as string}
+                alt="Profile picture"
+                className="w-10 h-10 rounded-full"
+              />
+              <span className="font-semibold">{user?.displayName}</span>
+            </div>
+          ) : (
+            <div
+              className="animate-pulse flex items-center space-x-2 p-2 cursor-pointer hover:bg-gray-200 rounded-lg transition-all dark:text-dark-txt dark:hover:bg-dark-third"
+              onClick={() => router.push("/auth/login")}
+            >
+              <img
+                src="https://th.bing.com/th/id/OIP.Cl56H6WgxJ8npVqyhefTdQHaHa?pid=ImgDet&rs=1"
+                alt="Profile picture"
+                className="w-10 h-10 rounded-full"
+              />
+              <span className="font-semibold">Sign Up</span>
+            </div>
+          )}
+        </li>
+        <li>
+          <a
+            href="#"
+            className="flex items-center space-x-2 p-2 hover:bg-gray-200 rounded-lg transition-all dark:text-dark-txt dark:hover:bg-dark-third"
+          >
+            <img
+              src="https://i.postimg.cc/4xL89ztR/friends.png"
+              alt="Profile picture"
+              className="w-10 h-10 rounded-full"
+            />
+            <span className="font-semibold">Friends</span>
+          </a>
+        </li>
+        <li>
+          <a
+            href="#"
+            className="flex items-center space-x-2 p-2 hover:bg-gray-200 rounded-lg transition-all dark:text-dark-txt dark:hover:bg-dark-third"
+          >
+            <img
+              src="https://i.postimg.cc/26vTMMtC/page.png"
+              alt="Profile picture"
+              className="w-10 h-10 rounded-full"
+            />
+            <span className="font-semibold">Pages</span>
+          </a>
+        </li>
+        <li>
+          <a
+            href="#"
+            className="flex items-center space-x-2 p-2 hover:bg-gray-200 rounded-lg transition-all dark:text-dark-txt dark:hover:bg-dark-third"
+          >
+            <img
+              src="https://i.postimg.cc/LsGNy2Ny/memory.png"
+              alt="Profile picture"
+              className="w-10 h-10 rounded-full"
+            />
+            <span className="font-semibold">Memories</span>
+          </a>
+        </li>
+        <li>
+          <a
+            href="#"
+            className="flex items-center space-x-2 p-2 hover:bg-gray-200 rounded-lg transition-all dark:text-dark-txt dark:hover:bg-dark-third"
+          >
+            <img
+              src="https://i.postimg.cc/Vv8484yn/group.png"
+              alt="Profile picture"
+              className="w-10 h-10 rounded-full"
+            />
+            <span className="font-semibold">Groups</span>
+          </a>
+        </li>
+        <li>
+          <a
+            href="#"
+            className="flex items-center space-x-2 p-2 hover:bg-gray-200 rounded-lg transition-all dark:text-dark-txt dark:hover:bg-dark-third"
+          >
+            <span className="w-10 h-10 rounded-full grid place-items-center bg-gray-300 dark:bg-dark-second">
+              <KeyboardArrowDownIcon />
+            </span>
+            <span className="font-semibold">See more</span>
+          </a>
+        </li>
+        <li className="border-b border-gray-200 dark:border-dark-third mt-6"></li>
+      </ul>
+      {user && (
+        <>
+          <div className="flex justify-between items-center px-4 h-4 group">
+            <span className="font-semibold text-gray-500 text-lg dark:text-dark-txt">
+              Your shortcuts
+            </span>
+            <span className="text-blue-500 cursor-pointer hover:bg-gray-200 dark:hover:bg-dark-third p-2 rounded-md group-hover:inline-block">
+              Edit
+            </span>
+          </div>
+
+          <ul className="p-4">
+            {suggestions.map((data, index) => (
+              <li key={index}>
+                <div className="flex items-center space-x-2 p-2 hover:bg-gray-200 rounded-lg transition-all dark:text-dark-txt dark:hover:bg-dark-third">
+                  <img
+                    src={data.image}
+                    alt={data.name}
+                    className="w-10 h-10 rounded-lg"
+                  />
+                  <span className="font-semibold">{data.name}</span>
+                </div>
+              </li>
+            ))}
+
+            <li>
+              <a
+                href="#"
+                className="flex items-center space-x-2 p-2 hover:bg-gray-200 rounded-lg transition-all dark:text-dark-txt dark:hover:bg-dark-third"
+              >
+                <span className="w-10 h-10 rounded-full grid place-items-center bg-gray-300 dark:bg-dark-second">
+                  <KeyboardArrowDownIcon />
+                </span>
+                <span className="font-semibold">See more</span>
+              </a>
+            </li>
+          </ul>
+        </>
+      )}
+    </div>
+  );
+};
+export default LeftMenu;

components/MainContent.tsx

@@ -0,0 +1,92 @@
+/* eslint-disable @next/next/no-img-element */
+import React, { useEffect, useState } from "react";
+import AddIcon from "@mui/icons-material/Add";
+import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
+import { useAuthState } from "react-firebase-hooks/auth";
+import { auth } from "../firebase/firebase";
+import { faker } from "@faker-js/faker";
+
+type MainContentProps = {};
+
+const MainContent: React.FC<MainContentProps> = () => {
+  const [user] = useAuthState(auth);
+
+  const [suggestions, setSuggestions] = useState<any[]>([]);
+
+  useEffect(() => {
+    const suggestions = [...Array(4)].map((_, i) => ({
+      userId: faker.datatype.uuid(),
+      username: faker.name.firstName(),
+      avatar: faker.image.avatar(),
+      images: faker.image.image(),
+      id: i,
+    }));
+    setSuggestions(suggestions);
+    //console.log(suggestions);
+  }, []);
+
+  return (
+    <div className="relative flex space-x-2 pt-4">
+      <div className="w-1/4 sm:w-1/6 h-44 rounded-xl shadow overflow-hidden flex flex-col group cursor-pointer">
+        <div className="h-3/5 overflow-hidden">
+          <img
+            src={user?.photoURL as string}
+            alt="picture"
+            className="group-hover:transform group-hover:scale-110 transition-all duration-700"
+          />
+        </div>
+        <div className="flex-1 relative flex items-end justify-center pb-2 text-center leading-none dark:bg-dark-second dark:text-dark-txt">
+          <span className="font-semibold">
+            Create a <br /> Story
+          </span>
+          <div className="w-10 h-10 rounded-full bg-blue-500 text-white grid place-items-center text-2xl border-4 border-white dark:border-dark-second absolute -top-5 left-1/2 transform -translate-x-1/2">
+            <AddIcon />
+          </div>
+        </div>
+      </div>
+
+      <div className="w-1/4 sm:w-1/6 h-44 rounded-xl overflow-hidden">
+        <div className="relative h-full group cursor-pointer">
+          <img
+            src={faker.image.image()}
+            alt="Story images"
+            className="group-hover:transform group-hover:scale-110 transition-all duration-700 h-full w-full"
+          />
+          <div className="w-full h-full bg-black absolute top-0 left-0 bg-opacity-10"></div>
+          <span className="absolute bottom-0 left-2 pb-2 font-semibold text-white">
+            Your story
+          </span>
+          <div className="w-10 h-10 rounded-full overflow-hidden absolute top-2 left-2 border-4 border-blue-500">
+            <img src={user?.photoURL as string} alt="Profile picture" />
+          </div>
+        </div>
+      </div>
+      {suggestions.map((data, index) => (
+        <div
+          className="w-1/4 sm:w-1/6 h-44 rounded-xl overflow-hidden"
+          key={index}
+        >
+          <div className="relative h-full group cursor-pointer">
+            <img
+              src={data.images}
+              alt="Story images"
+              className="group-hover:transform group-hover:scale-110 transition-all duration-700 h-full w-full"
+            />
+            <div className="w-full h-full bg-black absolute top-0 left-0 bg-opacity-10"></div>
+            <span className="absolute bottom-0 left-2 pb-2 font-semibold text-white">
+              {data.username}
+            </span>
+            <div className="w-10 h-10 rounded-full overflow-hidden absolute top-2 left-2 border-4 border-blue-500">
+              <img src={data.avatar} alt="Profile picture" />
+            </div>
+          </div>
+        </div>
+      ))}
+
+      <div className="w-12 h-12 rounded-full hidden lg:grid place-items-center text-2xl bg-white absolute -right-6 top-1/2 transform -translate-y-1/2 border border-gray-200 cursor-pointer hover:bg-gray-100 shadow text-gray-500 dark:bg-dark-third dark:border-dark-third dark:text-dark-txt">
+        <ArrowForwardIosIcon />
+      </div>
+    </div>
+  );
+};
+export default MainContent;