Skip to content

Home

Jump to bottom
apb718 edited this page Feb 21, 2025 · 2 revisions

Theta Tau - Tau Delta Chapter Website (With Firebase)

Initial version written by Nicholas Wheeler (11/6/2023)
Updates and clarification written by Keigen Godlaski (2/12/2025)
Brought to github by Alec Byrd (2/19/2025)

Introduction

What is Firebase?

Firebase is a BaaS (Backend-as-a-Service) offered by Google that will host an application for creators and integrate many great features into the application through easily-includable packages, such as “tree-shakable” module inclusion with JavaScript files when building a web application. (What we did here as of 10/30/2023).

Firebase Introduction Video

This is a great primer to what Firebase is capable of in terms of creating a website, and all Firebase projects can be expanded to further ventures such as iOS applications, Android Applications, Unity projects, etc…
While this video is a bit dated in the techniques used to import modules and organize files, the core idea and concepts of connecting a project to your VS Code environment are still there, so it is highly recommended.

Firebase Video

Joining The Development Team

Downloads

To properly develop and ship code for the Theta Tau website to then host on the Firebase project, a few pieces of software need to be installed on your local machine first.

Requirements

  • VS Code
  • npm
  • Node.js
  • Miami University Google account with Firebase access

It is also recommended to install the “Firebase Explorer” extension in VS Code to help manage aspects of the Firebase project.

Accessing the Source Code

  1. Create a local folder to store the project.
  2. Become a member of the Theta Tau Miami GitHub to access the source code.
  3. Download the current source code of the Firebase-Theta-Tau-Miami project and place it in your folder.
  4. Install the GitHub VS Code extension and initialize the folder as a local repository.

If the above does not work:

Run the following commands in a bash terminal in the correct local folder:

git init
git clone https://github.com/ThetaTauMiami/Firebase-Theta-Tau-Website.git

Connecting To The Project

A project owner must grant ownership permissions to your account via Firebase. Navigate to:
firebase.google.com > Console > ThetaTauMiami > Settings > Project settings > Users and permissions

Setting Up Firebase CLI

Install Firebase CLI:

npm i firebase-tools -g

Then log in:

firebase login

Next, initialize Firebase in the project:

firebase init

Important selections during initialization:

  • Select "Hosting: Configure files for Firebase Hosting" and "Emulators: Set up local emulators for Firebase products"
  • Use an existing project (Choose thetataumiamiuniversity (ThetaTauMiami))
  • Enter "public" for the public directory
  • Enter "N" for single-page app
  • Enter "N" for GitHub automatic builds and deploys
  • Do not overwrite the index.html file
  • Allow only the "Hosting" emulator
  • Accept default options for remaining prompts

To locally serve the website:

firebase serve

To deploy changes to Firebase:

firebase deploy

Project Overview

Code Organization

  • The public folder contains all the deployed code.
  • The _includes, _layouts, and assets folders contain supporting files such as CSS, images, and additional HTML/JS files.

Static Pages

These pages require manual updates to HTML files and Firebase deployment:

  • Home (index.html)
  • Gallery (gallery.html)
  • Events (events.html)
  • Leadership (leadership.html)
  • Recruitment (recruitment.html)
  • Contact (contact.html)

Dynamic Pages

These interact with Firebase and Cloud Firestore:

  • Login
  • Account
  • Profile Update
  • Photo Upload
  • Points Update
    These use Firebase SDKs to pull and store user data.

Version Control and CI/CD

When making changes to the website it is best practice to follow standard GitHub best practices.

  • Make your changes on a branch related to a focused topic
git branch -c {branch_name}
  • Commit frequently and state what is exactly being done
git add . 
git commit -m '{descriptive_message}'
  • When you have your local changes made push them to the remote branch on GitHub
git push origin HEAD
  • Make a pull request on the GitHub website to merge your branch into main
  • View the preview created through the CI/CD pipeline. This will allow you to sample view what the site will look like once merged to main
  • optional, but recommended Assign the merge to be reviewed by another person. This will help insure no problematic changes are made during edits

Admin Functionality & Points Management

  • Only Admins can access the Points Update page.
  • Admins are managed in Google Firestore > config > roles collection.
  • The website verifies user permissions by checking Firebase UID access.

Best Practices:

  • Only Exec members, tech team, or chairs should have admin access.
  • The permission array can be modified for future feature enhancements.

Future Website Goals

  • Automate final points export with calculations and email dispatch.
  • Integrate Google Calendar using JavaScript.
  • Create a brother catalog with contact info.
  • Rework Points System to be event-based.
  • Implement event reviews with user-uploaded photos.
  • Add important document storage.

Semester Duties

  • Check the domain name.
  • Contact the domain owner for renewals and redirects.

Clone this wiki locally