Froggy Weather

Table of Contents

• 1. Requirements
  • 1.1 Features
• 2. Design
• 3. Architecture
  • 3.1. Internal Architecture
  • 3.2. External APIs
• 4. Cloud Infrastructure
• 5. Development
  • 5.1. Installation
  • 5.2. Development (Continuous) Build
  • 5.3. Production Build
• 6. Deployment (CI/CD Pipeline)
• 7. SEO

1. Requirements

Froggy Weather is a beautiful, feature rich and fast cross-platform weather app. It differentiates itself from others by being open-source, privacy-oriented and ad-free.

The single most important goal is maximum User Experience, i.e. mainly

• visual clarity & beauty of UI
• performance and smootheness of interactions

And because this will not generate any revenue and be paid for by the developers themselves

• the infrastructure should cost little

All contributors are welcome to this project!

1.1 Features

The weather app should include all features a typical weather app has. A great example is Apple's weather app.

An important feature shown there is also the ability to store and switch between multiple locations.

2. Design

Inspirations for the design can be taken from

• Apple's weather app for iOS devices [has responsive design including iPads!]
• Dribble: search "weather app"
  • e.g. from Zvonimir Juranko
• Behance: search "weather app"
  • e.g. from Zvonimir Juranko
• Chrome browser built-in weather app
• Tutorial by codewithsadee building a minimalist weather app with HTML, CSS and JS

The logo is probably a frog drawn in a minimalist/low poly/modern art style as SVG.

The color scheme may be something greenish - similar to the Tailwind UI Template "Protocol" - fitting to the green frog theme.

3. Architecture

3.1. Internal Architecture

The application is first developed as a responsive web application, but will later be brought especially to mobile devices as an installable and offline usable (caching last data!) Progressive Web Application.

Technologies

• HTML
• CSS
• JavaScript
• Alpine Js: a lightweight JavaScript framework, which can be used to open and close modals with clean transitions (!!) or iterating over lists. Tailwind uses Alpine for this as well, if you inspect their code. Knowledge required can be acquired via this course.

3.2. External APIs

• a weather API like OpenWeatherMap's Weather API

4. Cloud Infrastructure

The following diagram shows the cloud infrastructure the site is running on.

1. Incoming requests to the domain froggyweather.com first arrive at Route53, because it has the authoritative name servers responsible for my domain. Here will be the value of the "DNS A record" returned, which is ...tbd....cloudfront.net.
2. This value is the endpoint of my CloudFront distribution (a content delivery network). It serves cached copies of my static website's files, which I have put in an S3 bucket.
3. This CloudFront distribution takes a SSL certificate created for "froggyweather.com" in AWS Certificate Manager and applies it to the website's connections.
4. The origin from which CloudFront takes these website files is an S3 bucket named "froggyweather.com", where I put all the static files that make up my website.

Explanation of the different regions:

• Route53 and CloudFront are global services
• the S3 bucket is located in Frankfurt (eu-central-1), because it's is the preferred and closest region for me
• the SSL certificate is located in North Virginia (us-east-1), because this is the only region allowed by the CloudFront service for certificates.

5. Development

5.1. Installation

5.2. Development (Continuous) Build

5.3. Production Build

6. Deployment (CI/CD Pipeline)

A GitHub Actions CI/CD pipeline synchronizes all .html and .js files and the logo.svg file to the S3 bucket.

This pipeline will be triggered by every commit in the Git repository.

1. A GitHub runner will checkout the code in the repository.
2. It will deploy the files to the "froggyweather.com" S3 bucket.
3. It will invalidate the CloudFront distribution's cache, so the changes are are effective immediately.

7. SEO

Search-engine optimization will be done via:

• good content: providing exactly what a visitor would want in a very fast and easily accessible way
• great UI & UX: will reflect over time in search engines' metrics like traffic and bounce rate
• meta tags (basic ones + Open Graph Tags)
• keywords (in the respective meta tag and in the text of the websites)
• semantic HTML (e.g. header, nav, main, article, footer, code)
• ARIA attributes for accessibility
• Sitemap (sitemap.txt) to help search engines discover all my URLs so they can crawl and index them
• insane performance
• some backlinks (on other websites and social media)