├── .eslintrc.json
├── .gitignore
├── README.md
├── components
    ├── Footer.js
    ├── Header.js
    ├── Layout.js
    └── Todo.js
├── context
    └── AuthContext.js
├── firebase.js
├── next.config.js
├── package-lock.json
├── package.json
├── pages
    ├── _app.js
    ├── _document.js
    ├── api
    │   └── hello.js
    ├── index.js
    ├── login.js
    └── userDashboard.js
├── postcss.config.js
├── public
    └── images
    │   ├── android-chrome-192x192.png
    │   ├── android-chrome-512x512.png
    │   ├── apple-touch-icon.png
    │   ├── dog.png
    │   ├── favicon-16x16.png
    │   ├── favicon-32x32.png
    │   ├── favicon.ico
    │   └── site.webmanifest
├── styles
    ├── Home.module.css
    └── globals.css
└── tailwind.config.js


/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "next/core-web-vitals"
3 | }
4 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | /.next/
13 | /out/
14 | 
15 | # production
16 | /build
17 | 
18 | # misc
19 | .DS_Store
20 | *.pem
21 | 
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | .pnpm-debug.log*
27 | 
28 | # local env files
29 | .env*.local
30 | 
31 | # vercel
32 | .vercel
33 | 
34 | # typescript
35 | *.tsbuildinfo
36 | next-env.d.ts
37 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | 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).
 2 | 
 3 | ## Getting Started
 4 | 
 5 | First, run the development server:
 6 | 
 7 | ```bash
 8 | npm run dev
 9 | # or
10 | yarn dev
11 | ```
12 | 
13 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
14 | 
15 | You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
16 | 
17 | [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.js`.
18 | 
19 | 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.
20 | 
21 | ## Learn More
22 | 
23 | To learn more about Next.js, take a look at the following resources:
24 | 
25 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
26 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
27 | 
28 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
29 | 
30 | ## Deploy on Vercel
31 | 
32 | 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.
33 | 
34 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
35 | 


--------------------------------------------------------------------------------
/components/Footer.js:
--------------------------------------------------------------------------------
 1 | import Link from "next/link";
 2 | import React from "react";
 3 | 
 4 | const Footer = () => {
 5 |   return (
 6 |     <main className="flex items-center mt-4 space-x-4 justify-center p-2 border-t border-[#a5a5a5]">
 7 |       <Link
 8 |         href="https://www.linkedin.com/in/ansh-pradhan-2a963818a/"
 9 |         target={"_blank"}
10 |       >
11 |         <i className="text-blue-400 fa-brands fa-linkedin"></i>{" "}
12 |       </Link>
13 |       <Link href="https://github.com/code-ansh-007" target={"_blank"}>
14 |         <i className="text-blue-400 fa-brands fa-github"></i>
15 |       </Link>
16 |       <Link href="https://www.instagram.com/slice_of_ansh/" target={"_blank"}>
17 |         <i className="text-blue-400 fa-brands fa-instagram"></i>{" "}
18 |       </Link>
19 |     </main>
20 |   );
21 | };
22 | 
23 | export default Footer;
24 | 


--------------------------------------------------------------------------------
/components/Header.js:
--------------------------------------------------------------------------------
 1 | import Link from "next/link";
 2 | import React, { useState } from "react";
 3 | import { useAuth } from "../context/AuthContext";
 4 | 
 5 | const Header = () => {
 6 |   const { currentUser } = useAuth();
 7 |   return (
 8 |     <main className="p-2 sticky top-0 bg-inherit border-b border-[#a5a5a5] select-none">
 9 |       <div className="flex items-center justify-between">
10 |         <Link href="/">
11 |           <div className="flex items-center space-x-3">
12 |             <i className="fa-solid fa-dragon text-red-500 text-3xl"></i>
13 |             <span className="font-bold text-xl">RTTDA</span>
14 |           </div>
15 |         </Link>
16 |         <Link href={currentUser ? "/userDashboard" : "/login"}>
17 |           <i className="fa-solid fa-user mr-2 pl-2 duration-200 cursor-pointer hover:opacity-40"></i>
18 |         </Link>
19 |       </div>
20 |     </main>
21 |   );
22 | };
23 | 
24 | export default Header;
25 | 


--------------------------------------------------------------------------------
/components/Layout.js:
--------------------------------------------------------------------------------
 1 | import Footer from "./Footer";
 2 | import Header from "./Header";
 3 | 
 4 | export default function Layout(props) {
 5 |   const { children } = props;
 6 |   return (
 7 |     <>
 8 |       <div className="flex flex-col min-h-screen relative bg-slate-900">
 9 |         <Header />
10 |         <main className="flex-1">{children}</main>
11 |         <Footer />
12 |       </div>
13 |     </>
14 |   );
15 | }
16 | 


--------------------------------------------------------------------------------
/components/Todo.js:
--------------------------------------------------------------------------------
 1 | import { deleteDoc, doc, serverTimestamp, setDoc } from "firebase/firestore";
 2 | import React, { useRef, useState } from "react";
 3 | import { db } from "../firebase";
 4 | 
 5 | const Todo = ({ todo, id }) => {
 6 |   const [edit, setEdit] = useState(false);
 7 |   const [edittedTodo, setEdditedTodo] = useState(todo);
 8 |   const inputRef = useRef(null);
 9 | 
10 |   function setWritingCursor() {
11 |     setEdit(true);
12 |     // ? setting the writing cursor to the last word of the input tag
13 |     setTimeout(() => {
14 |       if (inputRef.current) {
15 |         inputRef.current.focus();
16 |         inputRef.current.selectionStart = inputRef.current.value.length;
17 |         inputRef.current.selectionEnd = inputRef.current.value.length;
18 |       }
19 |     }, 0); // add a delay of 1 second
20 |   }
21 | 
22 |   async function editTodo() {
23 |     // ? logic to make changes to the firestore db
24 |     await setDoc(
25 |       doc(db, "todos", id),
26 |       {
27 |         task: edittedTodo,
28 |       },
29 |       { merge: true }
30 |     );
31 |     setEdit(false);
32 |   }
33 | 
34 |   async function deleteTodo() {
35 |     try {
36 |       await deleteDoc(doc(db, "todos", id));
37 |     } catch (error) {
38 |       console("error while deleting: ", error);
39 |     }
40 |   }
41 | 
42 |   return (
43 |     <>
44 |       <div className="flex items-center space-x-2 my-2 border-2 justify-between sm:max-w-2xl border-blue-500 p-2 w-full rounded-md">
45 |         {edit ? (
46 |           <input
47 |             ref={inputRef}
48 |             spellCheck={false}
49 |             type="text"
50 |             id="edit-input"
51 |             value={edittedTodo}
52 |             className="bg-inherit outline-none w-full"
53 |             onChange={(e) => setEdditedTodo(e.target.value)}
54 |           />
55 |         ) : (
56 |           <span
57 |             style={{
58 |               overflowWrap: "normal",
59 |               wordBreak: "break-word",
60 |             }}
61 |           >
62 |             {todo}
63 |           </span>
64 |         )}
65 | 
66 |         {/* tools div */}
67 |         <div className="flex items-center space-x-3 pr-1 pl-2">
68 |           {edit ? (
69 |             <i
70 |               onClick={editTodo}
71 |               className="fa-solid fa-check text-green-400"
72 |             ></i>
73 |           ) : (
74 |             <i
75 |               onClick={setWritingCursor}
76 |               className="fa-solid fa-pencil duration-200 hover:rotate-45 text-orange-400"
77 |             ></i>
78 |           )}{" "}
79 |           <i
80 |             onClick={deleteTodo}
81 |             className="fa-solid fa-trash hover:scale-105 hover:animate-pulse text-red-500"
82 |           ></i>
83 |         </div>
84 |       </div>
85 |     </>
86 |   );
87 | };
88 | 
89 | export default Todo;
90 | 


--------------------------------------------------------------------------------
/context/AuthContext.js:
--------------------------------------------------------------------------------
 1 | import React, { useContext, useState, useEffect, useRef } from "react";
 2 | import { auth, db } from "../firebase";
 3 | import {
 4 |   signInWithEmailAndPassword,
 5 |   createUserWithEmailAndPassword,
 6 |   signOut,
 7 |   onAuthStateChanged,
 8 | } from "firebase/auth";
 9 | import { doc, getDoc } from "firebase/firestore";
10 | 
11 | const AuthContext = React.createContext();
12 | 
13 | export function useAuth() {
14 |   return useContext(AuthContext);
15 | }
16 | 
17 | export function AuthProvider({ children }) {
18 |   const [currentUser, setCurrentUser] = useState(null);
19 |   const [loading, setLoading] = useState(true);
20 |   const userInfo = useRef();
21 | 
22 |   async function signUp(email, password) {
23 |     await createUserWithEmailAndPassword(auth, email, password);
24 |     return;
25 |   }
26 |   async function login(email, password) {
27 |     await signInWithEmailAndPassword(auth, email, password);
28 |     return;
29 |   }
30 |   async function logout() {
31 |     await signOut(auth);
32 |     return;
33 |   }
34 | 
35 |   useEffect(() => {
36 |     const unsubscribe = onAuthStateChanged(auth, async (user) => {
37 |       setCurrentUser(user);
38 |       setLoading(false);
39 |     });
40 |     return unsubscribe; // * this is the cleanup function of the useeffect
41 |   }, []);
42 | 
43 |   const value = {
44 |     currentUser,
45 |     login,
46 |     signUp,
47 |     logout,
48 |     userInfo,
49 |   };
50 | 
51 |   return (
52 |     <AuthContext.Provider value={value}>
53 |       {/* Below code means that return the children iff the loading state is false */}
54 |       {!loading && children}
55 |     </AuthContext.Provider>
56 |   );
57 | }
58 | 


--------------------------------------------------------------------------------
/firebase.js:
--------------------------------------------------------------------------------
 1 | import { initializeApp } from "firebase/app";
 2 | import { getAuth } from "firebase/auth";
 3 | import { getFirestore } from "firebase/firestore";
 4 | 
 5 | const firebaseConfig = {
 6 |   apiKey: process.env.NEXT_PUBLIC_APIKEY,
 7 |   authDomain: process.env.NEXT_PUBLIC_AUTHDOMAIN,
 8 |   projectId: process.env.NEXT_PUBLIC_PROJECTID,
 9 |   storageBucket: process.env.NEXT_PUBLIC_STORAGEBUCKET,
10 |   messagingSenderId: process.env.NEXT_PUBLIC_MESSAGINGSENDERID,
11 |   appId: process.env.NEXT_PUBLIC_APPID,
12 | };
13 | 
14 | const app = initializeApp(firebaseConfig);
15 | export const auth = getAuth(app);
16 | export const db = getFirestore(app);
17 | 


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('next').NextConfig} */
 2 | const nextConfig = {
 3 |   reactStrictMode: true,
 4 |   swcMinify: true,
 5 |   eslint: {
 6 |     ignoreDuringBuilds: true,
 7 |   },
 8 | };
 9 | 
10 | module.exports = nextConfig;
11 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "rttda",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint"
10 |   },
11 |   "dependencies": {
12 |     "firebase": "^9.17.1",
13 |     "next": "13.1.6",
14 |     "react": "18.2.0",
15 |     "react-beautiful-dnd": "^13.1.1",
16 |     "react-dom": "18.2.0",
17 |     "react-icons": "^4.7.1"
18 |   },
19 |   "devDependencies": {
20 |     "autoprefixer": "^10.4.13",
21 |     "eslint": "8.34.0",
22 |     "eslint-config-next": "13.1.6",
23 |     "postcss": "^8.4.21",
24 |     "tailwind-scrollbar": "^2.1.0",
25 |     "tailwindcss": "^3.2.6"
26 |   }
27 | }
28 | 


--------------------------------------------------------------------------------
/pages/_app.js:
--------------------------------------------------------------------------------
 1 | import Layout from "../components/Layout";
 2 | import { AuthProvider } from "../context/AuthContext";
 3 | import "../styles/globals.css";
 4 | 
 5 | function MyApp({ Component, pageProps }) {
 6 |   return (
 7 |     <AuthProvider>
 8 |       <Layout>
 9 |         <Component {...pageProps} />
10 |       </Layout>
11 |     </AuthProvider>
12 |   );
13 | }
14 | 
15 | export default MyApp;
16 | 


--------------------------------------------------------------------------------
/pages/_document.js:
--------------------------------------------------------------------------------
 1 | import { Html, Head, Main, NextScript } from "next/document";
 2 | 
 3 | export default function Document() {
 4 |   return (
 5 |     <Html>
 6 |       <Head>
 7 |         {/* GOOGLE FONTS MONSERRAT FAMILY IMPORT */}
 8 |         <link rel="preconnect" href="https://fonts.googleapis.com" />
 9 |         <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin />
10 |         <link
11 |           href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,200;0,300;0,400;0,500;0,600;1,600&display=swap"
12 |           rel="stylesheet"
13 |         />
14 |         {/* FAVICON *** Not working right now*/}
15 |         <link
16 |           rel="apple-touch-icon"
17 |           sizes="180x180"
18 |           href="/images/apple-touch-icon.png"
19 |         />
20 |         <link
21 |           rel="icon"
22 |           type="image/png"
23 |           sizes="32x32"
24 |           href="/images/favicon-32x32.png"
25 |         />
26 |         <link
27 |           rel="icon"
28 |           type="image/png"
29 |           sizes="16x16"
30 |           href="/images/favicon-16x16.png"
31 |         />
32 |         <link rel="manifest" href="/images/site.webmanifest" />
33 |         {/* FONT AWESOME ICONS CDN IMPORT */}
34 |         <link
35 |           rel="stylesheet"
36 |           href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"
37 |           integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ=="
38 |           crossOrigin="anonymous"
39 |           referrerPolicy="no-referrer"
40 |         />
41 |       </Head>
42 |       <body className="scrollbar-thin scrollbar-thumb-blue-500 scrollbar-h-[20px] scrollbar-rounded-md">
43 |         <Main />
44 |         <NextScript />
45 |         <div id="portal"></div>
46 |         <div id="portal2"></div>
47 |       </body>
48 |     </Html>
49 |   );
50 | }
51 | 


--------------------------------------------------------------------------------
/pages/api/hello.js:
--------------------------------------------------------------------------------
1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
2 | 
3 | export default function handler(req, res) {
4 |   res.status(200).json({ name: 'John Doe' })
5 | }
6 | 


--------------------------------------------------------------------------------
/pages/index.js:
--------------------------------------------------------------------------------
  1 | import Head from "next/head";
  2 | import { useEffect, useState } from "react";
  3 | import Todo from "../components/Todo";
  4 | import { db } from "../firebase";
  5 | import {
  6 |   collection,
  7 |   addDoc,
  8 |   serverTimestamp,
  9 |   onSnapshot,
 10 |   query,
 11 |   where,
 12 |   orderBy,
 13 | } from "firebase/firestore";
 14 | import { useAuth } from "../context/AuthContext";
 15 | import { useRouter } from "next/router";
 16 | import { AiOutlineLoading3Quarters } from "react-icons/ai";
 17 | import { VscLoading } from "react-icons/vsc";
 18 | import thinkDog from "../public/images/dog.png";
 19 | import Image from "next/image";
 20 | 
 21 | export default function Home() {
 22 |   const [todo, setTodo] = useState("");
 23 |   const [todos, setTodos] = useState([]);
 24 |   const { currentUser } = useAuth();
 25 |   const [loading, setLoading] = useState(false);
 26 |   const router = useRouter();
 27 |   const [todoLoading, setTodoLoading] = useState(false);
 28 | 
 29 |   async function handleToDoAdd() {
 30 |     setLoading(true);
 31 |     if (!todo) {
 32 |       return;
 33 |     }
 34 |     try {
 35 |       await addDoc(collection(db, "todos"), {
 36 |         task: todo,
 37 |         uid: currentUser.uid,
 38 |         timestamp: serverTimestamp(),
 39 |       });
 40 |       setLoading(false);
 41 |     } catch (error) {
 42 |       console.log("error in adding doc: ", error);
 43 |     }
 44 |   }
 45 | 
 46 |   {
 47 |     currentUser &&
 48 |       useEffect(() => {
 49 |         setTodoLoading(true);
 50 |         const unsubscribe = onSnapshot(
 51 |           query(
 52 |             collection(db, "todos"),
 53 |             where("uid", "==", currentUser?.uid),
 54 |             orderBy("timestamp", "desc")
 55 |           ),
 56 |           (snapshot) => {
 57 |             setTodos(snapshot.docs);
 58 |             setTodoLoading(false);
 59 |           }
 60 |         );
 61 |         return unsubscribe; // ? clean up function
 62 |       }, [db]);
 63 |   }
 64 | 
 65 |   // ! chat GPT code ---> helped a lot really(firebase indexing was causing issues)
 66 |   // useEffect(() => {
 67 |   //   const unsubscribe = onSnapshot(collection(db, "todos"), (snapshot) => {
 68 |   //     console.log(snapshot.docs);
 69 |   //     setTodos(
 70 |   //       snapshot.docs
 71 |   //         .filter((doc) => doc.data().uid === currentUser.uid)
 72 |   //         .sort((a, b) => b.data().timestamp - a.data().timestamp)
 73 |   //     );
 74 |   //   });
 75 |   //   return unsubscribe; // ? clean up function
 76 |   // }, [db, currentUser.uid]);
 77 | 
 78 |   return (
 79 |     <>
 80 |       <Head>
 81 |         <title>RTTDA</title>
 82 |         <meta name="description" content="Generated by create next app" />
 83 |         <link rel="icon" href="/favicon.ico" />
 84 |       </Head>
 85 |       <section className="flex flex-col items-center justify-center mt-5 px-3">
 86 |         {/* BELOW IS ADD TODO DIV */}
 87 |         <div className="flex items-center mb-7">
 88 |           <input
 89 |             type="text"
 90 |             value={todo}
 91 |             placeholder="Enter To Do..."
 92 |             className="text-sm px-2 py-1 w-[32ch] outline-none bg-inherit border-2 border-orange-400 rounded-md rounded-r-none"
 93 |             onChange={(e) => setTodo(e.target.value)}
 94 |           />
 95 |           <button
 96 |             onClick={() => {
 97 |               setTodo("");
 98 |               if (currentUser) {
 99 |                 handleToDoAdd();
100 |               } else {
101 |                 router.push("/login");
102 |               }
103 |             }}
104 |             disabled={loading}
105 |             className="border-2 border-l-0 text-orange-200 active:bg-orange-500 active:text-gray-200 duration-200 border-orange-400 py-[2px] px-2 rounded-r-md"
106 |           >
107 |             Add
108 |           </button>
109 |         </div>
110 |         <main
111 |           className={
112 |             todoLoading
113 |               ? "flex flex-col items-center justify-center h-[70vh]"
114 |               : "flex flex-col items-center justify-center"
115 |           }
116 |         >
117 |           {/* TODOS DIV */}
118 |           {todoLoading ? (
119 |             <div>
120 |               <i className="fa-solid text-7xl animate-spin text-blue-500 fa-spinner"></i>
121 |             </div>
122 |           ) : todos.length > 0 ? (
123 |             todos.map((item) => {
124 |               return (
125 |                 <Todo key={item.id} todo={item.data().task} id={item.id} />
126 |               );
127 |             })
128 |           ) : (
129 |             <div className="flex flex-col items-center mt-[20vh] sm:mt-[14vh]">
130 |               <Image src={thinkDog} width={200} alt="thinking dog pic" />
131 |               <span className="text-2xl font-semibold">No Todos Yet</span>
132 |             </div>
133 |           )}
134 |         </main>
135 |       </section>
136 |     </>
137 |   );
138 | }
139 | 


--------------------------------------------------------------------------------
/pages/login.js:
--------------------------------------------------------------------------------
  1 | import Head from "next/head";
  2 | import { useRouter } from "next/router";
  3 | import React, { useState } from "react";
  4 | import { useAuth } from "../context/AuthContext";
  5 | 
  6 | const Login = () => {
  7 |   const [email, setEmail] = useState("");
  8 |   const [password, setPassword] = useState("");
  9 |   const [error, setError] = useState(null);
 10 |   const [isLoggingIn, setIsLoggingIn] = useState(true);
 11 |   const { login, signUp } = useAuth(); // ? using firebase login functions via the auth context
 12 |   const router = useRouter();
 13 | 
 14 |   async function handleSubmit(e) {
 15 |     e.preventDefault();
 16 |     if (!email || !password) {
 17 |       setError(
 18 |         !email && !password
 19 |           ? "Please enter email & password"
 20 |           : !email
 21 |           ? "Please enter email"
 22 |           : "Please enter password"
 23 |       );
 24 |       return;
 25 |     }
 26 |     if (isLoggingIn) {
 27 |       try {
 28 |         await login(email, password);
 29 |         setEmail("");
 30 |         setPassword("");
 31 |         router.push("/");
 32 |       } catch (error) {
 33 |         // ? the user will only reach this state if he or she is filling the wrong credentials
 34 |         setError("Incorrect email or password");
 35 |       }
 36 |       return;
 37 |     }
 38 |     // ? if user is not logging in it means that he is registering for the first time so he will signUp
 39 |     try {
 40 |       await signUp(email, password);
 41 |       setEmail("");
 42 |       setPassword("");
 43 |       router.push("/");
 44 |     } catch (error) {
 45 |       if (error.code == "auth/weak-password") {
 46 |         setError("Password length should be atleast 6");
 47 |       }
 48 |     }
 49 |     return;
 50 |   }
 51 |   return (
 52 |     <>
 53 |       <Head>
 54 |         <title>RTTDA Login</title>
 55 |       </Head>
 56 |       <main className="mt-[100px] w-full flex flex-col space-y-4 items-center justify-center">
 57 |         <div className="relative">
 58 |           <i className="fa-solid fa-dragon text-red-500 text-6xl"></i>
 59 |           <i className="fa-sharp fa-solid animate-pulse absolute bottom-6 left-20 fa-fire-flame-curved text-2xl rotate-90 text-orange-400"></i>
 60 |         </div>
 61 |         <span className="text-2xl font-bold">
 62 |           {isLoggingIn ? "Login" : "Sign Up"}
 63 |         </span>
 64 |         {error && (
 65 |           <div className="border-2  border-red-500 p-2 py-1 text-red-300 rounded-md text-sm">
 66 |             {error}
 67 |           </div>
 68 |         )}
 69 |         <section className="flex flex-col space-y-4 items-center">
 70 |           {/* LOGIN WITH CREDENTIALS DIV */}
 71 |           <form
 72 |             onSubmit={handleSubmit}
 73 |             className="flex flex-col items-center space-y-2"
 74 |           >
 75 |             <input
 76 |               type="email"
 77 |               value={email}
 78 |               className="border-2 border-blue-500 p-2 w-[25ch] text-[#a5a5a5] text-sm  rounded-md bg-inherit outline-none"
 79 |               placeholder="Email"
 80 |               onChange={(e) => {
 81 |                 setError(null);
 82 |                 setEmail(e.target.value);
 83 |               }}
 84 |             />
 85 |             <input
 86 |               type="password"
 87 |               value={password}
 88 |               className="border-2 border-blue-500 p-2 w-[25ch] text-[#a5a5a5] text-sm  rounded-md bg-inherit outline-none"
 89 |               placeholder="Password"
 90 |               onChange={(e) => {
 91 |                 setError(null);
 92 |                 setPassword(e.target.value);
 93 |               }}
 94 |             />
 95 |             <button
 96 |               type="submit"
 97 |               className="border-blue-500 w-full border-2 text-blue-300 p-1 px-[16px] rounded-md  duration-200  focus:outline-none active:scale-105 ease-in-out"
 98 |             >
 99 |               Submit
100 |             </button>
101 |           </form>
102 |           {/* LOGIN WITH GOOGLE DIV */}
103 |           {/* <div className="flex flex-col items-center space-y-5">
104 |             <span>OR</span>
105 |             <button className="border-blue-500 border-2 text-blue-300 p-1 w-full rounded-md  duration-200  focus:outline-none active:scale-105 ease-in-out">
106 |               {isLoggingIn ? "Login" : "Sign Up"} With Google
107 |             </button>
108 |           </div> */}
109 |           <span
110 |             onClick={() => setIsLoggingIn(!isLoggingIn)}
111 |             className="active:scale-105 duration-200 transition transform ease-in-out"
112 |           >
113 |             {isLoggingIn ? "Sign Up" : "Login"}
114 |           </span>
115 |         </section>
116 |       </main>
117 |     </>
118 |   );
119 | };
120 | 
121 | export default Login;
122 | 


--------------------------------------------------------------------------------
/pages/userDashboard.js:
--------------------------------------------------------------------------------
 1 | import Head from "next/head";
 2 | import { useRouter } from "next/router";
 3 | import React from "react";
 4 | import { useAuth } from "../context/AuthContext";
 5 | 
 6 | const UserDashboard = () => {
 7 |   const router = useRouter();
 8 |   const { currentUser, logout } = useAuth();
 9 |   const email = currentUser?.email; // ? did this so as to remove flicker of the email when the user logs out
10 |   return (
11 |     <>
12 |       <Head>
13 |         <title>RTTDA User Profile</title>
14 |       </Head>
15 |       <main className="flex flex-col items-center w-full pt-[210px] overflow-y-auto space-y-4 justify-center">
16 |         <span className="text-blue-300">
17 |           Signed in as:&nbsp; <span className="text-blue-300">{email}</span>
18 |         </span>
19 |         <button
20 |           onClick={async () => {
21 |             await logout();
22 |             router.push("/");
23 |           }}
24 |           type="submit"
25 |           className="border-blue-500 w-fit border-2 text-blue-300 p-1 px-[16px] rounded-md  duration-200  focus:outline-none active:scale-105 ease-in-out"
26 |         >
27 |           Logout
28 |         </button>
29 |       </main>
30 |     </>
31 |   );
32 | };
33 | 
34 | export default UserDashboard;
35 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/public/images/android-chrome-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/code-ansh-007/RTTDA/43ca6d5d01e9c99c6b8d4c465aa05fb81b5bbc81/public/images/android-chrome-192x192.png


--------------------------------------------------------------------------------
/public/images/android-chrome-512x512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/code-ansh-007/RTTDA/43ca6d5d01e9c99c6b8d4c465aa05fb81b5bbc81/public/images/android-chrome-512x512.png


--------------------------------------------------------------------------------
/public/images/apple-touch-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/code-ansh-007/RTTDA/43ca6d5d01e9c99c6b8d4c465aa05fb81b5bbc81/public/images/apple-touch-icon.png


--------------------------------------------------------------------------------
/public/images/dog.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/code-ansh-007/RTTDA/43ca6d5d01e9c99c6b8d4c465aa05fb81b5bbc81/public/images/dog.png


--------------------------------------------------------------------------------
/public/images/favicon-16x16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/code-ansh-007/RTTDA/43ca6d5d01e9c99c6b8d4c465aa05fb81b5bbc81/public/images/favicon-16x16.png


--------------------------------------------------------------------------------
/public/images/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/code-ansh-007/RTTDA/43ca6d5d01e9c99c6b8d4c465aa05fb81b5bbc81/public/images/favicon-32x32.png


--------------------------------------------------------------------------------
/public/images/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/code-ansh-007/RTTDA/43ca6d5d01e9c99c6b8d4c465aa05fb81b5bbc81/public/images/favicon.ico


--------------------------------------------------------------------------------
/public/images/site.webmanifest:
--------------------------------------------------------------------------------
1 | {"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}


--------------------------------------------------------------------------------
/styles/Home.module.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/code-ansh-007/RTTDA/43ca6d5d01e9c99c6b8d4c465aa05fb81b5bbc81/styles/Home.module.css


--------------------------------------------------------------------------------
/styles/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 | 
5 | * {
6 |   font-family: "Montserrat", sans-serif;
7 |   color: #a5a5a5;
8 | }
9 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | module.exports = {
 3 |   content: [
 4 |     "./app/**/*.{js,ts,jsx,tsx}",
 5 |     "./pages/**/*.{js,ts,jsx,tsx}",
 6 |     "./components/**/*.{js,ts,jsx,tsx}",
 7 | 
 8 |     // Or if using `src` directory:
 9 |     "./src/**/*.{js,ts,jsx,tsx}",
10 |   ],
11 |   theme: {
12 |     extend: {},
13 |   },
14 |   plugins: [require("tailwind-scrollbar")],
15 | };
16 | 


--------------------------------------------------------------------------------