Initialization 🏁

In our app, we use Express as our Node.js web framework middleware.

// Initialization
const express = require("express");
const app = express();
// Middleware
app.use(express.json());

CORS Headers 💻

We've also set up Cross-Origin Resource Sharing (CORS) headers to allow requests from any origin.

app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  next();
});

Static File Serving & Routes 🚏

With Express, we utilize static file serving. For instance, any files in the ./public/js directory can be accessed via the /js route.

app.use(express.static('app'));
app.use("/js", express.static("./public/js"));
app.use("/css", express.static("./public/css"));
app.use("/img", express.static("./public/img"));

We also manually set up routes for all of our pages, which was somewhat tedious. An example is:

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/app/html/index.html');
});

Server Initialization 🏁

Lastly, we initialized and ran our Express server on port 8000.

app.listen(8000, () => {
  console.log('Server started on port 8000');
});

Initialization 🏁

Initializing firebase was relative simple. All we had to do was go to firebase.google.com and start a project. After the project setup, all we had to do was install firebase as node package ($ npm install firebase) and copy the firebase configurations.

//----------------------------------------
//  Your web app's Firebase configuration
//----------------------------------------
var firebaseConfig = { //Input firebase API keys
  apiKey: "",
  authDomain: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: "",
};

//--------------------------------------------
// initialize the Firebase app
// initialize Firestore database if using it
//--------------------------------------------
const app = firebase.initializeApp(firebaseConfig);
const db = firebase.firestore();
const storage = firebase.storage();

Authentication 🔒

We also used firebase for authentication since it was provided. We used the Firebase UI Widget for authentication and user log-ins. You can check the authentication and the sign in flow here.

Leaderboard 🏆

Firstly, a variable was made to retrieve a reference to the DOM element with the ID 'leaderboard-body', which involves the tbody element of the leaderboard table.

var leaderboardTable = document.getElementById("leaderboard-body");

Based off the leaderboard logic, I used document.createElement and appendChild method to display the users accordingly.

var user = doc.data();
var points = user.points;

// Increment rank if points are lower than previous user's points
if (points !== previousPoints) {
    rank++;
}

var row = document.createElement("tr");
var rankCell = document.createElement("td");
rankCell.textContent = rank;
row.appendChild(rankCell);

var nameCell = document.createElement("td");
nameCell.appendChild(
    document.createTextNode(user.displayName || user.name)
        );
row.appendChild(nameCell);

var pointsCell = document.createElement("td");
pointsCell.textContent = points;
row.appendChild(pointsCell);

Tasks 📌

For tasks, I randomly displayed tasks using random seed value from the Firestore database.

 const ecoActions = await getEcoActions();
 const randomTasks = [];

 for (let i = 0; i < 3; i++) {
    const randomIndex = Math.floor(Math.random(seed) * ecoActions.length);
    const randomTask = ecoActions[randomIndex];
    randomTasks.push(randomTask);
    ecoActions.splice(randomIndex, 1);
 }

 const taskList = document.getElementById("task-list");
 taskList.innerHTML = "";

Based on the tasks, I implemented functions to pick an image file to upload to call Google Vision API to analyze the image using label detection.

const imageUrl = await fileRef.getDownloadURL();

// Call the Google Vision API to analyze the image
const apiKey = API_KEY;
const url = `https://vision.googleapis.com/v1/images:annotate?key=${apiKey}`;
const data = {
      requests: [
         {
           image: {
           source: {
              imageUri: imageUrl,
           },
         },
           features: [
         {
             type: "LABEL_DETECTION",
           },
          ],
         },
      ],
};

const response = await fetch(url, {
      method: "POST",
      headers: {
         "Content-Type": "application/json",
      },
          body: JSON.stringify(data),
});

const json = await response.json();

If the response returns as valid, the task is marked as completed, associated points are added, and completed tasks are removed.