Skip to content

Front End Architecture

Jump to bottom
jotchwali edited this page Oct 11, 2024 · 4 revisions

Stack 📔

Front-end/ Client-side 🧑🏻‍💻

React

Pages and Components Used

Admin-Login

The AdminLogin component provides an interface for administrators to log into the WDCC Passport system. It features Google Sign-In functionality, a loading animation during the authentication process, and displays a welcoming message with the title "Admin Dashboard." The page layout is divided into two main sections: the left section includes login details and the sign-in button, while the right section shows additional passport-related content.

  • Components Used:
    • GoogleSigninBtn
    • PassportMain
    • useGoogleSignIn (imports the hook)
  • Style used: Admin-Login.css

Dashboard

The Dashboard component displays the main interface for the admin dashboard, consisting of a header and a button for generating QR codes. The layout is styled with a dashboard-specific background and provides quick access to key administrative functions like QR code generation.

  • Components Used:
    • Header
    • GenerateQRCodeButton
  • Style used: dashboard.css

DashboardPrizes

The DashboardPrizes component presents the admin interface for managing prizes. It includes a hamburger menu for navigation, a title labeled "Prize Dashboard," and the club's logo. The main content is a centered table, displayed through the PrizeTable component, where admins can view and manage prize-related data.

  • Components Used:
    • PrizeTable
    • HamburgerMenu
    • logo
  • Style used: event.css

Events

The Events component displays an admin dashboard for managing events. It fetches event data from the server and lists them in a table format, showing details like event name, QR code, stamp image, status, and attendance count. Admins can also edit or delete events and create new ones using a button. The page features a logo, a navigation menu, and a "Load More" button to view additional events if available.

  • Components Used:
    • axios
    • logo
    • HamburgerMenu
  • Style used: event.css

Form

The Form component provides a user interface for creating or managing QR codes. It includes a logo and a form, rendered by the FormLogo and QRCodeForm components, respectively. The layout is styled with a specific background and organized into inner and outer containers for form content.

  • Components Used:
    • FormLogo
    • QRCodeForm
  • Style used: form.css

Home

The Home component fetches and displays a personalized greeting or introduction using the React Query library. It retrieves data from an API based on a dynamic route parameter (name). While loading, a spinner is displayed, and in case of an error, the error message is shown. The fetched data is rendered once available.

  • Components Used:
    • QueryKeys
    • axios
    • urls
  • Style used: N/A

Landing-Page

The HomePage component serves as the landing page for the WDCC Passport system, introducing users to the platform and offering a "Get Started" button. It checks if the user is logged in by validating their access token and redirects them to either the passport or sign-in page based on their login status. The page features a logo, a brief description of the WDCC Passport, and links to the team page and privacy policy. This page was required for the usage of the Google Sign In.

  • Components Used:
    • WDCCLogo
    • axios
    • updateStampValues
  • Style used: Landing-Page.module.css

Leaderboard

The Leaderboard component displays a user's progress toward earning prizes in the WDCC Passport system. It shows a progress bar, stamps remaining to earn a prize, and either a button to redeem a prize or a list of prizes achieved. It checks if the user is logged in and includes a navigation menu. The layout is centered, with key elements like the progress bar and prize-related details dynamically updated based on user data.

  • Components Used:
    • StampsAwayCount
    • ProgressBar
    • RedeemPrizeButton
    • PrizesAchieved
    • HamburgerMenu
    • CheckLoggedIn
    • LeaderboardStats
  • Style used: Leaderboard.css

LeaderboardCongratsPage

The CongratsPage component celebrates a user's prize achievement in the WDCC Passport system. It displays congratulatory messages, relevant images (a present and a cheering boy), and details about collecting the prize at the next event. The page also shows the number of prizes achieved by the user and is only accessible if the user is logged in. The layout is centered, with emphasis on visual elements and prize-related information.

  • Components Used:
    • congrats_present
    • cheering_boy
    • CheckLoggedIn
    • PrizesAchieved
    • GetLeaderboardStats
  • Style used: dashboard.css

