GDG Certificate Verification System

An automated, serverless certificate verification system built for the Google Cloud Study Jam.

View Live Demo • How it Works • Build Your Own

⚡ About The Project

This project solves a major problem for community organizers: How to issue verifiable certificates without paying for expensive servers or hosting.

It allows students to:

1. Verify their completion status using a unique Certificate ID.
2. Preview their certificate instantly in the browser.
3. Add to LinkedIn with one click (using official organization IDs).
4. Download the PDF copy directly from Google Drive.

The entire system runs for free using Google's ecosystem as a backend.

🏗 Architecture

This project uses a Serverless Architecture where Google Sheets acts as the database and Google Drive acts as the file storage.

graph LR
    A[User] -- Enters ID --> B(Netlify Website)
    B -- Fetch Request --> C{Google Apps Script API}
    C -- Query --> D[(Google Sheet Database)]
    D -- Return Data (Name, Date, FileID) --> C
    C -- JSON Response --> B
    B -- Displays Data --> A

Loading

• Frontend: HTML5, CSS3 (Glassmorphism UI), Vanilla JavaScript.
• Backend API: Google Apps Script (doGet).
• Database: Google Sheets.
• Storage: Google Drive (PDFs).

---

🚀 How to Build This Yourself

Want to use this for your own GDG or Club? Follow these steps.

Phase 1: The Database (Google Sheet)

1. Create a new Google Sheet.
2. Create columns in this exact order:
   • A Certificate ID
   • B Student Name
   • C Profile URL (optional)
   • D Issue Date
   • E File ID (This is the Google Drive ID of the PDF)

Phase 2: The API (Google Apps Script)

1. Open your Google Sheet, go to Extensions > Apps Script.
2. Paste the following code into Code.gs:

<details> <summary>Click to view the Backend API Code</summary>

function doGet(e) {
  var idToCheck = e.parameter.id;
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Sheet1'); // Change to your tab name
  var data = sheet.getDataRange().getValues();
  
  var result = { valid: false, error: "Certificate not found" };

  for (var i = 1; i < data.length; i++) {
    if (data[i][0] == idToCheck) {
      result = {
        valid: true,
        certId: data[i][0],
        name: data[i][1],
        profileUrl: data[i][2],
        date: data[i][3],
        fileId: data[i][4]
      };
      break; 
    }
  }

  return ContentService.createTextOutput(JSON.stringify(result))
    .setMimeType(ContentService.MimeType.JSON);
}

</details>

3. Click Deploy > New Deployment > Web App.
4. Important: Set Who has access to "Anyone".
5. Copy the Web App URL.

Phase 3: The Frontend

1. Clone this repository.
2. Open index.html.
3. Find the API_URL variable in the <script> section.
4. Replace it with your Web App URL from Phase 2.
5. Upload index.html, logo.png, and google.svg to Netlify or GitHub Pages.

---

🎨 Features & UI

• Glassmorphism Design: Modern, frosted glass card UI.
• Google Branding: Uses official Google colors and fonts (Inter).
• Smart Loader: Google-colored loading spinner.
• Dark Mode Safe: Optimized logos and contrasts.
• LinkedIn Integration: Generates a pre-filled "Add to Profile" link.
• Visitor Counter: Tracks page hits using counterapi.dev.

📂 Directory Structure

/
├── index.html        # The main verification portal
├── logo.png          # Your community logo
├── google.svg        # Google G icon for buttons
└── README.md         # Documentation

🤝 Contributing

Contributions are welcome! If you have ideas to make this better, feel free to fork the repo and submit a pull request.

1. Fork the Project
2. Create your Feature Branch
3. Commit your Changes
4. Push to the Branch
5. Open a Pull Request

👤 Author

Ezaz Ahmed

• GDG On Campus Lead, JIST
• LinkedIn

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

---

Made with ❤️ by the GDG On Campus Organizer JIST