Link Search Menu Expand Document
Team 1806 Website

Website Methodologies

This page is about the two seperate methodologies team 1806 is using for the website.

How this thing is built

There are two methods that are currently being worked on (as of 06/01/2022): Purity and Odyssey.

Purity

The methodology known as Purity was the first and is the current way of developing the team 1806 website. The Purity method is only pure HTML, CSS, and Javascript with a hosting and database management system called Firebase. The Purity method is being used as a quick and dirty way to get the website up and running with no frameworks. The HMCJS way is hard to develop with long term if you want to expand. A new method is currently being developed to make development easier and faster.

Odyssey

This new development method is called Odyssey, based on the epic by Homer. Odyssey is a new way the team 1806 site is based on. The tech stack is simplified and uses just the React Framework and Firebase. HTML, CSS, and JavaScript don’t go away, but these languages are packed into a neater and faster framework. With Purity, you had to put Javascript into HTML, with HTML to create a repeating object over pages (like a navbar) you would copy and paste that code to every page on the site. The React Framework puts HTML into Javascript, allowing for faster code and easier ways of development, like making reusable components that can be used anywhere you want. So instead of copying and pasting navbar HTML on every page, you can create the base navbar component and have React render the navbar as a component above all pages (see “React” page for more info). Firebase and CSS don’t go away, but the way that we use Firebase, it can be made more effective with Odyssey.

What tools are used and what is there function?

  • (Purity)
    • HTML
      • Content
    • CSS
      • Styling
    • JavaScript
      • Functionality
    • Firebase
      • Data handling/Hosting
  • (Odyssey)
    • React (HTML -> JS)
      • Content/Functionality
    • CSS (Might be switched to SCSS
      • Styling
    • Firebase
      • Data handling/Hosting

Resources

React Documentation

Firebase Documentation

Learn HTML, CSS, and basic JavaScript