30 Days of Cloud Leaderboard

Overview

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 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:// :
• 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

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