Login

This code implements a Google Sign-In feature for a web application, primarily focusing on user authentication and navigation.

Front-End Highlights:

  1. Google Sign-In Hook:

    • Utilizes the useGoogleLogin hook from @react-oauth/google to handle user authentication with Google accounts.

  2. User Data Retrieval:

    • On successful login, user data (including name, email, and access token) is fetched from Google’s API.

  3. UPI Extraction:

    • The user’s UPI is derived from their email for further verification against the WDCC membership database.

  4. Conditional Navigation:

    • Based on the user’s membership status, they are redirected to different pages:
      • Admins navigate to the admin dashboard.
      • Non-admins are redirected to a dedicated page.
      • New users are created in MongoDB, while existing users have their data updated.

  5. Error Handling:

    • Redirects users to an error page if they are not valid members or if authentication fails.

Overall, the code effectively manages user authentication, role verification, and navigation, ensuring a seamless experience for users within the application.

MeetTheTeam

The "Meet the Team" page showcases the members of the WDCC team, highlighting their roles, fun facts, and individual profiles. Each team member is presented with their photo, name, role, and a unique fun fact, along with a link to their LinkedIn profile. The layout is responsive, featuring a grid format for optimal viewing on various devices. Additionally, the WDCC logo is displayed on the page.

  • Components Used:
    • WDCC
    • JoshLi_WDCC
    • Bill
    • Caleb
    • Erica
    • Inez
    • Nancy
    • Sebastian
    • Rithvik
    • Justin
    • Alden
  • Style used: All done in tailwind.

Not-An-Admin

The "Not An Admin" page informs users that they do not have admin privileges. It features the WDCC logo at the top and displays a message indicating the lack of admin access. Below the message, there is a button that redirects users to the home page.

  • Components Used:
    • WDCC_Login
  • Style used: styles from SignInError.module.css
  • Style used: styles2 from SignInError.module.css

Passport

The Passport page displays user-specific information and event stamps collected. It includes components for the main passport view, individual passport pages, and a hamburger menu. The page retrieves user data and events from an API using Axios and supports swipe navigation for moving between different pages of collected stamps. It checks if the user is logged in before rendering and shows a welcome message along with the total number of stamps collected.

  • Components Used:
    • PassportMain
    • PassportPage
    • HamburgerMenu
    • CheckLoggedIn
    • GetLeaderboardStats
  • Style used: Passport.css

privacy-policy

This page outlines the WDCC Passport app's data collection and usage practices, including Google OAuth authentication, data security, and non-sharing of personal information. It states there are no tracking mechanisms and includes contact information for inquiries.

  • Components Used:
    • WDCC_Logo
  • Style used: privacy-policy.module.css

QrErrorPage

This page handles the event attendance process based on a QR code. It verifies the user's access token and checks the event status. Depending on the result, it displays a success message for attendance or an error message if something goes wrong. The page features a loading indicator while processing and buttons to navigate to the passport page.

  • Components Used:
    • WDCC_Login
  • Style used: SignInError.module.css

SignInErrorPage

This page informs users that they are not registered with WDCC. It features an error message and provides a link for registration. The layout includes the WDCC logo at the top and a error message below.

  • Components Used:
    • WDCC_Login
  • Style used: styles from SignInError.module.css
  • Style used: styles2 from SignInError.module.css

SignInPage

This page allows users to sign in with their Google account to access WDCC Passport. It includes the WDCC logo at the top and prompts users to log in or register. If the user is on a desktop, they are redirected to an error page. The loading state is indicated by a loading animation while the sign-in process is underway.

  • Components Used:
    • GoogleSigninBtn
    • useGoogleSignIn
    • WDCC_Logo
  • Style used: SignInPage.module.css
Clone this wiki locally