30 Days of Cloud Leaderboard

This is a leaderboard for the students of Thapar, Patiala who are participating in the 2021 30 days of Google Cloud Platform Challenge

Overview

Here is the website : https://30daysofgcp.dsctiet.tech/

The project consists of a single page site and an app having a leaderboard table with search functionality to easily find a particular participant by name, and a couple of graphs showing the general point trends. The graphs have been made using react-chartjs-2 npm package in the web version and syncfusion_flutter_charts in the app. The website is powered by a flask based api. The backend system periodically scrapes the score from the qwkilab url public profile webpage and returns the ordered leaderboard accordingly. The leaderboard encourages the participants to proceed with their challenge by giving the top scorer(s) a crown against their ranks. This has been done to promote healthy competition among the participants and appreciate the enthusiasm of those who finished the challenge before time!

---

We follow a systematic Git Workflow -

• Create a fork of this repo.
• Clone your fork of your repo on your pc.
• Add Upstream to your clone
• Every change that you do, it has to be on a branch. Commits on master would directly be closed.
• Make sure that before you create a new branch for new changes,syncing with upstream is neccesary.

Setup and running of project (Backend) 🧮

• Fork the repo and clone it.
• Go in the repo and go into the api folder
  
• Edit the docker-compose.yml file
  • For the SECRET_KEY run openssl rand -hex 32 in your terminal and put the output in the variable
  • For EMAIL_USER and EMAIL_PASS put in the credentials of your gmail email id.
  • Forward the relevant port for the API server
• For https server put the origin.pem and key.pem certificates in the api folder
• To run the server run: docker-compose up --build
• Server will now run at: https://<hostname>:<port_exposed>
• To run via http:
  • Comment the ssl_context line in the api/api/app.py
  • In api/api/run.sh comment line 3 and uncomment line 4 and make the necessary changes to the port

Setup and running of project (Frontend) 🔮

• Make sure you have nodejs installed on your machine.
• Move into the client directory by doing cd client in the root directory of this repository
• After getting into the client directory, run npm install to install all the dependencies
• Start react server with npm start

Runs the app on your localhost.
Open http://localhost:3000 to view it in the browser.

Setup and running of project (App) 📱

• Make sure you have Flutter installed on your machine
• Move into the gcloud_leaderboard by doing cd app/gcloud_leaderboard in the root directory of this repository
• After getting into the gcloud_leaderboard directory, run flutter pub get to install all the dependencies
• Run the app on an emulator

Built With ⚒

Backend 📡

• Flask - Does the magic of making REST API endpoints
• SQLAlchemy - Storing the scores and user data in a database
• Docker - Running the server in a containerised way
• BeatifulSoup - Library used to scrape data from public profiles

Web Application 🖥

• React - Do you Even Need an introduction to this ? 😂
  • react-chartjs-2 - Simple yet flexible JavaScript charting for designers & developers

Mobile Application 📲

• Flutter- Better to write one codebase instead of two 😉
  • syncfusion_flutter_charts - for creating graphs
  • provider - for state management
  • http - for working with REST APIs

Authors ✍🏻

• Raghav Sharma - Backend Flask, API and Deployment - raghavTinker
• Yashvardhan Arora - UI and React Web Application - yash22arora
• Sidharth Bahl - Flutter Mobile Application - sidB67