docs(major components): add brief description of each

For #407.

doc/implementation-notes.md

@@ -8,6 +8,15 @@ Contents
 - [Overview](#overview)
   - [Server](#server)
   - [Client](#client)
+  - [Major Components](#major-components)
+    - [User Interface](#user-interface)
+    - [API](#api)
+    - [Server](#server)
+    - [PhET Website](#phet-website)
+    - [Long-Term String Storage](#long-term-string-storage)
+    - [Short-Term String Storage](#short-term-string-storage)
+    - [Sim Source Code](#sim-source-code)
+  - [Translation Report](#translation-report)
 - [Rosetta Coding Conventions](#rosetta-coding-conventions)
 - [Workflow](#workflow)
   - [IDE and Formatting](#ide-and-formatting)
@@ -72,6 +81,85 @@ Vite is used to transpile and bundle the React code. The result of
 transpiling and bundling the React code is a directory containing static
 files. The server serves these static files.
 
+### Major Components
+
+#### User Interface
+
+Rosetta's user interface is written in React, and it has three main 
+pages: the select locale page, the select sim page, and the 
+translation form. The select locale page allows the user to select the
+locale they want to translate in. The select sim page allows the user
+to view the sims that are available to translate in the selected locale,
+as well as statistics about how many strings are translated in each sim.
+The translation form allows the user to translate strings in the
+selected sim.
+
+#### API
+
+The user interface interacts with the server via API endpoints the 
+server establishes. These endpoints make it so that the user interface
+can be decoupled from the server.
+
+#### Server
+
+The server handles the API requests from the user interface. It
+serves the static files generated by the user interface. It also stores
+translations in both long-term and short-term storage.
+
+#### PhET Website
+
+Rosetta gets login info and sim metadata from the PhET website. The
+PhET website also provides an API endpoint for logging a user out.
+
+#### Long-Term String Storage
+
+Long-term string storage is where translations are stored when the user 
+publishes a translation. As of this writing, long-term storage is a
+GitHub repository.
+
+#### Short-Term String Storage
+
+Short-term string storage is where translations are stored when the user
+saves a translation. As of this writing, short-term storage is a MongoDB
+database on phet-server2.
+
+#### Sim Source Code
+
+The translation statistics on the select sim page need the English 
+string files for each sim. Thus, we depend on the string file in the sim
+source code.
+
+Translation Report
+------------------
+
+The maintainers of Rosetta (@jbphet and @liammulh) tend to refer to the
+select sim page as the translation report. This is the page where 
+statistics about how many strings are translated in each sim are
+displayed to the user. (It is also the page where the user selects the
+sim they want to translate.) The translation report was the big feature
+added in Rosetta 2.0.
+
+It works by subscribing to a server sent events (SSE) source on the 
+server. The server provides an API endpoint that iterates through a
+list of sims and gets stats about each of them. Once it has the stats
+for a given sim, it sends those stats to whoever is subscribed to 
+the SSE source. The client-side code re-renders the page each time it 
+gets  new stats to display. As of this writing, long-term string 
+storage is the phetsims/babel GitHub repository. Since we need to get
+string files from this repository to generate the report, we need to use
+the GitHub API. We only get 5000 requests per hour, and as of this 
+writing there are about 100 sims, and each sim requires about 8 
+requests, so we can only generate the translation report for about 6 
+locales per hour. For more info on this, see
+[this comment](https://github.com/phetsims/rosetta/issues/410#issuecomment-1563781403).
+
+Once the translation report for a locale has been generated, it is 
+cached in Rosetta's memory. It will stay in Rosetta's memory until 
+Rosetta is restarted. The translation report objects for each sim 
+containing total strings translated, total strings, etc. will be updated
+if a user publishes a translation. They can also be manually flushed by
+hitting an API route.
+
 Workflow
 --------