Added: Attendance Tracker Next.js (Avdhesh-Varshney#757)

* Add: attendance-track-nextjs-app * updated README.md in Next-JS-Projects/Attendance-Tracking-App * bug fixes * removed unecessary formated code * fixed Readme.md * Added project to readme.md * fixed readme.md in next.js folder * fixed readme.md
amanver45 · Aug 10, 2024 · 330c1d7 · 330c1d7
1 parent a87fdab
commit 330c1d7
Show file tree

Hide file tree

Showing 39 changed files with 1,620 additions and 1 deletion.
diff --git a/Next-JS-Projects/Advanced/Attendance-Tracking-App/.env.sample b/Next-JS-Projects/Advanced/Attendance-Tracking-App/.env.sample
@@ -0,0 +1,6 @@
+NEXT_PUBLIC_FIREBASE_API_KEY=your_api_key
+NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_auth_domain
+NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_project_id
+NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your_storage_bucket
+NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your_messaging_sender_id
+NEXT_PUBLIC_FIREBASE_APP_ID=your_app_id
diff --git a/Next-JS-Projects/Advanced/Attendance-Tracking-App/.eslintrc.json b/Next-JS-Projects/Advanced/Attendance-Tracking-App/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}
diff --git a/Next-JS-Projects/Advanced/Attendance-Tracking-App/README.md b/Next-JS-Projects/Advanced/Attendance-Tracking-App/README.md
@@ -0,0 +1,88 @@
+<h1 align='center'><b>💥 Attendance Tracker 💥</b></h1>
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+<h3 align='center'>Tech Stack Used 🎮</h3>
+<!-- enlist all the technologies used to create this project from them (Remove comment using 'ctrl+z' or 'command+z') -->
+
+<div align='center'>
+
+![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=tailwind&logoColor=white)
+![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white)
+![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)
+![TailwindCSS](https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge&logo=tailwind-css&logoColor=white)
+![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB)
+![Nextjs](https://img.shields.io/badge/Nextjs-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB)
+![Firebase](https://img.shields.io/badge/firebase-a08021?style=for-the-badge&logo=firebase&logoColor=ffcd34)
+
+</div>
+
+![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847)
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+## :zap: Description 📃
+
+<div>
+  <!-- <p>Add Description of the project</p> -->
+    <p>
+   The attendance tracker is a web application that allows users to keep track of attendance for various events or activities. It is built using a combination of HTML, CSS, and JavaScript for the frontend. The UI is designed using Tailwind CSS, which provides a responsive and modern look to the application. React and Next.js are used for building the frontend components and managing the application's state. Firebase is used as the backend service for storing and retrieving attendance data.
+
+Feel free to explore the screenshots section to get a visual representation of the application. If you have any questions or need further assistance, please don't hesitate to reach out.
+
+</p>
+</div>
+</div>
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+## :zap: How to run it? 🕹️
+
+<!-- Add steps how to run this project -->
+
+Steps to run this website in your local machine is as follows :
+
+1. Fork this repository.
+2. Clone the repository to your local machine.
+3. Open a terminal and navigate to the project directory.
+4. Create a .env file & fill the following .env template with your firebase credentials
+
+```
+NEXT_PUBLIC_FIREBASE_API_KEY=your_api_key
+NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_auth_domain
+NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_project_id
+NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your_storage_bucket
+NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your_messaging_sender_id
+NEXT_PUBLIC_FIREBASE_APP_ID=your_app_id
+```
+
+5. Run the command `npm install` to install the required dependencies.
+6. Run the command `npm run dev` to start the development server.
+7. Open a web browser and visit `localhost:3000` to access the application.
+8. Make sure you have Node.js installed on your machine before running the above commands.
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+## :zap: Screenshots 📸
+
+<!-- add the screenshot of the project (Mandatory) -->
+
+<img src='./screenshot.webp'>
+
+![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847)
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+<h4 align='center'>Developed By <b><i>Anirudh Sharma</i></b> 👦</h4>
+<p align='center'>
+  <a href='https://www.linkedin.com/in/anirudh-sharma-58ba29256/'>
+    <img src='https://img.shields.io/badge/linkedin-%230077B5.svg?style=for-the-badge&logo=linkedin&logoColor=white' />
+  </a>
+  <a href='https://github.com/anisharma07'>
+    <img src='https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white' />
+  </a>
+</p>
+
+<h4 align='center'>Happy Coding 🧑‍💻</h4>
+
+<h3 align="center">Show some &nbsp;❤️&nbsp; by &nbsp;🌟&nbsp; this repository!</h3>
diff --git a/Next-JS-Projects/Advanced/Attendance-Tracking-App/app/(root)/(home)/page.tsx b/Next-JS-Projects/Advanced/Attendance-Tracking-App/app/(root)/(home)/page.tsx
@@ -0,0 +1,63 @@
+"use client";
+import React, { useState, useEffect } from "react";
+import { auth, provider, db } from "../../../firebase/config";
+import {
+  signInWithPopup,
+  signOut,
+  onAuthStateChanged,
+  User,
+} from "firebase/auth";
+import { doc, setDoc, getDoc } from "firebase/firestore";
+import Home from "@/Components/Home/Home";
+import Landing from "@/Components/Landing";
+interface UserData {
+  attended: number;
+  total: number;
+  Sub_name: string;
+  target_percentage: number;
+}
+
+const Page: React.FC = () => {
+  const [user, setUser] = useState<User | null>(null);
+  const [userData, setUserData] = useState<UserData | null>(null);
+
+  useEffect(() => {
+    const unsubscribe = onAuthStateChanged(auth, async (currentUser) => {
+      setUser(currentUser);
+      if (currentUser) {
+        const userDoc = doc(db, "users", currentUser.uid);
+        const userDocSnap = await getDoc(userDoc);
+        if (userDocSnap.exists()) {
+          setUserData(userDocSnap.data() as UserData);
+        } else {
+          console.log("No such document!");
+        }
+      }
+    });
+
+    return () => unsubscribe();
+  }, []);
+
+  const handleLogin = async () => {
+    try {
+      await signInWithPopup(auth, provider);
+    } catch (error) {
+      console.error("Error signing in with Google: ", error);
+    }
+  };
+
+  const handleLogout = async () => {
+    try {
+      await signOut(auth);
+    } catch (error) {
+      console.error("Error signing out: ", error);
+    }
+  };
+  return !user ? (
+    <Landing login={handleLogin} />
+  ) : (
+    <Home logout={handleLogout} user={user} userData={userData} />
+  );
+};
+
+export default Page;
diff --git a/Next-JS-Projects/Advanced/Attendance-Tracking-App/app/(root)/calendar/page.tsx b/Next-JS-Projects/Advanced/Attendance-Tracking-App/app/(root)/calendar/page.tsx
@@ -0,0 +1,16 @@
+import CalendarComponent from "@/Components/Calendar/Calendar";
+import React from "react";
+import Footer from "@//Components/Footer";
+import Navbar from "@/Components/Navbar";
+
+const page = () => {
+  return (
+    <main className="flex flex-col justify-between w-full bg-zinc-900 text-zinc-300 relative">
+      <Navbar />
+      <CalendarComponent />
+      <Footer />
+    </main>
+  );
+};
+
+export default page;
diff --git a/Next-JS-Projects/Advanced/Attendance-Tracking-App/app/(root)/layout.tsx b/Next-JS-Projects/Advanced/Attendance-Tracking-App/app/(root)/layout.tsx
@@ -0,0 +1,7 @@
+import React from "react";
+
+const Layout = ({ children }: { children: React.ReactNode }) => {
+  return <main className="">{children}</main>;
+};
+
+export default Layout;
diff --git a/Next-JS-Projects/Advanced/Attendance-Tracking-App/app/(root)/settings/dsa/page.tsx b/Next-JS-Projects/Advanced/Attendance-Tracking-App/app/(root)/settings/dsa/page.tsx
@@ -0,0 +1,47 @@
+import Stamps from "@/Components/Settings/Stamps";
+import React from "react";
+
+const page = () => {
+  return (
+    <div className="w-full page-height-class flex flex-col items-center p-4">
+      {/* <div className="bg-red-700 w-[100px] h-[100px] rounded-full"></div> */}
+
+      <div className="w-[95%] sm:w-[80%] max-w-[1000px] ">
+        <div className="flex items-center justify-between w-full mb-6">
+          <h1 className="font-semibold text-[21px]">DSA Report</h1>
+
+          <a
+            href="/dashboard/settings"
+            className="p-2 bg-[#23252c] hover:bg-[#2e49dd] rounded-full"
+          >
+            {" "}
+            <svg
+              className="w-6 h-6"
+              viewBox="0 0 38 28"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M0.521549 12.972C-0.186031 13.6796 -0.186031 14.8268 0.521549 15.5344L12.0522 27.065C12.7598 27.7726 13.907 27.7726 14.6146 27.065C15.3222 26.3575 15.3222 25.2102 14.6146 24.5027L4.3651 14.2532L14.6146 4.00369C15.3222 3.29611 15.3222 2.1489 14.6146 1.44132C13.907 0.733739 12.7598 0.733739 12.0522 1.44132L0.521549 12.972ZM37.3496 12.4413L1.80273 12.4413V16.065L37.3496 16.065V12.4413Z"
+                fill="white"
+              />
+            </svg>
+          </a>
+        </div>
+        <div className="w-full bg-[#23252c] p-4 rounded-md flex justify-evenly items-center text-[18px] sm:text-[21px] font-medium mb-6">
+          <p>Date</p>
+          <p>Time</p>
+          <p>Status</p>
+        </div>
+        <Stamps color="#00B012" />
+        <Stamps color="#00B012" />
+        <Stamps color="#B00000" />
+        <Stamps color="#00B012" />
+        <Stamps color="#00B012" />
+        <Stamps color="#B00000" />
+      </div>
+    </div>
+  );
+};
+
+export default page;
diff --git a/Next-JS-Projects/Advanced/Attendance-Tracking-App/app/(root)/settings/layout.tsx b/Next-JS-Projects/Advanced/Attendance-Tracking-App/app/(root)/settings/layout.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+
+import Footer from "@//Components/Footer";
+import Navbar from "@/Components/Navbar";
+
+const Layout = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <main className="flex flex-col justify-between w-full bg-zinc-900 text-zinc-300 relative">
+      <Navbar />
+      {children}
+      <Footer />
+    </main>
+  );
+};
+
+export default Layout;
diff --git a/Next-JS-Projects/Advanced/Attendance-Tracking-App/app/(root)/settings/page.tsx b/Next-JS-Projects/Advanced/Attendance-Tracking-App/app/(root)/settings/page.tsx
@@ -0,0 +1,7 @@
+import Settings from "@/Components/Settings/Settings";
+import React from "react";
+const page = () => {
+  return <Settings />;
+};
+
+export default page;
diff --git a/Next-JS-Projects/Advanced/Attendance-Tracking-App/app/favicon.ico b/Next-JS-Projects/Advanced/Attendance-Tracking-App/app/favicon.ico
diff --git a/Next-JS-Projects/Advanced/Attendance-Tracking-App/app/globals.css b/Next-JS-Projects/Advanced/Attendance-Tracking-App/app/globals.css
@@ -0,0 +1,84 @@
+@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.page-height-class {
+  /* height: calc(100vh - 120px); */
+  margin-bottom: 69px;
+}
+.gradient-profile-text {
+  background: linear-gradient(90deg, #0097a1 0%, #ffffff 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.bg-black-gradient {
+  background: linear-gradient(
+    144.39deg,
+    #ffffff -278.56%,
+    #6d6d6d -78.47%,
+    #11101d 91.61%
+  );
+}
+.animated-slide-top {
+  -webkit-animation: slide-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+  animation: slide-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+  z-index: 1000;
+}
+
+@-webkit-keyframes slide-top {
+  0% {
+    -webkit-transform: translateY(100px);
+    transform: translateY(100px);
+  }
+  100% {
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+
+@keyframes slide-top {
+  0% {
+    -webkit-transform: translateY(100px);
+    transform: translateY(100px);
+  }
+  100% {
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+
+.custom-calendar {
+  width: 400px;
+  min-width: 400px;
+  height: auto;
+  font-size: 1.2rem;
+  /* background-color: #000000; */
+  /* background: #000000; */
+  border-radius: 15px;
+  padding: 20px;
+  color: black;
+}
+
+.custom-calendar .react-calendar__tile {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* background-color: #27272a; */
+  /* color: white; */
+}
+
+.custom-calendar .react-calendar__month-view__weekdays__weekday {
+  font-weight: bold;
+  color: blue;
+  text-align: center;
+  padding: 10px;
+}
+.custom-calendar .react-calendar__tile--now {
+  background-color: rgb(255, 255, 64);
+  color: red;
+}
+.custom-calendar .react-calendar__month-view__days__day:nth-child(7n-1), /* Sunday */
+.custom-calendar .react-calendar__month-view__days__day:nth-child(7n) {
+  color: #ff0000; /* Change to desired text color */
+}
diff --git a/Next-JS-Projects/Advanced/Attendance-Tracking-App/app/layout.tsx b/Next-JS-Projects/Advanced/Attendance-Tracking-App/app/layout.tsx
@@ -0,0 +1,25 @@
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "./globals.css";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className={`${inter.className} bg-zinc-900`}>
+        {children}
+        {/* <div style={{ width: "100%", height: "69px" }}></div> */}
+      </body>
+    </html>
+  );
+}
diff --git a/Next-JS-Projects/Advanced/Attendance-Tracking-App/firebase/config.ts b/Next-JS-Projects/Advanced/Attendance-Tracking-App/firebase/config.ts
@@ -0,0 +1,23 @@
+import { initializeApp } from "firebase/app";
+import { getAuth, GoogleAuthProvider } from "firebase/auth";
+import { getFirestore } from "firebase/firestore";
+import dotenv from "dotenv";
+
+dotenv.config(); // Load environment variables from .env file
+
+const firebaseConfig = {
+  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
+  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
+  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
+  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
+  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
+  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
+};
+
+// Initialize Firebase
+const app = initializeApp(firebaseConfig);
+const auth = getAuth(app);
+const provider = new GoogleAuthProvider();
+const db = getFirestore(app);
+
+export { auth, provider, db };