📁 ফাইল কই! (File Koi!) - Classroom File Sharing App

A beautifully designed, serverless web application built for classrooms to easily share, organize, and access educational resources. The project uses a modern Glassmorphism UI and relies on Google Sheets as a free backend database via Google Apps Script.

✨ Features

• Serverless Architecture: No traditional backend required; uses Google Sheets & Google Apps Script.
• Modern UI: Responsive, aesthetically pleasing glassmorphism design.
• Auto-Thumbnails: Automatically extracts and generates thumbnails for Google Drive links.
• Categorization: Organize files by type (Presentations, Docs, Figures, Data, Code, etc.).
• Admin Protection: Add and Delete actions are protected by an Admin password.
• Real-time Updates: Fetches the latest files asynchronously without reloading the page.

🛠️ Tech Stack

• Frontend: HTML5, CSS3 (Flexbox/Grid, Custom Variables), Vanilla JavaScript.
• Backend / Database: Google Apps Script, Google Sheets.
• Fonts: 'Anek Bangla' & 'Montserrat' (Google Fonts).

---

🚀 Setup & Installation Guide

Since this project uses Google Sheets as a database, you need to set up the backend first, generate an API link, and connect it to your frontend.

Step 1: Set up the Google Sheet (Database)

1. Go to Google Sheets and create a new blank spreadsheet.
2. Rename the first sheet at the bottom to Files (case-sensitive).
3. In the first row, create the following headers exactly as written (A1 to H1): id | title | link | thumb | uploader | tag | desc | timestamp

Step 2: Set up Google Apps Script (Backend)

1. On your Google Sheet, click on Extensions > Apps Script.
2. Delete any existing code and paste the following script:

const SHEET_NAME = "Files";
const ADMIN_PASSWORD = "your_admin_password"; // ⚠️ CHANGE THIS PASSWORD

function doGet(e) {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName(SHEET_NAME);
  const data = sheet.getDataRange().getValues();
  const headers = data[0];
  const result = [];
  
  for (let i = 1; i < data.length; i++) {
    let obj = {};
    for (let j = 0; j < headers.length; j++) {
      obj[headers[j]] = data[i][j];
    }
    result.push(obj);
  }
  return ContentService.createTextOutput(JSON.stringify(result))
    .setMimeType(ContentService.MimeType.JSON);
}

function doPost(e) {
  try {
    const payload = JSON.parse(e.postData.contents);
    
    // Password Check
    if (payload.password !== ADMIN_PASSWORD) {
      return ContentService.createTextOutput(JSON.stringify({success: false, error: "Incorrect Admin Password!"}))
        .setMimeType(ContentService.MimeType.JSON);
    }

    const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName(SHEET_NAME);

    // Add File
    if (payload.action === 'add') {
      sheet.appendRow([
        payload.id,
        payload.title,
        payload.link,
        payload.thumb,
        payload.uploader,
        payload.tag,
        payload.desc,
        payload.timestamp
      ]);
      return ContentService.createTextOutput(JSON.stringify({success: true}))
        .setMimeType(ContentService.MimeType.JSON);
    }

    // Delete File
    if (payload.action === 'delete') {
      const data = sheet.getDataRange().getValues();
      for (let i = 1; i < data.length; i++) {
        // id is in the first column (index 0)
        if (data[i][0] == payload.id) { 
          sheet.deleteRow(i + 1);
          return ContentService.createTextOutput(JSON.stringify({success: true}))
            .setMimeType(ContentService.MimeType.JSON);
        }
      }
      return ContentService.createTextOutput(JSON.stringify({success: false, error: "File not found"}))
        .setMimeType(ContentService.MimeType.JSON);
    }

  } catch(error) {
    return ContentService.createTextOutput(JSON.stringify({success: false, error: error.toString()}))
      .setMimeType(ContentService.MimeType.JSON);
  }
}

Step 3: Deploy the Script

1. Click the blue Deploy button at the top right, then select New deployment.
2. Click the gear icon (⚙️) next to "Select type" and choose Web app.
3. Under Description, type "Initial Release".
4. Under Execute as, select Me.
5. Under Who has access, select Anyone.
6. Click Deploy. (Note: Google will ask you to authorize the script. Click "Review permissions", choose your account, click "Advanced", and then "Go to project" to allow it).
7. Copy the generated Web app URL.

Step 4: Connect Backend to Frontend

1. Open the index.html file in your repository.
2. Scroll down to the <script> section.
3. Replace the SCRIPT_URL variable with the Web app URL you just copied:

const SCRIPT_URL = "YOUR_NEW_WEB_APP_URL_HERE"; 

4. Save the file.

🌐 Hosting

Since this is a static HTML file that fetches data via an API, you can host it for free anywhere:

• GitHub Pages (Recommended)
• Vercel
• Netlify

📝 Usage

1. Open the hosted website.
2. Fill in the file details (Title, Link, Description, Category).
3. If you paste a Google Drive link in the Thumbnail field, the system will automatically convert it into a viewable preview thumbnail.
4. Click + Add File, enter your Admin password, and the file will appear globally for everyone!

---

Created by Md Sifatul Islam