Table of contents

• About Project Green World

• Website Creation

  • Research

  • Design

  • Implementation

    • Code
    • Collaboration
    • Deployment

• Cool features we're really proud of (that you also might have missed)

About Project Green World

Project Green World is a fictional non-profit organization that promotes clean and green solutions for homeowners to utilize for implementation into their daily lives. By utilizing a national database of tax rebate information, homeowners are able to find the best way to introduce more sustainable and effective energy practices into their daily lives. Furthermore, our website provides up-to-date and accurate resources for homeowners to take initiative in transforming their lives into a world of green.

Website Creation

This website was not pre-built; it was entirely developed by the team.

Our team used Discord in order to communicate and collaborate on tasks.

Research

Member Count	4
Tools	Google Docs, Noodle Tools, Microsoft Word

Almost everyone participated in researching and website copywriting (the process where you write text for a website). We first did preliminary research on what the website should even contain, then we began writing the content on a shared Google Docs. Lastly, developers copied this content onto the website.

Design

Quick Figures
Member Count	2
Tools	Figma, Google

We used Figma, a popular free tool that allows people to collaborate on designing websites. We used Figma to collaborate on making designs for the website in different screen widths and pages, making sure to make it look good on mobile and desktop.

Implementation

Quick Figures
Member Count	4
Tools	Visual Studio Code, JetBrains Webstorm, Azure DevOps, Vercel, Cloudflare
Technologies	React, Tailwind, Typescript, Node.JS, Cloudflare Workers

Again, almost everyone participating in developing and coding for the website!

Code

Technologies
Our codebase uses numerous technologies, like the following:

Technology	Description
React.JS	React.JS is a web development framework that greatly improves code quality and efficiency.
Tailwind.CSS	Tailwind.CSS is very similar to Bootstrap, in that it is a CSS framework. It operates very similarily to Bootstrap, and our decision to use it simply came down to team preference.
Typescript	Typescript addresses some of the weaknesses of Javascript and is a language that includes type declaration and checking. It compiles to Javascript.
Cloudflare Workers	We used Cloudflare Workers as a super cheap method of hosting a backend that can dynamically scale. This includes hosting the code for the tax rebates data backend, solar api, etc
Everything Else	The technologies above are simply the primary technologies that we used. We, of course, used many other open-source MIT-licensed technologies.

Collaboration

In order to collaborate on coding, we used a tool called Azure Devops. It allows us to collaborate on different parts of the code asynchronously.

Deployment

We used Vercel to deploy and host our website. Vercel is a free hosting service. We configured Vercel to automatically deploy our website everytime a change was made in our codebase.
In order to improve the loading times of our website, we used Cloudflare. Cloudflare is a CDN (Content Distribution Network), that caches our website on thousands of their servers worldwide. Then, when users visit our website, instead of going all the way to a single server in Virginia (Vercel's servers), they fetch the website directly from the closest Cloudflare server, often less than 200 miles away.

Cool features we're really proud of (that you also might have missed)

• The smooth page transitions. The navbar dynamically resizes on scroll, and when you go to another page, you get a seamless, smooth page transition.
• Mobile responsiveness. Our website is designed for flawless mobile responsiveness, which means going on our website on your phone is just as good as going on your computer. Our navbar's transitions are also pretty cool!
• Translations We allow users to view our website in whatever language they want by clicking the language icon in the top right corner on desktop, or the top left icon on mobile. We support 50+ languages.
• Rich Presence (Open Graph, etc). Try pasting our website's URL in Discord, Twitter, Facebook, etc. You'll see a cool embed like the one below: